【暑期HTML】常用的选择器

类型选择器

又称元素选择器或简单选择器寻找特定类型的元素，只需指定希望引用样式的元素的名称。
p {color:black;}
h1 {font-size:18px:}

后代选择器

用来寻找特定元素或元素组的后代。后代选择器有其他两个选择器之间的空格表示。
blockquote p{font-size:18px;}
上例中，只有<p>标签中的文字为18px，blockquote中其他元素的属性不受影响。

---

还有两种应用更为广泛的选择器

ID选择器

顾名思义，用于寻找那些具有指定ID的元素。ID选择器由一个#字符表示。

类选择器

用于寻找具有指定类名的一类元素。类选择器用一个.字符表示。

伪类选择器

:link和:visited称为链接伪类，只能应用于锚元素。:hover、:active、:focus称为动态伪类，理论上可以应用任何元素。
PS：通过把伪类连接在一起，可以创建更复杂的行为，比如在已访问连接和未访问连接上实现不同的鼠标悬停效果。

通用选择器

通用选择器的作用就像是通配符，它匹配所用元素。由一个*表示，通用选择器一般用来对页面上所有元素应用样式。

高级选择器

子选择器

一般用 >符号来表示。
子选择器只选择元素的直接后代，即子元素
Ps:后代选择器选择一个元素的所有后代。
Bug:IE7中，若目标元素之间有注释，会出问题。

相邻同胞选择器

一般用+来表示。
用于定位同一个父元素下某个元素之后的元素。
例如，h2+p{}或者h2+p+p{}

属性选择器

盲选

如果希望选择具有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
例如：*[title]{ color:red;}
选择所有具有title属性的元素
a[href]{color:red;}
选择具有href的a标签
a[href][title]{color:red;}
选择具有href``title属性的a标签

根据具体属性选择

根据具体属性进行缩小选择范围，只选择具有特定属性值的元素。
重点：属性与属性值必须完全匹配
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

根据部分属性值选择

根据属性值中的词列表进行选择，则需要使用波浪号~
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~="important"] {color: red;}

---

最后，关于优先级，
如果遇到了似乎没有起作用的CSS规则，很可能是出现了特殊性冲突。请在你的选择器中添加它的一个父元素的ID，从而提高他的特殊性
尽量保证：一般性样式非常一般，特殊样式尽可能特殊。