派生选择器
1.依据元素的上下文关系定义样式
p span {
font-size: 16px;
}
2.p标签下的span标签添加样式，无需在span标签里面增加id或者class，方便，这种样式比起自身添加样式的级别更高，覆盖自身样式
id选择器
1.HTML 添加 id,id是唯一的，css中的选择器以‘#’进行定义：
#check { color: red; }
2.注意，id选择器通常用于构建派生选择器：
#check span { color: blue; }
3.只有id为check的元素下的span标签有该样式。
4.id只有一个，但是样式可以使用多次
5.兼容老版本Windows/IE问题
该版本下，可能会忽略 padding： 10px
div#check {
border: 1px dotted #000;
padding: 10px;
}
类选择器
1.样式中频繁使用到，以'.’来显示
.red{ color: red; }
2.相同元素可设定相同的类，并遵守相同的样式规则
<span class="red"></span>
<span class="red"></span>
<!-- 两个span标签会颜色为红色 -->
3.与id选择器一样，也经常使用到派生选择器
p .red { color: red; }
属性选择器
1.对指定元素的HTML元素设定样式，用[属性名]来表示
[src] { color: blue; }
<!-- 带有属性src的元素颜色为蓝色 -->
2.属性和值选择器，[属性=值]
[src="./img/title.png"] { color: red: }
3.属性和多值选择器, [属性~=值]
[src="./img"] { color: red; }
4.参考表
- | 选择器 | 描述 |
- | [attribute] | 用于选取带有指定属性的元素。 |
- | [attribute=value] | 用于选取带有指定属性和值的元素。 |
- | [[attribute~=value]](http://www.w3school.com.cn/cssref/selector_attribute_value_contain.asp "CSS
- [attribute~=value] 选择器") | 用于选取属性值中包含指定词汇的元素。 |
- | [[attribute|=value]](http://www.w3school.com.cn/cssref/selector_attribute_value_start.asp "CSS
- [attribute|=value] 选择器") | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
- | [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
- | [[attribute
=value] 选择器") | 匹配属性值以指定值结尾的每个元素。 |
- | [attribute=value*] | 匹配属性值中包含指定值的每个元素。 |
后代选择器
1.选择作为某原色后代的元素
h1 em { color: red; }
2.选择的是所有后代
子元素选择器
与后代选择器不同，只能选择作为某元素子元素的元素
h1 > strong { color: red; }
相邻兄弟选择器
可选择紧接在另一个元素后的元素，且二者有共同父元素
h1 + p { margin-top: 50px; }
伪类选择器
1.向某些选择器添加特殊的效果
selector: pseudo-class { property: value }
2.锚伪类
a:link { color: green } /* 未访问的链接 */
a:visited { color: green } /* 已访问的链接 */
a:hover { color: green } /* 鼠标移到链接上， 位于link，visited后才有效 */
a:active { color: green } /* 选定的链接，位于link后有效 */
3.伪类表
CSS 伪类.png
4.伪元素
CSS 伪元素.png
