第十六章 CSS选择器

电玩女神 2022-01-14 04:55 446阅读 0赞

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一、基本选择器

1、选择所有元素（*）

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             * {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a href="http://apress.com">Visit the Apress website</a>
  13.         <p>I like <span>apples</span> and oranges.</p>
  14.         <a href="http://w3c.org">Visit the W3C website</a>
  15.     </body>
  16. </html>

2、根据类型选择元素

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             a {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a href="http://apress.com">Visit the Apress website</a>
  13.         <p>I like <span>apples</span> and oranges.</p>
  14.         <a href="http://w3c.org">Visit the W3C website</a>
  15.     </body>
  16. </html>

3、根据类选择元素(*.class;.class是一样的)

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             .class2 {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a class="class1 class2" href="http://apress.com">Visit the Apress website</a>
  13.         <p>I like <span class="class2">apples</span> and oranges.</p>
  14.         <a href="http://w3c.org">Visit the W3C website</a>
  15.     </body>
  16. </html>

类型和类结合

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             span.class2 {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a class="class1 class2" href="http://apress.com">Visit the Apress website</a>
  13.         <p>I like <span class="class2">apples</span> and oranges.</p>
  14.         <a href="http://w3c.org">Visit the W3C website</a>
  15.     </body>
  16. </html>

4、根据ID选择元素

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             #w3canchor {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a id="apressanchor" class="class1 class2" href="http://apress.com">
  13.             Visit the Apress website
  14.         </a>
  15.         <p>I like <span class="class2">apples</span> and oranges.</p>
  16.         <a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
  17.     </body>
  18. </html>

5、根据属性选择元素

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             [href] {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a id="apressanchor" class="class1 class2" href="http://apress.com">
  13.             Visit the Apress website
  14.         </a>
  15.         <p>I like <span class="class2">apples</span> and oranges.</p>
  16.         <a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
  17.     </body>
  18. </html>

attr~=val:属性有多个值 ，其中一个值 为val

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             [class~="class2"] {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a id="apressanchor" class="class1 class2" href="http://apress.com">
  13.             Visit the Apress website
  14.         </a>
  15.         <p>I like <span class="class2">apples</span> and oranges.</p>
  16.         <a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
  17.     </body>
  18. </html>

attr|=val:属性值为连字符分割的（-）其中第一个字为字符串val

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             [lang|="en"] {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a lang="en-us" id="apressanchor" class="class1 class2" href="http://apress.com">
  13.             Visit the Apress website
  14.         </a>
  15.         <p>I like <span lang="en-gb" class="class2">apples</span> and oranges.</p>
  16.         <a lang="en" id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
  17.     </body>
  18. </html>

二、复合选择器

1、并集选择器

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             a, [lang|="en"] {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a id="apressanchor" class="class1 class2" href="http://apress.com">
  13.             Visit the Apress website
  14.         </a>
  15.         <p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
  16.         <a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
  17.     </body>
  18. </html>

2、后代选择器

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             p span {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a id="apressanchor" class="class1 class2" href="http://apress.com">
  13.             Visit the Apress website
  14.         </a>
  15.         <p>I like <span lang="en-uk" class="class2">apples</span> and oranges.<span lang="en-uk" class="class2">apples1</span></p>
  16.         <a id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
  17.     </body>
  18. </html>

3、选择子元素—-直接后代

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             body > * > span, tr > th {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <table id="mytable">
  14.             <tr><th>Name</th><th>City</th></tr>
  15.             <tr><td>Adam Freeman</td><td>London</td></tr>
  16.             <tr><td>Joe Smith</td><td>New York</td></tr>
  17.             <tr><td>Anne Jones</td><td>Paris</td></tr>
  18.         </table>
  20.         <p><p>I like <span lang="en-uk" class="class2">apdddples</span> and oranges.</p></p>
  21.           <p>I like <span lang="en-uk" class="class2">apples111</span> and oranges.</p>
  22.         <table id="othertable">
  23.             <tr><th>Name</th><th>City</th></tr>
  24.             <tr><td>Peter Pererson</td><td>Boston</td></tr>
  25.             <tr><td>Chuck Fellows</td><td>Paris</td></tr>
  26.             <tr><td><span lang="en-uk" class="class2">apples11</span>Jane Firth</td><td>Paris</td></tr>
  27.         </table>
  28.     </body>
  29. </html>

4、选择兄弟元素

p+a:相邻兄弟：紧跟在p元素之后的

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             p + a {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a href="http://apress.com">Visit the Apress website</a>
  13.         <p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
  14.         <a href="http://w3c.org">Visit the W3C website</a>
  15.         <a href="http://google.com">Visit Google</a>
  16.     </body>
  17. </html>

p~a：普通兄弟

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             p ~ a {
  6.                 border: thin black solid;
  7.                 padding: 4px;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <a href="http://apress.com">Visit the Apress website</a>
  13.         <p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
  14.         <a href="http://w3c.org">Visit the W3C website</a>
  15.         <a href="http://google.com">Visit Google</a>
  16.     </body>
  17. </html>

三、伪元素选择器

::first-line:匹配文本块的首行

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             ::first-line {
  6.                 background-color:grey;
  7.                 color:white;
  8.             }
  9.         </style>
  10.     </head>
  11.     <body>
  12.         <p>Fourscore and seven years ago our fathers brought forth
  13.            on this continent a new nation, conceived in liberty, and
  14.            dedicated to the proposition that all men are created equal.</p>
  16.         <p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
  18.         <a href="http://w3c.org">Visit the W3C website</a>
  19.     </body>
  20. </html>

::first-letter:文本块首字母

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             ::first-letter {
  6.                 background-color:grey;
  7.                 color:white;
  8.                 border: thin black solid;
  9.                 padding: 4px;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <p>Fourscore and seven years ago our fathers brought forth
  16.             on this continent a new nation, conceived in liberty, and
  17.              dedicated to the proposition that all men are created equal.</p>
  19.         <p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
  20.         <a href="http://w3c.org">Visit the W3C website</a>
  21.     </body>
  22. </html>

：before和:after:会生成内容并插入到文档

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             a:before {
  6.                 content: "Click here to "
  7.             }
  8.             a:after {
  9.                 content: "!"
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <a href="http://apress.com">Visit the Apress website</a>
  15.         <p>I like <span>apples</span> and oranges.</p>
  16.         <a href="http://w3c.org">Visit the W3C website</a>
  17.     </body>
  18. </html>

css计数器

  1. <html>
  2.     <head>
  3.         <title>Example</title>
  4.         <style type="text/css">
  5.             div {
  6.                 counter-reset: paracount;//默认值为1；paracount 10
  7.             }
  8.             p:before {
  9.                 content: counter(paracount) ". ";
  10.                 counter-increment: paracount;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <a href="http://apress.com">Visit the Apress website</a>
  16.         <div>
  17.         <p>I like <span>apples</span> and oranges.</p>
  18.         <p>I also like <span>mangos</span> and cherries.</p></div>
  19.         <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
  20.     </body>
  21. </html>

转载于:https://my.oschina.net/u/2285087/blog/813217

发表评论

表情：
评论列表 （有 0 条评论，446人围观）

还没有评论，来说两句吧...

相关阅读