css选择器详解

css选择器包括以下

id选择器
类选择器
通配符选择器
元素选择器
子类选择器
后代选择器
相邻选择器
同辈选择器
伪类选择器
属性选择器

css选择器解析规则

css解析的规则是从右向左的
#box ul li a {
color: #ccc;
}
先是找到页面中的所有a标签，在找到所有在li下的a标签，再找到所有在ul下的li下的a标签，依次向上。
所以可以想到当选择器越长时，消耗的时间也就越长，一般都不超过三个，这里可以给ul一个list类，
.list li a { }就会好很多。

id选择器

id选择器很简单，但是尽量避免使用，理由如下

id选择器的样式无法被重用
id选择器的优先级较高，如果之后要对该样式进行覆盖，就需要更高的优先级，会变得很复杂
单个id选择器（#box { }）会被单个类选择器快一点（微乎其微），但是结合子类选择器（#box span { }）就不如类选择器

这里也不推荐在css中使用！important来提升css的优先级，虽然它对性能并没有什么影响，但是从可维护的角度去看，应该避免，如果出现了，那么应该去反思自己css的设计。

id选择器有一个好处是方便js获取该dom元素，所以我推荐的是当需要获取该dom元素时，就赋予id，否则就赋予class类。

类选择器

类选择器也很简单，它的作用就是为了让样式相同的元素共用同一个css类，达到样式复用的目的，所以，在写样式的时候，一般先分析页面中哪些元素的样式基本相同，可以给它们一个共同的类，而且修改起来也方便，不同的样式可以分别给它们一个单独的类。
比如：

<a class="icon weixin" herf="#"></a>
<a class="icon weibo" herf="#"></a>
<a class="icon twiter" herf="#"></a>

关于类选择器没有什么东西可以说了，就是从复用的角度去指定class，而class名最好是有意义的单词，而且连接词一般用‘-’，比如 class=”icon-weibo”。

通配符选择器

* {
//这种写法十分不推荐，对性能不好
}

元素选择器

元素选择器没有什么好说的，一般都是选取某个元素下的a标签、span标签等等之类的。

子类选择器

子类选择器是获取子节点，并不会获取所有的节点
比如

<div class="box">
    <div class="picture">
        <img src="" />
    </div>
    <div class="description">
        <div>images</div>
    </div>
</div>

#box > div {
//box的div子节点只有.picture和.description所以只对这两个元素有效
}

后代选择器

后代选择器不同与子类选择器，它是选取该元素下所有的dom节点
比如

<div class="box">
    <div class="picture">
        <img src="" />
    </div>
    <div class="description">
        <div class="title">images</div>
    </div>
</div>

#box div {
//box下的div节点除了有.picture和.description
//还有.title
}

相邻选择器

该选择器是选取该元素的后一个同辈元素

<p>hello world</p>
<a>it's wonderful</a>
<a>it's too bad</a>

p + a {
 //该样式只有当p标签后的第一个元素为a标签时才有效，
}

同辈选择器

同辈选择器是将样式应用于该元素后的所有同辈元素

<p>hello world</p>
<a>link to anywhere</a>
<a>link to #</a>
<span>it's description</span>

p ~ a {
 //对p标签后的所有a标签应用该样式
}

属性选择器

每个html标签最终都是会被解析成一个dom数上的节点，它是一个对象，并且支持一些全局属性和自定义属性。
属性选择器就可以根据这些属性的有无以及属性值是否符合要求来应用css样式。

“`
a[title] {
//获取具有title属性的a标签
}

a[href=”https:www.google.com”] {
//获取所有连接到google首页的a标签
}

选择器	说明
[attr]	匹配具有指定属性的元素
[attr=value]	匹配具有指定属性的值等于value的元素
[attr~=value]	匹配具有指定属性的值包括value的元素
[attr\|=value]	匹配具有指定属性的值以value开头，并且value为整个单词
[attr^=value]	匹配具有指定属性的值以value开头
[attr$=value]	匹配具有指定属性的值以value结尾
[attr*=value]	匹配具有指定属性的值包含value当中的所有值

伪类选择器

该篇幅较大，另起一篇

秒客网