2.1 基本选择器

2.1.1 标签选择器

直接使用元素标签进行选择

p{color:red;} 权重1

2.1.2 类选择器

通过元素的类名，来选择元素，一个元素可以有多个类名，都代表这个元素类名是元素class属性中的属性值，例如

.sum{} => 此选择器的权重为10

2.1.3 id选择器

通过元素的id名，来选择元素，类名是元素id属性中的属性值，例如

sum{} => 此选择器的权重为100

2.1.4 通配符选择器

通过选择全部元素，包括根元素 {} => 权重小于1，可以被覆盖

2.2 并集选择器

你可以对选择器进行分组，这样，被分组的选择器就可以分享想相同的声明。用逗号被需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6{
    color:green;
}

2.3 交集选择器

两种属性同属一个元素的时候，我们可以使用交集选择器来进行元素的准确选择

<p class='name1 name2' id='id1'></p>
p.name1{}
p#id1{}
.name1.name2{}

2.4 派生(后代)选择器

• 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁，用空格隔开列表中的strong元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器
• 后台选择器尽量不要超过3个，没有必要把每一个层级都写出来，只需要写出关键节点极客

li strong{
    font-style:italic;
  font-weight:normal;
}
<ol>
    <li>
      <strong>我是斜体字。这个因为strong元素位于li元素内。</stong>
  </li>
</ol>

2.5 子代选择器

与后代选择器相比，子元素选择器只有选择作为某元素子元素，符号为大括号

h1 > strong {color:red;}
<h1>This is<strong>very</strong> important.</h1>

2.6 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素

h1+p{
    margin-top:50px;
}

2.7 属性选择器

对带有指定属性的html元素设置样式 权重10

可以为拥有指定html元素设置样式，而不仅限于class和id属性

下面的例子为title属性的所有元素设置样式

[title]{color:red;}

属性和值选择器
下面的例子为title=’wjw’的所有元素设置样式

[title=wjw]{color:red;}

设置表单的样式

input[type='text']{width:150px;display:block;background:yellow}

2.8 伪装选择器

• a:link{color:#ff000} // 未访问的链接
• a:visited{color::#ff000} // 已访问的链接
• a:hover{color:#ff000} // 鼠标移动到链接上
• a:active{color:#ff000} //选定的链接

  10<权重<11