第十六章 CSS选择器

电玩女神 2022-01-14 04:55 443阅读 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">
  13. <tr><th>Name</th><th>City</th></tr>
  14. <tr><td>Adam Freeman</td><td>London</td></tr>
  15. <tr><td>Joe Smith</td><td>New York</td></tr>
  16. <tr><td>Anne Jones</td><td>Paris</td></tr>
  17. </table>
  18. <p><p>I like <span lang="en-uk" class="class2">apdddples</span> and oranges.</p></p>
  19. <p>I like <span lang="en-uk" class="class2">apples111</span> and oranges.</p>
  20. <table id="othertable">
  21. <tr><th>Name</th><th>City</th></tr>
  22. <tr><td>Peter Pererson</td><td>Boston</td></tr>
  23. <tr><td>Chuck Fellows</td><td>Paris</td></tr>
  24. <tr><td><span lang="en-uk" class="class2">apples11</span>Jane Firth</td><td>Paris</td></tr>
  25. </table>
  26. </body>
  27. </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>
  15. <p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
  16. <a href="http://w3c.org">Visit the W3C website</a>
  17. </body>
  18. </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;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <p>Fourscore and seven years ago our fathers brought forth
  15. on this continent a new nation, conceived in liberty, and
  16. dedicated to the proposition that all men are created equal.</p>
  17. <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>

: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 条评论,443人围观)

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

相关阅读