[CSS3] 学习笔记-CSS3选择器详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[CSS3] 学习笔记-CSS3选择器详解相关的知识，希望对你有一定的参考价值。
1、属性选择器
在CSS3中，追加了3个属性选择器，分别为：[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 /*id包含div字符串，就加载效果*/ 8 [id*=div]{ 9 color:lime; 10 } 11 /*首字母为div的，才加载效果*/ 12 [id^=div]{ 13 color:darkgoldenrod; 14 } 15 /*最后几个三个字母为div，才加载效果*/ 16 [id$=div]{ 17 color:red; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="div1">示例文本1</div> 23 <div id="div2">示例文本2</div> 24 <div id="div3">示例文本3</div> 25 <div id="div4">示例文本4</div> 26 <div id="5div">示例文本5</div> 27 <div id="my">示例文本6</div> 28 </body> 29 </html>
2、结构性伪类选择器
包括伪类选择器和伪元素选择器，下面是第二种：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <!--first-line--> 7 <style> 8 p:first-line{ 9 color:chocolate; 10 } 11 /*first-letter*/ 12 p:first-letter{ 13 color:royalblue; 14 } 15 /*before*/ 16 li:before{ 17 content:"---"; 18 } 19 /*after*/ 20 li:after{ 21 content:" 对列表做一个解释"; 22 color:gray; 23 } 24 </style> 25 </head> 26 <body> 27 <p>这是在第一行的内容<br/>这是在第二行的内容</p> 28 <ul> 29 <li>列表1</li> 30 <li>列表2</li> 31 <li>列表3</li> 32 <li>列表4</li> 33 <li>列表5</li> 34 </ul> 35 </body> 36 </html>
3、选择器root、not、empty和target
这四种都是结构性伪类选择器，在CSS3 中，结构性伪类选择器的共同特征是允许开发者根据文档中的结构来指定元素的样式。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <!--root--> 7 <!--将样式绑在根元素中，即<html>中--> 8 <style> 9 :root{ 10 background-color:gray; 11 color:green; 12 } 13 /*not*/ 14 /*如果想对结构元素使用样式，但想拍出结构元素下面的子结构元素*/ 15 div *:not(h1){ 16 color:crimson; 17 } 18 /*emtpy */ 19 /*当前元素为空时，指定的样式 */ 20 :empty{ 21 background-color: aqua; 22 } 23 /*target */ 24 /*当用户点击超链接，并跳转到某个target元素后，起作用*/ 25 :target{ 26 background-color: orange; 27 } 28 </style> 29 </head> 30 <body> 31 <div> 32 你好吗？ 33 </div> 34 <div> 35 <h2> 36 我很好 37 </h2> 38 </div> 39 <table border="1"> 40 <tr> 41 <td>内容1</td> 42 <td>内容2</td> 43 </tr> 44 <tr> 45 <td>内容3</td> 46 <td></td> 47 </tr> 48 <tr> 49 <td></td> 50 <td>内容4</td> 51 </tr> 52 </table> 53 <br/> 54 <a href="#a1">菜单1</a>| 55 <a href="#a2">菜单2</a>| 56 <a href="#a3">菜单3</a>| 57 <a href="#a4">菜单4</a>| 58 <div id="a1"> 59 <h1>菜单1</h1> 60 <p>菜单1内容</p> 61 </div> 62 <div id="a2"> 63 <h1>菜单2</h1> 64 <p>菜单2内容</p> 65 </div> 66 <div id="a3"> 67 <h1>菜单3</h1> 68 <p>菜单3内容</p> 69 </div> 70 <div id="a4"> 71 <h1>菜单4</h1> 72 <p>菜单4内容</p> 73 </div> 74 </body> 75 </html>
以上是关于[CSS3] 学习笔记-CSS3选择器详解的主要内容，如果未能解决你的问题，请参考以下文章