（05）2020-12-07（选择器）

选择器

一、四种基本元素选择器
- 1，标签选择器
- 2，ID选择器
- 3，类选择器（class选择器）
- 3，通配选择符（*）
二、四种关系选择器
- 1，后代选择器（空格）
- 2，子代选择器（>)
- 3，相邻选择器(+)
- 4，兄弟选择器(~)
三、交集和并集选择器
- 1，交集选择器（选择器之间没有任何符号）
- 2，并集选择器（选择器之间用，隔开）
四、伪类选择器
- 1，序选择器
- - E:first-child{}
  - E:last-child{}
  - E:only-child{}
- 2，nth-child（n）选择器
- 3，nth-of-type（n）选择器
- - （1） E:first-of-type{}
  - （2）E:last-of-type {}
  - （3）E:only-of-type {}
  - （4）E:nth-of-type（n） {}
- 4，伪类选择器（超链接应用）

一、四种基本元素选择器

1，标签选择器

选择器的功能：
选中要添加样式的标签元素。
什么是标签选择器？
通过标签名直接选择相应的标签。
不管有多复杂的嵌套关系，标签的位置就算藏得很深，依然可以被标签选择器命中。
格式：
标签名{
声明;
}

       div{color: red;}p{background-color: sandybrown;}a{text-decoration: none;}li{list-style: none;}

标签选择器的作用：
1.利用标签选中所有的特性，进行默认样式的清除。
2.复杂选择器中一部分使用。

2，ID选择器

在标签中添加ID属性。

ID选择器作用：
选中页面中唯一的一个标签。
格式：
#ID值{
声明;
}
【注】：
1.id值必须是唯一的，在一个页面中只能出现一次。如果多次出现重复的ID值是不符合规范的。
2.所有的标签都有ID属性。ID命名的规范：由字母，下划线，中划线，数字组成。不能以数字开头。
3.见名知意。不要起毫无意思的名字。
4.驼峰写法：SearchButton(大驼峰) searchButton(小驼峰，推荐) 多个单词，从第二个单词开始，每个单词的首字母大写。
5.下划线写法：search_button 多个单词，从第二个单词开始，每个单词的前面添加一条下划线。
【注】：id选择器尽量不要在css中使用，而是配合js使用。

        #div2{color: red;}#p1{color: red;}

3，类选择器（class选择器）

类选择器：
给标签添加一个class属性。通过标签中的class属性来选择标签

格式：
.class值{
声明;
}
优点：可以选择一部分标签，设置相同的样式。
【注】
1.class值可以不唯一。类选择器选中的是拥有相同class值的标签元素。
2.一个标签可以拥有多个class值。
3.命名规则与ID相同。
类写样式，ID写行为。

    <div>我是div1</div><div class="redFont div1">我是div2</div><div>我是div3</div><p class="redFont">年轻人不讲武德</p><p class="redFont">我大意了没有闪</p>

样式：<style>.redFont{color: red;}.div1{background-color: seagreen;}</style>

3，通配选择符（*）

选中所有标签（包含body标签）。

慎用
通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用。
使用场景：
清除默认的样式。

样式：<style>*{color: seagreen;/* 外边距 */margin: 0;/* 内边距 */padding: 0;}</style>

二、四种关系选择器

1，后代选择器（空格）

通过标签的嵌套关系，来缩小选择范围，在范围内查找相关的元素。

格式：
选择器1 选择器2{
声明;
}
选择器1必须是选择器2的祖先元素(包括父元素）。
IE7开始兼容，IE6不兼容。
【注】
1.定义时，选择器之间使用空格隔开。空格左侧必须是右侧的祖先元素。
2.当要把某些元素中的某些元素进行样式修改时，就要想要使用后代选择器。

    <p><span>我是span标签3</span></p>

样式：<style>p span{background-color: rebeccapurple;}</style>

2，子代选择器（>)

通过标签间的嵌套关系，来选中相应标签的子元素。

