web前段选择器

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]](