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

前端必须掌握30个CSS3选择器

时间：2016-05-05 17:27:45      阅读：219      评论：0      收藏：0      [点我收藏+]

标签：

本文中将综合前端开发中常用的30个CSS3选择器，并且附带了浏览器的支持情况，希望对大家有所帮助。

1、*：通用元素选择器

 

1
2
3
4
5

* {   margin:0;   padding:0;  }


*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除默认CSS样式方法

 

*选择器也可以应用到子选择器中，例如下面的代码：

 

1
2
3
4

#container * {   border:1px solid black;  }


这样ID为container 的所有子标签元素都被选中了，并且设置了border。

 

查看演示

兼容性

  1. IE6+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

#ID：ID选择器

 

1
2
3
4
5

#container{     width:960px;     margin: auto;  }


ID选择器是CSS中效率最高的选择器，使用的时候要保证ID的唯一性。

 

查看演示

兼容性

  1. IE6+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

.class:类选择器

 

1
2
3
4

.error{    color: red;  }


类选择器效率低于ID选择器，一个页面可以有多个class，并且class可以放在不同的标签中使用。

 

查看演示

兼容性

  1. IE6+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

X Y：标签组合选择器

 

1
2
3
4

li a{    text-decoration: none;  }


标签组合选择器也是常用的选择器。

 

查看演示

兼容性

  1. IE6+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

X：标签选择器

 

1
2
3

a{ color: red; }

ul{ margin-left:0; }


如果你只是想要页面中的某个标签样式改变，可以选择使用标签选择器。

 

查看演示

兼容性

  1. IE6+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

 

1
2
3

a:link{ color: red; }

a:visted{ color: purple; }


伪类选择器，最常用的为A标签

 

查看演示

兼容性

  1. IE7+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

X + Y：毗邻元素选择器

 

1
2
3
4

ul + p{     color: red;  }


毗邻元素选择器，匹配的是所有紧随X元素之后的同级元素Y

 

查看演示

兼容性

  1. IE7+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

X > Y：子元素选择器

 

1
2
3
4

div #container > ul{    

border:1px solid black;  

}


匹配#container下的所有子元素。
关于X>Y和X Y的区别请看下面的html实例：

 

 

1
2
3
4
5
6

<div id="container">  

*   List Item
        *   Child*   List Item*   List Item*   List Item  
</div>


选择器#container > ul只会匹配到第一个UL，也就是#container的子元素UL，而不是li里面的ul，但是div ul则可以匹配到所有DIV里面的ul。

 

查看演示

兼容性

  1. IE7+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

X ~ Y：

 

1
2
3
4

ul ~ p{     color: red;  }


匹配任何在X元素之后的同级P元素。也就是选择了UL之后的同级所有的元素。

 

查看演示

兼容性

  1. IE7+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

X[title]：属性选择器

 

1
2
3
4

a[title]{     color: green;  }


匹配具有某属性的标签，例如实例中是匹配具有title属性的a标签。

 

查看演示

兼容性

  1. IE7+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

X[href=”foo”]

 

1
2
3
4

a[href="http://js8.in"]{    

color:#1f6053; /* nettuts green */

}


也属于属性选择器，匹配属性中为某个值的标签。例如实例中匹配的为href="http://js8.in"的a标签，而其他链接的a标签不选择。

 

查看演示

兼容性

  1. IE7+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

X[href*=”nettuts”]

 

1
2
3
4

a[href*="tuts"]{    

color:#1f6053; /* nettuts green */

}


属于属性选择器，匹配href中所有含有tuts的标签。正则匹配

 

查看演示

兼容性

  1. IE7+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

X[href^=”http”]

 

1
2
3
4
5

a[href^="http"]{    

background:url(path/to/external/icon.png) no-repeat;    

padding-left:10px;  

}


与上面的属相选择标签类似，但是匹配的以http开头的A标签，正则匹配

 

查看演示

兼容性

  1. IE7+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

X[href$=”.jpg”]

 

1
2
3
4

a[href$=".jpg"]{     color: red;  }


匹配属性中以.jpg结尾的标签，正则匹配，也是属性选择器的一种

 

查看演示

兼容性

  1. IE7+

  2. Firefox

  3. Chrome

  4. Safari

  5. Opera

X[data-*=”foo”]

如果你要匹配所有的图片链接，你可以通过下面的CSS来实现：

 

1
2
3
4
5
6
7

a[href$=".jpg"],  
a[href$=".jpeg"],  
a[href$=".png"],  
a[href$=".gif"]{     color: red;  }


但是如果我们给a标签添加一个data-filetype属性，我们就可以使用下面的CSS来快速的选择我们需要匹配的标签了。

1
2
3

[ Image Link ](path/to/image.jpg)  
</html>

