CSS的选择器

选择器的功能：

​ 选中要添加样式的标签元素。
​ 什么是标签选择器？
​ 通过标签名直接选择相应的标签。
​ 不管有多复杂的嵌套关系，标签的位置就算藏得很深，依然可以被标签选择器命中。
​ 格式：
标签名{
​ 声明;
​ }
​ 标签选择器的作用：
​ 1.利用标签选中所有的特性，进行默认样式的清除。
​ 2.复杂选择器中一部分使用。

ID选择器

ID选择器作用：
​ 选中页面中唯一的一个标签。
​ 格式：
#ID值{
​ 声明;
​ }
​ 【注】：
​ 1.id值必须是唯一的，在一个页面中只能出现一次。如果多次出现重复的ID值是不符合规范的。

​ 2.所有的标签都有ID属性。ID命名的规范：由字母，下划线，中划线，数字组成。不能以数字开头。

​ 3.见名知意。不要起毫无意思的名字。

​ 4.驼峰写法：SearchButton(大驼峰) searchButton(小驼峰，推荐) 多个单词，从第二个单词开始，每个单词的首字母大写。

​ 5.下划线写法：search_button 多个单词，从第二个单词开始，每个单词的前面添加一条下划线。

​ 【注】：id选择器尽量不要在css中使用，而是配合js使用。

类选择器：

什么是类选择器：是以文档语言对象类型作为选择符。
​ 通过标签中的class属性来选择标签
​ 格式：
​ .class值{
​ 声明;
​ }
​ 优点：可以选择一部分标签，设置相同的样式。
​ 【注】
​ 1.class值可以不唯一。类选择器选中的是拥有相同class值得标签元素。
​ 2.一个标签可以拥有多个class值。
​ 3.命名规则与ID相同。
​ 类写样式，ID写行为。

通配符

​ :表示选中所有标签。（包含body标签。）
​ 慎用。
​ 使用场景：
​ 清除默认的样式。
一刀切，所有的标签都会去执行一次css代码。
通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性 能考虑，需酌情使用 。
IE6及更早浏览器并不支持通配选择符()，而是将它忽略了，所以也变相的能看到效果。

后代选择器

通过标签的嵌套关系，来缩小选择范围，在范围内查找相关的元素。
格式：
选择器1 选择器2{
​ 声明;
}
选择器1必须是选择器2的祖先元素。
IE7开始兼容，IE6不兼容。
【注】
1.定义时，选择器之间使用空格隔开。空格左侧必须是右侧的祖先元素。
2.当要把某些元素中的某些元素进行样式修改时，就要想要使用后代选择器。

子代选择器

通过标签间的嵌套关系，来选中相应标签的子元素。与 包含选择符选择器1与选择器2 不同的是，子选择符只能命中子元素，而不能命中孙辈。
格式：
选择器1>选择器2{
​ 声明;
}
【注】>左右两边的关系必须是父子关系。

序选择器*

E:first-child选择符：
匹配父元素的第一个子元素选择器E。

• 要使该属性生效，E必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。
  E:first-child选择符：

• E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。

  E:only-child选择符：

• 要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。

交集选择器

既满足条件1，又满足条件2.
格式：
选择器1选择2{
​ 声明;
}
【注】
1.交集选择器如果是标签选择器与类选择器的混写，则必须将标签选择器放在前面。
2.连续交集 既满足条件1，又满足条件2，还满足条件3.

并集选择器

​ 格式：
选择器1，选择器2{
​ 声明;
​ }
​ 选择器之间使用逗号进行分割。
​ 可以避免代码冗余

相邻选择器

格式：
选择器1+选择器2{
​ 声明;
}

选择紧贴在选择器1元素之后的选择器2元素，两者必须同属于一个父级。
与 兄弟选择符相同的是，相邻选择符也是选择同级的选择器2；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素
【注】IE7兼容，IE6不兼容。

兄弟选择器

​ 选择器1与选择器2必须同属于一个父级。
需要注意的是，选择的只是同级的选择器2，后代中的元素不会被选择。
​ 语法格式：
​ 选择器1 ~ 选择器2{
​ 声明;
​ }
​ 选中的是选择器1元素之后的所有同级的选择器2元素。

nth-child选择器

说明：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
语法格式：
​ n表示父元素下的第几个子元素。
E：nth-child（n）{
​ 声明;
}
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中所有的偶数子元素E，那么选择符可以写成：E:nth-child(2n)

nth-of-type选择器

说明：匹配父元素下第一个类型为E的子元素。
格式：
​ E：nth-of-type(n){
​ 声明;
​ }
​ 选中父元素下的同类型中的第n个元素
需要注意3个要点：

首先，该选择符要匹配的是类型为E的子元素，这意味着E元素必须作为某个元素的子元素存在（E元素的父元素最高是html，也就是说E元素本身最高只能是body，这表示任何非html的元素都符合这个约束，因为html元素是根元素。）
其次，该选择符要匹配的是父元素第一个类型为E的子元素，这意味着被命中的元素不一定是父元素的第一个子元素（因为排在父元素首位的不一定是E元素，E元素可能在子元素列表中的任何位置）。
再次，只能匹配与E元素同级的元素，即：E元素的兄弟元素
​ 【注】
​ 1.要使该属性生效，E必须是某个元素的子元素，E的父元素最高可以是html。
​ 2.该选择器命中的是父元素中的第n个为E的子元素，不管第n个子元素是否为E.

伪类

同一个标签，根据不同的状态，拥有不同的样式，这就叫做“伪类”。伪类使用：（冒号）来表示。
格式：
选择器：伪类名{
​ 声明;
}
伪类选择器大致可分为两种：
（1）静态伪类 只能用于超链接的样式。
：link 超链接点击之前
：visited 超链接被访问过之后。
（2）动态伪类 针对所有的标签都适用
：hover “悬停” 鼠标放在标签上时。
：active “激活” 鼠标点击标签，不松手时。
(3)特殊 针对表单元素。
：focus 是某个标签获得焦点时的样式。
对于a标签有4种伪类，对应四种状态
：link 点击之前
：visited 访问之后
：hover 鼠标悬停
：active 激活 鼠标点击时。
link visited hover active lvha (爱恨准则) lv = love ha = hate
a:link,a:visisted 一般都是可以省略的，简写在a标签中。一般只需要写a{ }，a:hover{ }
设置超链接a在未被访问前的样式。
如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
超链接的4种状态，需要有特定的书写顺序才能生效。
超链接状态顺序：
a:link {}
a:visited {}
a:hover {}
a:active {}
注意：a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括。

点击下方链接练习：
https://flukeout.github.io/