CSS选择器详解
目录
一、CSS选择器？
| 选择器 | 例子 | 描述 |
| #id | #firstname | ID选择器，选取Id=firstname的元素 |
| .class | .myclass | 类选择器，选取class=myclass的所有元素 |
| element | p | 标签选择器，选取所有<p>元素 |
| 选择器 | 例子 | 描述 |
| :link | a:link | 匹配所有未被点击的链接，通常用于<a>元素。 |
| :visited | a:visited | 匹配所有已被访问的链接。 |
| :hover | a:hover |
选择鼠标指针位于其上的链接。 提示: :hover 选择器器可用于所有元素，不仅是链接。 |
| :active | a:active |
匹配被用户激活的链接--用户按下按键未松开时的状态。 为了产生预期的效果，以上四个选择器必须得按照先后顺序排列 :link — :visited — :hover — :active。 |
| :first-child | p:first-child | 选择每个p元素是其父级的第一个子级（也就是说，只有p元素是第一个子元素时，才会应用样式； 而不是选择每个p元素的第一个子元素。） |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） |
| :enabled | input:enabled | 选择每一个已启用的输入元素 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 |
| :checked | input:checked | 选择每个选中的输入元素 |
| 选择器 | 例子 | 描述 |
| element,element | div,p | 选择所有<div>元素和<p>元素 |
| element element | div p | 选择<div>元素内的所有<p>元素 (所有子孙元素) |
| element>element | div>p | 选择所有父级是 <div> 元素的 <p> 元素 |
| element+element | div+p | 选择所有紧接着<div>元素之后的<p>元素 |
| 选择器 | 例子 | 描述 |
| [attribute] | [target] | 选择所有带有target属性元素 |
| [attribute=value] | [target=_blank] | 选择所有使用target="_blank"的元素 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 |
| [attribute*=value] | [title*=flower] | 选择标题属性包含字符串"flower"的所有元素 |
| [attribute^=value] | [title^=flower] | 选择标题属性以“flower”开头的所有元素 |
| [attribute$=value] | [title$=flower] | 选择标题属性以“flower”结尾的所有元素 |
| 选择器 | 例子 | 属性 |
| :after | p:after{content:"hello";} | 在每个<p>标签内的最后插入内容“hello” ，通常搭配content来使用 |
| :before | p:before{content:"hello";} | 在每个<p>标签内的最前插入内容“hello” |
| :first-letter | p:first-letter | 选择每一个<p>元素的第一个字母 |
| :first-line | p:first-line | 选择每一个<P>元素的第一行 |
二、CSS层叠
1、一个元素的样式，可以通过多种方式定义：1）浏览器默认样式 2）用户自定义的样式 3）开发者定义的样式
2、上述上中方式之间的优先级：开发者定义样式 > 用户自定义样式 > 浏览器默认样式
3、而开发者定义的样式又分为三种情况：
1）定义为单独的CSS文件 ：开发中多为这种形式，易维护、扩展
2)定义在html页面中的<style></style>标签内 ： 这种适用于当前页面独立，样式较少的情况
3）直接写在元素上的style属性内 ：建议仅测试适用，可维护行较差。
Q：如果涉及到相同权重值（见下方第四点）的CSS样式时，到底用哪个呢？
A：一句话总结：“就近原则”，先离的近，用谁。所以三者优先级顺序： 3> 2 >1
三、CSS继承
CSS继承是一种规则，它允许某些样式不仅应用于元素本身，还可以应用于其后代。
比如：color就可以被继承 。下面这段代码，<p>标签连同子级<span>标签的文字都会变为红色。
p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
而border就不能够被继承。下面这段代码，只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。
p{border:1px solid red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
四、样式优先级机制
如果一个标签上应用了不同样式代码，就会涉及到一个优先级（权重值）的问题，到底最后哪些效果才能生效？
| 选择器 | 权重值 |
| id选择器 | 100 |
| 类选择器 | 10 |
| 伪类选择器 | 10 |
| 属性选择器 | 10 |
| 标签选择器 | 1 |
| 伪对象选择器 | 1 |
| 继承 | 0.1 |
| 通配符（*） | 0 |
如果是多种选择器一起使用，则需要把各个选择器的权重加起来，才表示最终的权值。例如：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