格式：
选择器1>选择器2{
声明;
【注】>左右两边的关系必须是父子关系。

    <div><p><span>我是span标签</span></p></div>

样式：<style>div>p{background-color: rosybrown;}</style>

3，相邻选择器(+)

格式：
选择器1+选择器2{
声明;
}
选择紧贴在选择器1元素之后的选择器2元素，选择器1与选择器2，两者必须同属于一个父级。
与兄弟选择符(选择器1~选择器2) 相同的是，相邻选择符也是选择同级的元素；
不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着选择器1元素之后的第一个选择器2元素）。
【注】IE7兼容，IE6不兼容。

    <p>去年今日此门中</p><h3>题都城南庄</h3><!-- <span>崔户</span> --><p>去年今日此门中</p><p>人面桃花相映红</p><p>人面不知何处去</p><p>桃花依旧笑春风</p>

样式：<style>h3 + p{color: red;}</style>  运行结果为诗句“去年今日此门中”字体颜色变为红色。

若是：

    <p>去年今日此门中</p><h3>题都城南庄</h3><span>崔户</span><p>去年今日此门中</p><p>人面桃花相映红</p><p>人面不知何处去</p><p>桃花依旧笑春风</p>

样式：<style>h3 + p{color: red;}</style>  运行结果为诗句“去年今日此门中”字体无变化。因为紧邻h3之后的第一个标签是span标签。且span标签中的内容“崔户”样式也无变化。

4，兄弟选择器(~)

语法格式：
选择器1 ~ 选择器2{
声明;
}
选中的是选择器1元素之后的所有同级的选择器2元素。选择器1与选择器2必须同属一个父级。

    <p>去年今日此门中</p><h3>题都城南庄</h3><p>去年今日此门中</p><p>人面桃花相映红</p><p>人面不知何处去</p><p>桃花依旧笑春风</p><div><p>明日复明日</p></div>

样式：<style>h3 ~ p{color: red;}</style>
运行结果为诗句“
去年今日此门中
人面桃花相映红
人面不知何处去
桃花依旧笑春风。字体颜色变为红色。

三、交集和并集选择器

1，交集选择器（选择器之间没有任何符号）

既满足条件1，又满足条件2.

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

    <div><p><span class="nav span1">我是span标签</span></p></div><span>我是span标签2</span><div><h1><p class="nav"><span class="nav">我是span标签3</span></p></h1></div>

样式：<style>span.nav.span1{background-color: blue;}</style>
运行结果为“我是span标签”背景颜色变为蓝色。

2，并集选择器（选择器之间用，隔开）

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

   <h1>我是一级标题</h1><h2>我是二级标题</h2><h3>我是三级标题</h3><p>昨夜西风凋碧树</p><p>一夜鱼龙舞</p><span>我是span标签</span>

样式：<style>h1,h2,span {color: royalblue;}</style>
运行结果为“我是一级标题
我是二级标题
我是span标签”字体颜色变为蓝色。（如下图）

四、伪类选择器

1，序选择器

E:first-child{}

判断当前元素是否为父元素的第一个子元素，如果是，则选中。
格式：
目标元素E：first-child{
声明;
}

E:last-child{}

判断当前元素是否为父元素的最后一个子元素，如果是，则选中。

E:only-child{}

判断当前元素是否为父元素的唯一一个子元素，如果是，则选中。

<ul><li>我是第一个li</li><li>我是第二个li</li><li>我是第三个li</li><li>我是第四个li</li><li>我是第五个li</li>
</ul>

样式：<style>li:first-child{color: royalblue;}li:last-child{color: sandybrown;}/* li:only-child{color: slateblue;} */</style>

运行结果：

2，nth-child（n）选择器

n表示父元素下的第几个子元素。

- 语法格式：
E：nth-child（n）{
声明;
}

<ul><li>我是第一个li</li><li>我是第二个li</li><li>我是第三个li</li><li>我是第四个li</li><li>我是第五个li</li>
</ul>

实现奇数列字体颜色显示为蓝色，偶数列字体颜色显示为绿色。有以下2种方式：

1样式：<style>/* n 表示一个乘法因子，可以是0,1,2....自然数  */li:nth-child(2n+1){color: blue;}li:nth-child(2n){color: green;}</style>

或者：

1样式：（使用odd、even实现奇、偶）<style>  li:nth-child(odd){      color: blue;}      li:nth-child(even){color: green;}</style>

child系列，E元素的父元素最高是body。
type系列，E元素的父元素最高是html。

3，nth-of-type（n）选择器

（1） E:first-of-type{}

语法格式：
E:first-of-type{
声明;
}
匹配父元素下第一个类型为E的子元素。

（2）E:last-of-type {}

匹配父元素下的所有E子元素中的倒数第一个。

（3）E:only-of-type {}

匹配父元素的所有子元素中唯一的那个子元素E。

父元素可以有多个子元素，但其中的子元素E必须是唯一的，不能出现多个。

（4）E:nth-of-type（n） {}

选中父元素下的E同类型中的第n个元素

格式：
E：nth-of-type(n){
声明;
}
【注】
1.要使该属性生效，E必须是某个元素的子元素，E的父元素最高可以是html。
2.该选择器命中的是父元素中的第n个为E的子元素，不管第n个子元素是否为E.

  <div><h3>题都城南庄</h3><h4>崔户</h4><h5>唐朝</h5><p>去年今日此门中</p><p>人面桃花相映红</p><p>人面不知何处去</p><p>桃花依旧笑春风</p></div>

样式：<style>p:nth-of-type(2){background-color: indianred;}</style>

运行结果如下：

4，伪类选择器（超链接应用）

同一个标签，根据不同的状态，拥有不同的样式，这就叫做“伪类”。伪类使用：（冒号）来表示。
格式：
选择器：伪类名{
声明;
}
或表示为：
格式：
E：伪类名{
声明;
}
伪类选择器大致可分为两种：

（1）静态伪类 只能用于超链接的样式。
E:link 超链接点击之前
E:visited 超链接被访问过之后。
（2）动态伪类 针对所有的标签都适用
E:hover “悬停” 鼠标放在标签上时。
E:active “激活” 鼠标点击标签，不松手时。
(3)特殊针对表单元素。
E:focus 是某个标签获得焦点时的样式。
对于a标签有4种伪类，对应四种状态

a：link 点击之前
a：visited 访问之后
a：hover 鼠标悬停
a：active 激活鼠标点击时。
超链接状态顺序：(lvha (爱恨准则)
a:link {}
a:visited {}
a:hover {}
a:active {}

注意，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后.
a:link,a:visisted 一般都是可以省略的，简写在a标签中。一般只需要写a{}，a:hover{}

   <a href="http://pay.qq.com">点一下就变强</a>

未添加样式时的运行效果：

1，访问之前样式

    <style>a:link{text-decoration: none;color: orange;}</style>

运行结果：下划线消失，字体颜色变为黄色。

2，鼠标悬停样式

    <style>a:hover {text-decoration: none;background-color: yellow;}</style>

运行结果：下滑线消失，背景色变为黄色。

3，激活样式：

       a:active{color: red;}

运行结果：鼠标点击不松手时，字体颜色变为红色。
4，访问之后的样式：

        a:visited{color: green;}

运行结果：字体颜色变为绿色。