码迷,mamicode.com
首页 > Web开发 > 详细

CSS选择器、优先级和常用的选择器

时间:2014-08-25 20:56:44      阅读:302      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   strong   ar   div   html   log   line   

优先级(由高到低):
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选择器的效率是最高,而伪类选择器的效率则是最低。
 
 
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选择器、优先级和常用的选择器

标签:style   blog   color   strong   ar   div   html   log   line   

原文地址:http://www.cnblogs.com/johnnylion/p/3935700.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!