css
a[data-filetype=”image”] {
color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12

[查看演示]

(http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/attributes6.html)

##### 兼容性1.  IE7+
2.  Firefox
3.  Chrome
4.  Safari
5.  Opera

### X[foo~="bar"]

css

a[data-info~=”external”] {

color: red;
}

a[data-info~=”image”] {
border: 1px solid black;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

匹配属性中具有多个空格分隔的值、其中一个值等于“bar”的X元素，例如下面的例子：

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/attributes7.html)

##### 兼容性1.  IE7+
2.  Firefox
3.  Chrome
4.  Safari
5.  Opera

### X:checked

css

input[type=radio]:checked {
border: 1px solid black;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

这个选择器主要用于checkbox，选择checkbox为当前选中的那个标签。

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/checked.html)

##### 兼容性1.  IE9
2.  Firefox
3.  Chrome
4.  Safari
5.  Opera

### X:after

css

 

.clearfix:after {
content: “”;
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}

.clearfix {
*display: inline-block;
_height: 1%;
}

1
2
3
4
5
6
7
8
9
10
11

`before` 和`after`是在选择的标签之前或者之后插入内容，一般用于清除浮动，

但是对于IE6、IE7是不可用的。

##### 兼容性1.  IE8+
2.  Firefox
3.  Chrome
4.  Safari
5.  Opera

### X:hover

css

div:hover {

background: #e3e3e3;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

最常用的就是A标签了，但是在IE6浏览器下除了A标签之外，其他标签`div:hover`不匹配。

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/generalcombinator.html)

##### 兼容性1.  IE6+(IE6只可以使用在A标签中)
2.  Firefox
3.  Chrome
4.  Safari
5.  Opera

### X:not(selector)

css

*:not(p) {
color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

选择除了()中选择器之外的标签元素。

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/not.html)

##### 兼容性1.  IE9
2.  Firefox
3.  Chrome
4.  Safari
5.  Opera

### X::pseudoElement

css

p::first-line {

font-weight: bold;
font-size: 1.2em;
}
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

分别用于匹配元素的第一行和第一个字母。看实例：

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/pseudoElements.html)

##### 兼容性1.  IE6+
2.  Firefox
3.  Chrome
4.  Safari
5.  Opera

### X:nth-child(n)

css

li:nth-child(3) {
color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

匹配X元素中从头数第几个标签，例如上面的代码是匹配的是第三个li标签。

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/nth.html)

##### 兼容性1.  IE9
2.  Firefox 3.5+
3.  Chrome
4.  Safari
5.  Opera

### X:nth-last-child(n)

css

li:nth-last-child(2) {
color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

与上一个选择器相反，这个选择器是倒序匹配第几个标签，上面的代码的意思是匹配倒数第二个li标签

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/nthLast.html)

##### 兼容性1.  IE9
2.  Firefox 3.5+
3.  Chrome
4.  Safari
5.  Opera

### X:nth-of-type(n)

css

ul:nth-of-type(3) {
border: 1px solid black;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

与`:nth-child()`作用类似，但是仅匹配使用同种标签的元素

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/nthOfType.html)

##### 兼容性1.  IE9
2.  Firefox 3.5+
3.  Chrome
4.  Safari
5.  Opera

### X:nth-last-of-type(n)

css

ul:nth-last-of-type(3) {
border: 1px solid black;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

与`:nth-last-child() `作用类似，但是仅匹配使用同种标签的元素

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/generalcombinator.html)

##### 兼容性1.  IE9
2.  Firefox 3.5+
3.  Chrome
4.  Safari
5.  Opera

### X:first-child

css

ul li:first-child {

border-top: none;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

匹配其父元素的第n个子元素，第一个编号为1

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/firstChild.html)

##### 兼容性1.  IE7+
2.  Firefox
3.  Chrome
4.  Safari
5.  Opera

### X:last-child

css

ul > li:last-child {
color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

匹配其父元素的倒数第n个子元素，第一个编号为1

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/firstChild.html)

##### 兼容性1.  IE9
2.  Firefox
3.  Chrome
4.  Safari
5.  Opera

### X:only-child

css

div p:only-child {
color: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

匹配父元素下仅有的一个子元素，等同于:first-child:last-child

或 :nth-child(1):nth-last-child(1)

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/onlyChild.html)

##### 兼容性1.  IE9
2.  Firefox
3.  Chrome
4.  Safari
5.  Opera

### X:only-of-type

css

li:only-of-type {
font-weight: bold;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

匹配父元素下使用同种标签的唯一一个子元素，

等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

[查看演示](http://d2o0t5hpnwv4c1.cloudfront.net/840_cssSelectors/selectors/onlyOfType.html)

##### 兼容性1.  IE92.  Firefox3.5+
3.  Chrome4.  Safari5.  Opera### X:first-of-type

css

li:only-of-type {
font-weight: bold;
}
```
匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)

查看演示

兼容性

  1. IE9

  2. Firefox 3.5+

  3. Chrome

  4. Safari

  5. Opera

原文出处：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

前端必须掌握30个CSS3选择器

标签：

原文地址：http://www.cnblogs.com/sdream/p/5462435.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！