CSS选择器总结

来源：互联网发布：mysql不能输入中文编辑：程序博客网时间：2024/05/29 08:19

最基本的选择器是元素选择器（比如div），ID选择器（比如#header）还有类选择器。一些不常见的选择器包括类选择器（:hover）,很多复杂的CSS3和正则选择器，比如：first-child，class^=‘grid-’。CSS选择器具有高效的继承性，CSS选择器效率从高到低的排序：

id选择器(#myid)、类选择器(.className)、标签选择器(div,h1)、相邻选择器(h1+p)、子选择器(ul>li)、后代选择器(li p)、通配符选择器(*)、属性选择器(a[rel=‘external’])、伪类选择器(a:hover,li:nth-child)

选择器的优先级是怎么规定的呢？

一般而言，选择器越特殊，它的优先级就越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签选择器的优先级，用10表示类选择器的优先级，用100表示ID选择器的优先级，比如.classneme span{color:red;}的选择器的优先级是10+1，也就是11；而.classname的优先级是10；浏览器自然会显示红色的字。理解这个道理之后的优先级计算自是易容反掌。

比如：

div.test .span var 优先级是 1+10 + 10 + 1，span#xxx .songs li优先级是 1+100 + 10 + 1， #xxx li优先级是10.

对于什么情况下使用什么选择器，用不同的选择器的原则是：

准确的选到要控制的标签；
使用最合理的优先级选择器；
HTML和CSS代码尽量简洁美观。通常：
- 最常用的选择器是类选择器；
- li、td、dd等常见大量连续出现，并且样式相同或者相似的标签，我们采用类选择器跟标签选择器结合的后台选择器.xx li/td/dd {} 的方式选择。
- 极少的情况下会用ID选择器，当然很多开发者喜欢header，footer，banner，content设置ID选择器的，因为相同的样式在一个页面里不可能有第二次。

在这里不得不提使用在标签内引入CSS的方式来写CSS，即：

<div style="color:red">polaris</div>

这时候的优先级是最高的。我们给它的优先级是1000，这种写法不推荐使用，特别是对新手来说。这也完全违背了内容和显示分离的思想。DIV+CSS的优点也不能再有任何体现。

怎么提升CSS选择器的性能

1、避免使用通用选择器

.content *{color:red;}

浏览器匹配文档中所有的元素后分别向上逐级匹配class为content的元素，直到文档的根节点。因此这种匹配的开销是非常大的，所以应避免使用关键选择器是统配选择器的情况。

2、避免使用标签或class选择器限制id选择器

比如：button#backBtn{……} / .menu#newmenu{…….} 不如直接id选择器好 #backBtn{……} / #newmenu{…….}

3、避免使用标签限制class选择器

4、避免使用多层标签选择器。使用class选择器替换，减少css查找

5、避免使用子选择器

6、使用继承

简洁、高效的CSS

所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找，下面列出一些常见的写CSS犯得低效错误：

1、不要在ID选择器前使用标签名

比如：div #divbox 不如 #divbox好，因为ID选择器是唯一的，加上div反而增加不必要的匹配。

2、不要在class选择器前使用标签名

比如： span.red 不如 .red 好，

3、尽量少使用层级关系

#divbox p .red{} 不如 .red{}好

4、使用class替代层级关系

必须记住的30类CSS选择器

1、 *

margin:0;

padding:0;

}

在我们看比较高级的选择器之前，应该认识下这个清空选择器。*会将页面上的每一个元素都选到。许多开发者都用它来清空 margin和padding。当然我们在联系的时候使用这个没问题，但是在生产环境中不要使用它，因为它会给浏览器平添许多不必要的东西，*也可以用来选择某元素的所有子元素。

#content *{

border：1px solid black;

}

它会选中 #content下的所有元素。

2、#X

#content{

width:960px;

marging;

}

在选择中使用#可以用id来定位某个元素。大家通常都会这么使用，然后使用的时候大家还是得相当小心。

ID选择器是很严格的并且没办法去复用它，如果可能的话，首先试试标签名字，HTML5中的新元素，或者是伪类。

3、.X

.error{

color:red;

}

这是个class选择器。它跟id选择器不同的是，它可以定位多个元素。当要对多个元素进行样式修饰的时候就可以使用class。当要对某个特定的元素进行修饰时就用id来定位它。

4、 X Y

li a {

text-decoration:none;

}

5、 X

a{ color:red;}

6、X:visited 和 X:link

a:link {color:red;}

a:visited{color:purple}

使用:link 这个伪类来定位所有还没有被访问过的链接。另外，也使用:visited来定位所有已经被访问过的链接。

7、X+Y

ul + p {

color:red;

}

这个叫相邻选择器，它指挥选中指定元素的直接后继元素。上面的那个列子就是选中了所有ul标签后面的第一段，并将它们的颜色都置为红色。

8、 X>Y

div#content > ul {

border:1px solid black;

}

x y 和 x>y的差别就是后面这个指挥选择它的直接子元素。

9、X~Y

ul ~ p{

color:red;

}

兄弟节点组合选择器跟X+Y很相似，然后它又不是那么严格。ul + p选择器只会选择紧挨跟着指定元素的哪些元素。而这个选择器，会选择跟在目标元素后面的所有匹配的元素。

10、X[title]

a[title]{

color:green;

}

这个叫属性选择器，上面的列子中，只会选择有title属性的元素。那些没有此属性的锚点标签不会被代码修饰。

11、X[href=‘foo’]

a[href=‘http://strong.cn’]{

color:red;

}

上面的代码将会把href的属性为’http://strong.cn’的锚点标签设置为红色，而其他标签则不受影响。注意：我们将值用双引号括起来了。那么在使用JavaScript的时候也要使用双引号括起来。可以的话，尽量使用标准的CSS3选择器。这样可以用了，但是还是有点死，如果不是这个链接，那么这时就得用正则表达式了。

