《CSS权威指南》——笔记2（选择器）

第二章：选择器

css主要优点之一：很容易地向所有同类型的元素应用一种样式。

元素选择器：文档的元素是最基本的选择器  html { color: black; }

通配选择器：对所有元素进行匹配，添加样式   *{ padding:0; }

结合选择器：h1, h2, h3, h4, h5, h6 { color: red; }

类选择器：基本格式 .box { width: 100px; height: 200px; }  可以忽略通配选择器。

                  不同元素中同一个class有不同的样式： p.info { color: blue; }  span.info { color: red; }

                   多类选择器：

<p class="a b">11111</p>
<p class="a">2222</p>
<p class="b">3333</p> 

.a { color: red; }
.b { color: blue; }
.a.b { color: green; } 

最终11111的颜色为绿色。但是这个规则会导致其他含有a b两个class的元素的样式的改变。

ID选择器：与类选择器类似，也可以忽略通配选择器。一个ID只能出现一次。

属性选择器： img[alt] { border: 1px; }

对于这个属性选择器，我通常用来区分表单的input元素 ，如input[type="text"]   input[type="number].

也可以根据多个属性进行选择。

根据具体属性值选择：为了进一步缩小选择范围，可以通过加上某一个属性的值。  img[ src="../img/icon.png"]

(注意：这种格式要求必须与属性值完全匹配，若有多个属性值，必须全部将属性值写上去。)

根据部分属性值选择：如选择class属性包含a的p元素   p[class~="a"] {}