CSS学习18：CSS选择器二

1、标签指定式选择器（交集选择器）

标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个必须是标签选择器，第二个为 class 选择器或 id 选择器。两个选择器之间不能有空格。简单记忆为：并且的意思。即…又…的意思，比如 p.one 选择的是类名为 one 的段落标签。

例子：

2、后代选择器（层级选择器）

后代选择器又叫包含选择器，用来选择元素或元素组的后代。其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。



示例：


后代主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>

3、子代选择器

与后代选择器相比，子元素选择器只能选择作为某个元素的子元素。子选择器使用大于号作为子结合符。

例如你只想选择 p 元素的子元素 strong 元素，为其设置样式。你可以这么写：


只有第一个 p 标签中的两个 strong 元素变成了红色，而第二个 p 标签中的 两个 strong 元素不受影响。而如果改成后代选择器，上诉例子中的 style 标签里面改成下面的代码，其余代码不变：


从上述两个例子中我们可以看出，子代选择器只选择指定标签的第一代子元素或者理解为它的直接后代（只指定儿子，而不管孙子），后代选择器是作用于所有子后代元素（不只儿子，还可以选择到孙子，重孙子等等）。

4、并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class 类选择器、id 选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的 CSS 样式。简单记忆为：和的意思。


上述例子表示 p 标签和 id 名为 one 的标签 和 class 名为 two 的标签的样式为：颜色为红色。

多个选择器，如果有同样的样式设置，可以使用并集选择器。

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

5、属性选择器

属性选择器是根据元素的属性及属性值来选择元素。常用的几种属性选择器：

6、伪类选择器

伪类选择器是在原有选择器的基础上添加一个限定条件，当某种情况发生时再选择这个标签。
CSS 伪类用于向某些选择器添加特殊的效果。下面给大家介绍几个常用的伪类。

• :link 应用于未被访问过的链接。IE6 不兼容，解决此问题，直接使用 a 标签。
• :hover应用于有鼠标指针悬停于其上的元素。在 IE6 只能应用于 a 连接，IE7+ 所有元素都兼容。
• :active应用于被激活的元素，如被点击的链接、被按下的按钮等。
• :visited 应用于已经被访问过的链接。
  
  我们可能会遇到被点击访问过的超链接不再具有 hover 和 active 了，解决办法是改变 CSS 属性的排列顺序，L-V-H-A（link-visited-hover-active）。您可以运行一下，然后更改 L-V-H-A 的顺序后，看看效果。

使用伪类选择器缩小选择范围
:first-child：选择第一个子元素，缩小标签的选择范围

练习：对egg.html修改超链接的默认样式。

伪类选择器hover表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，它们可以通过样式在元素中插入内容。

.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

7、层叠性和继承性

层叠性

层叠性是指多种 CSS 样式的叠加。而最终什么选择器在层叠中胜出遵循下列规则。

!important

!important 具有最大优先级。也就是说任何情况下，只要定义了它,它的样式最终就会被应用。

源代码出现的次序

这里的先后次序不是说 class 里面类名的先后次序，而是说定义样式的先后顺序。上述例子中先定义的 box2 类样式，再定义的 box 类样式，最后显示的是 box 类中的样式。

优先级

规则（1）：内联样式 > 嵌入样式 > 外部链入样式 > 浏览器默认样式。
规则（2）：!important > 内联 > id > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承。

继承性

继承性就是指我们写 CSS 样式表的时候子元素会继承父元素的某些样式，比如文本颜色和字号。下面我们来看个简单的例子，帮助我们理解：


想要设置一个可继承的属性，只需将它应用于父元素即可。所有字体相关的都可以继承，比如：color、text-系列、font-系列、line-系列等。并不是所有的 CSS 属性都可以继承，例如：边框、外边距、内边距、背景、定位、元素宽高属性就不能继承。所有盒子相关的属性都不能继承，例如：a 标签，h1 标签不会实现继承。

8、挑战：CSS 层叠性和继承性题

先看代码然后思考一下结果，最后再把代码复制到浏览器中运行看看是不是和你做的结果一样，如果不一致，仔细想想为什么，再去看看前面的内容复习一下吧。

第一题

第二题

第三题

第四题

第五题

第六题