关于CSS选择器的总结

类属性

类属性是HTML中的class属性,类的目的是标识一组具有相同特征的元素，为了让不同标签名的元素应用相同的样式

1.类选择符

.类名  （两者之间没有空格）

2.标签带类选择符

如果只想选中带有某个类的元素，可以在类选择符前面加上标签

3.多类选择符

.类名.类名 （注意中间没有空格）

用来选择同时拥有这两个类的元素

id属性

id是可以在页面中唯一的标识一个元素，即id在每个页面中只能使用一次，可排除无关标签,是HTML中的id属性

#id名

上下文选择符 空格

以某个祖先标签为上下文，无论该标签与祖先标签隔着多少层，都可以选中

特殊上下文选择符

1.子选择符 >

标签1 > 标签2 （标签1是标签2的父元素）

2.紧邻同胞选择符 +

标签1 +标签2 （标签2必须在标签1后面，且为同级关系）

3.一般同胞选择符 ~

标签1 ~ 标签2 （标签2在标签1后面，但不一定是紧跟，中间可以有其他标签）

4.通用选择符 *

匹配该页面所有的元素

属性选择符

1.属性名选择符

标签名[属性名]  （选择任何带有属性名的标签）

只要有这个属性就会被选中，跟属性值无关

2.属性值选择符

标签名[属性名="属性值"]   （选择任何带有值为属性值的属性名的标签名）

伪类

伪类分为两种：

1.UI伪类：会在HTML元素处于某个状态时（比如鼠标指针位于链接上时），为该元素应用css样式 

- 链接伪类：针对链接伪类的一共有四个

Link  此时，链接就在那儿等着用户点击。

Visited  用户此前点击过这个链接。

Hover  鼠标指针正悬停在链接上。

Active  链接正在被点击（鼠标在元素上按下，还没有释放）。

例如：

a:link {color:black;}

a:visited {color:gray;}

a:hover {text-decoration:none;}   (注意：可以用于任何元素)

a:active {color:red;}

:focus伪类

表单中的文本字段在用户点击时获得焦点

input:focus {border:1px solid blue;}

:target伪类

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target）

#more_info:target {background:#eee;}

2.结构化伪类

:first-child 和:last-child

:first-child 代表一组同胞元素中的第一个元素，而:last-child 则代表最后一个

:nth-child(n)

li:nth-child(3) (选择一组列表中的每个第三项)

:nth-child 伪类最常用于提高表格的可读性

伪元素

文档中若有实无的元素

1.::first-letter 伪元素:可以改变第一个字母的效果

2.::first-line 伪元素:可以改变第一行的效果

3.::before 和::after 伪元素：可用于在特定元素前面或后面添加特殊内容 

例如：

p.age::before {content:"Age: ";}

p.age::after {content:" years.";}

结合

<p class="age">25</p>

可得到效果：

Age: 25 years.

css选择器优先级

多重样式情况： 

行内>内联>外联

优先级顺序： 

内联样式> ID选择器 > 伪类> 属性选择器 > 类选择器 > 元素选择器 > 通用选择器

css优先级是根据权重算出来的。