CSS选择器

派生选择器

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