首页 > 代码库 > CSS选择器、优先级和常用的选择器
CSS选择器、优先级和常用的选择器
优先级（由高到低）：
1. id选择器（#myid）
2. 类选择器（.myclassname）
3. 标签选择器（div,h1,p）
4. 相邻选择器（h1+p）
5. 子选择器（ul < li）
6. 后代选择器（li a）
7. 通配符选择器（*）
8. 属性选择器（a[rel="external"]）
9. 伪类选择器（a:hover,li:nth-child）
上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低。
上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低。
element>element 选择器
定义父元素是 <div> 元素的每个 <p> 元素的样式。
注释：如果元素不是父元素的直接子元素，则不会被选择。
<!DOCTYPE html><html><head><style>div > p {width: 100px;height: 50px;line-height: 50px;border-bottom: 1px solid #000;}</style></head><body><div> <p>1</p> <a><p>2</p></a></div></body></html>
element+element 选择器
定义div同一层级，并且为与div下面的p元素的样式。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div + p { 6 width: 100px; 7 height: 50px; 8 line-height: 50px; 9 border-bottom: 1px solid #000;10 }11 </style>12 </head>13 14 <body>15 16 <p>1</p><!-- 失败 -->17 <div></div>18 <p>2</p><!-- 成功 -->19 <p>3</p><!-- 失败 -->20 <a><p>4</p></a><!-- 失败 -->21 22 </body>23 </html>
CSS [attribute] 选择器
定义p中有class标签的样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p[class]{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head>10 11 <body>12 13 <p class="class1">1</p><!-- 失败 -->14 <p>2</p><!-- 成功 -->15 <p class="class3">3</p><!-- 失败 -->16 17 </body>18 </html>
CSS [attribute=value] 选择器
定义了p中class等于class1的元素样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p[class="class1"]{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head>10 11 <body>12 13 <p class="class1">1</p><!-- 成功 -->14 <p>2</p><!-- 失败 -->15 <p class="class3">3</p><!-- 失败 -->16 17 </body>18 </html>
CSS [attribute~=value] 选择器
定义了p中class包含class1的元素样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p[class~=class1]{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head>10 <body>11 12 <p class="class1">1</p><!-- 成功 -->13 <p class="class3">2</p><!-- 失败 -->14 <p class="class1 class3">3</p><!-- 成功-->15 16 </body>17 </html>
CSS [attribute|=value] 选择器
定义了p中class以cla1开头（cla11不是，但cla1-1就是） 的元素样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p[class|=cla1]{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head>10 <body>11 12 <p class="cla1">1</p><!-- 成功 -->13 <p class="cla11">2</p><!-- 失败 -->14 <p class="cla1-1">3</p><!-- 成功 -->15 16 </body>17 </html>
CSS3 element1~element2 选择器
定义div同一层级，并且在div下面的所有p元素的样式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div~p{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head>10 <body>11 <div></div>12 <p>1</p><!-- 成功 -->13 <a><p>2</p></a><!-- 失败 -->14 <p>3</p><!-- 成功 -->15 </body>16 </html>
CSS3 [attribute^=value] 选择器
定义p中class已cla1开头的元素样式（与CSS [attribute|=value] 不同）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p[class^="cla1"]{ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head>10 <body>11 <p class="cla1">1</p><!-- 成功 -->12 <p class="cla11">2</p><!-- 成功 -->13 <p class="cla1-1">3</p><!-- 成功 -->14 <p class="cla21">4</p><!-- 失败 -->15 </body>16 </html>
CSS3 [attribute$=value] 选择器
定义和CSS3 [attribute^=value] 一样，只不过是定义的结尾的元素
CSS3 [attribute*=value] 选择器
定义和CSS3 [attribute^=value] 一样，只不过是定义的包含value的元素
CSS3 :nth-child() 选择器
定义html中第2个p元素的样式。
odd【p:nth-child(odd)】奇数行 和 even【p:nth-child(even)】偶数行 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p:nth-child(2){ 6 border-bottom: 1px solid #000; 7 } 8 </style> 9 </head>10 <body>11 <p>1</p><!-- 失败 -->12 <p>2</p><!-- 成功 -->13 <p>3</p><!-- 失败 -->14 <p>4</p><!-- 失败 -->15 </body>16 </html>
CSS3 :nth-last-child() 选择器
同上，只不过跟最后一个开始选择。
CSS :first-child 选择器
第一个元素的样式
CSS :last-child 选择器
最后一个元素的样式
CSS3 :root 选择器
选择文档的根元素。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 :root{ 6 background-color: #000; 7 } 8 </style> 9 </head>10 <body>11 </body>12 </html>
CSS3 :disabled 选择器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 input[type="text"]:disabled 6 { 7 background-color: #dddddd; 8 } 9 </style>10 </head>11 <body>12 <input type="text" value="1" disabled /><!-- 成功 -->13 <input value="2" disabled /><!-- 成功 -->14 <input type="text" value="3" /><!-- 失败 -->15 <input type="text" value="4" /><!-- 失败 -->16 <input type="password" value="5" /><!-- 失败 -->17 </body>18 </html>
CSS3 :not 选择器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 p { 6 color:#000000; 7 } 8 :not(p) 9 {10 color:#ff0000;11 }12 </style>13 </head>14 <body>15 <h1>1</h1><!-- 成功 -->16 <p>2</p><!-- 失败 -->17 <p>3</p><!-- 失败 -->18 <div>4</div><!-- 成功 -->19 </body>20 </html>
CSS选择器、优先级和常用的选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。