一、选择器的种类
- 元素选择器 ：
p{},div{}; - 类选择器：
.header{}
HTML：
<div class="header">Css选择器<div>
CSS:
.header{ color: red;}
- ID选择器：
#header{}
HTML：
<div id="header">Css选择器<div>
CSS:
#header{ color: red;}
结果：Css选择器也是红色的。
- 通配符选择器：
*{}匹配所有的标签。
通配符选择器 - 后代选择器：
div p{}只要p标签的祖先是div标签，p标签的内容就会显示。例如：
后代选择器 - 子代选择器：
div>p{}。当p标签的父亲是div标签的时候，p标签的内容才会显示。例如：
子代选择器 - 同胞选择器：
- 相邻同胞选择器：
A+B{},A和B有相同的父节点，并且B是A紧跟的下一个节点。 - 一般同胞选择器：
A~B {}，AB有相同的父节点，B在A之后，但不一定是紧挨着A。
- 属性选择器：
- [attr] 该选择器选择包含 attr 属性的所有元素。
- [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
- [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素。
- [attr|=val] : 选择attr属性的值以val（包括val）或val-开头的元素。（“-”连字符，表示用来处理语言编码）
- [attr^=val] : 选择attr属性的值以val开头（包括val）的元素
- [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
- [attr*=val] : 选择attr属性的值中包含字符串val的元素。
代码与效果
参考：属性选择器
二、选择器优先级
- 选择器越精确，优先级越高。
- 优先级同等的情况下：后面的优先级会高于前面的。
- 标注有
！important的优先级最高。 - 选择器的权重（权重越高，优先级越高）
内联样式，加1,0,0,0.
ID选择器的特殊性值，加0,1,0,0。
类选择器、属性选择器或伪类，加0,0,1,0。
元素和伪元素，加0,0,0,1。
通配选择器*对特殊性没有贡献，即0,0,0,0。
计算公式：value=a*1000+b*100+c*10+d*1
例如：
h1.title{color:blue} /* specificity = 0,0,1,1 */
.title{color:red;} /* specificity = 0,0,1,0 */
<h1 class="title">hello world</h1>/*结果是蓝色的*/
3.其他的问题：
-
first-child和first-of-type的作用和区别
HTML:
<div>
<span>This span is limed!</span>
<span>This span is not. </span>
<span>This span is <em>red!</em></span>
<strike>This is another type</strike>
</div>```
如果css的代码：
- `span:first-child{ color: lime;}`或`span:first-of-type {color: lime;}`则这时候显示的结果：`this span is limed！` 是黄绿色（lime的颜色）。
- `span :first-child{ color: lime;}`或`span :first-of-type {color: lime;}`则`red！`是黄绿色。
- `div:first-child{ color: lime;}`或`div:first-of-type {color: lime;}`则全部为黄绿色。
`first-child`和`first-of-type`的区别：
- `div :first-child{ color: lime;}`则`This span is limed!`和`red！`是黄绿色。
- `div :first-of-type { color: lime;}`则`This span is limed!、red！`和`This is another type`是黄绿色。
* 运行如下代码，解析下输出样式的原因
原因如下：
`<p class="item1">aaa</p>`是父元素div下的第一个子元素，伪类生效，所以aaa变成了红色。
`<p class="item1">aaa</p>`和`<h3 class="item1">bb</h3>`是其父元素div下的类型元素的第一个，aaa和bb的背景都变成了蓝色了。
* `text-align:center`的作用是什么，作用在什么元素上？能让什么元素水平居中？
`text-align:center`作用是行内元素相对于父元素水平居中。作用在块级元素上。
居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右`margin`设为`auto`。