分类 CSS权威指南下的文章

每个规则有两个基本部分:
选择器{
属性:值
}

选择器可以是元素选择器(p span等)

选择器分组

选择器可以多选:
如
h2,p{

}
表示h2,p标签都应用如下规则

通配选择器

此类选择器可与任何元素匹配类似通配符一样
*{
color:red
}

类选择器&ID选择器

.className{

}

#idName{

}

同时选择器

当把两个类名连在一起则可以实现仅对两个类同时使用时生效假设：
.a.b{
color:red
}
<div class="a b"></div>

属性选择器

可以指定一个标签的下属属性比如:

h1[class]{
    color:red
}
<h1 class="a">df</h1>
<h1 class="b">ff</h1>
<h1 class="c">gg</h1>

还可以这样用

h1[moon]{
    color:red
}
<h1 moon="1">d</h1>
<h1 moon="2">f</h1>

img[alt]{
    color:red
}
<img alt="x"/>

如果想把所有带有title属性的都生效规则则:
*[title]{

color:red

}
还可以:
atitle{

color:red

}
仅当title和href同时出现时

根据具体属性值

如:
a[href="http://www.baidu.com"]
{
color:red
}

带有部分属性值选择

a[class~="warning"]{
color:red
}
//生效

还有:
class^="warning" warning开头
class$="warning" warning结尾
class*="warning" 包含warning子串

特定属性选择

img[src|="figure"] //src属性中 figure 以及figure-开头的

特殊性

如果一个元素有两个或多个冲突的属性声明则最高特殊性的声明就会胜出

内联样式特殊性+1000
对于选择器中给定的各个ID属性值:加100
对于选择器中给定的各个类的属性值、属性选择或伪类加10
对于选择器中给定的各个元素和伪元素加1
有些特别重要的属性我们可以增加!important来提高层级

通配选择不加任何特殊性

继承

当前元素会继承父元素的属性

有一些属性是不能继承的例如:border 继承值没有特殊性通配符往往会继承。
如果特殊性相同则会按以下进行排序:

按权重和来源排序(importan 创造人员的正常生命读者的正常生命用户代理的声明)
按特殊性排序
按顺序排序