12、X[href*=“strong”]

a[href*=“strong”]{

color:red;

}

上面的代码就指定了‘strong’这个值必须出现在锚点标签的href属性中，不管是“strong”还是“strong.cn”还是“strong.com”都会被选中。如果锚点标签指向的不是“strong”相关的站点，如果要更多具体限制的话，那就使用“^”和“$”，分别表示字符串的开始和结束。

13、X[href^=“href”]

a[href^=“http”]{

margin:0 auto;

}

大家肯定好奇过，有些站点的锚点标签旁边会有一个外链图标，我也相信大家肯定见过这种情况。这样的设置会很明确的告诉你会跳转到别的网站。用克拉符号就可以轻易做到。它通常使用在正则表达式中标识开头，如果我们想定位锚点属性href中以http开头的标签，那我们就可以用与上面相似的代码。注意我们没有搜索http://,那是没有必要的，因为它不包括https://。那如果我们想找到所有指向一张图片的锚点标签呢？那我们来使用“&”字符。

14、X[href$=“.jpg”]

使用正则表达式’$’，表示字符串的结尾处。这段代码的意思就是去搜索所有的图片链接，或者其它链接是以’.jpg’结尾的。但是记住这种写法是不会对’gif’和“png”起作用的。

15、X[data-*=“foo”]

a[data-filetype=‘img’]{

color:red;

}

我们如何把所有的图片类型都选中呢？‘jpg’、‘jpeg’、‘png’、‘gif’我们可以使用多选择器。

a[href$=".jpg"],

a[href$=".jpeg"],

a[href$=".png"],

a[href$=".gif"] {

color: red;

}

这样写就感觉很蛋疼，而且效率会很低。另外的一个方法就是使用自定义属性，我们可以给每个锚点加个属性‘data-filetype’指定这个链接指向的图片类型。

16、X[foo~=‘bar’]

a[data-info~=‘external’]{

color:red;

}

a[data-info~="image"] {

border: 1px solid black;

}

这个~符号可以定位那些某属性值为空格分隔多值的标签。

17、x：checked

input[type=radio]:checked{

border:1px solid black;

}

上面的这个伪类写法可以定位那些被选中的单选框和多选框，就是那么简单

18、X:after

before和after这俩伪类。好像每天大家都能找到使用它们的创造性方法。它们会在选中的标签周围生成一些内容。当使用‘.clear-fix’技巧时许多属性都是第一次使用到里面的。

.clearfix:after {

content: "";

display: block;

clear: both;

visibility: hidden;

font-size: 0;

height: 0;

}

.clearfix {

*display: inline-block;

_height: 1%;

}

上面这段代码会在目标标签后面补上一段空白，然后将它清除。这个方法你一定得放你的聚宝盆里面。特别是当`overflow:hidden`方法不顶用的时候，这招就特别管用了。

根据CSS3标准规定，可以使用两个冒号`::`。然后为了兼容性，浏览器也会接受一个双引号的写法。其实在这个情况下，用一个冒号还是比较明智的。

19、 X:hover

div:hover {

background: #e3e3e3;

}

20、X：not(selector)

div:not(#content){

color:blue;

}

“取反”伪类是相当有用的，假如我们要把除id为content之外的所有div标签都选中。那上面的代码就可以做到。

21、X::pseudoElement

p::first-line{

font-weight:bold;

font-size:1.2em;

}

我们可以使用::来选中某标签的部分内容，如第一段，或者第一个字母，但是记得必须使用块式标签上才起作用。定位第一个字（p::first-letter）

22、X:nth-child(n)

li:nth-child(3){

color:red;

}

nth-child接受一个整型参数，然而它不是从0开始的，如果要获取第二个元素那么传的值就是 li:nth-child(2),

li:nth-child(4n)去每隔3个元素获取一次标签。

23、X:nth-last-child(n)

li:nth-last-child(2){

color:red;

}

24、X:nth-of-type(n)

ul:nth-of-type(3){

border:1px solid black;

}

上面的代码是只有第三个ul标签会被设置边框

25、X:nth-last-of-type(n)

26、X:first-child

27、X:last-child

28、X:only-child

div p:only-child{

color:red;

}

这段代码是只有一个段落的标签的div才能被着色

上面的列子中，第二个div不会被选中，一旦第一个div有了多个子段落，那就不起作用了。

29、X:only-of-type

li:only-of-type{

color:red;

}

结构性伪类可以用的很聪明。它会定位某标签只有一个子标签的目标。设想你获取到只有一个子标签的ul标签，使用ul li会选中所有的li标签。

30、X:first-of-type

伪类可以选择指定标签的第一个兄弟标签。

<div>

<p> My paragraph here. </p>

<ul>

</ul>

<ul>

</ul>

</div>

来你把List Item 2取出来，如果你已经取出来或者是放弃了，来继续。

解决办法1

办法很多，我们看一些比较方便的。首先是`first-of-type`。

ul:first-of-type > li:nth-child(2) {

font-weight: bold;

}

找到第一个`ul`标签，然后找到直接子标签`li`，然后找到第二个子节点。

解决办法2

另一个解决办法就是邻近选择器。

p + ul li:last-child {

font-weight: bold;

}

这种情况下，找到`p`下的直接`ul`标签，然后找到它的最后一个直接子标签。

解决办法3

我们可以随便玩耍这些选择器。来看看：

ul:first-of-type li:nth-last-child(1) {

font-weight: bold;

}

先获取到页面上第一个`ul`标签，然后找到最后一个子标签。

阅读全文

0 0