CSS详细基础（三）复合选择器

前两章介绍了CSS中的基础属性，以及一些基础的选择器，本贴开始介绍复合选择器的内容~

​ 在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。 ​ 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签） ​ 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等~

目录

一.后代选择器

二.并集选择器

三.伪类选择器

---

一.后代选择器

所谓后代选择器，顾名思义——来源自某个“祖先”；在CSS中，允许将父标签中的子标签单独选中赋予样式，这就用到了后代选择器~

现给出结构文件如下：

    

        我是犯规写法。

        有序列表中必须有li，否则该文本不属于ol之中。
        
我是ol的子类,我是红色
        
我是ol的子类,我是红色
        
我是ol的子类,我是红色
        
我是ol中li的子类，我是蓝色
        
        
    
    

        
我是ul中li的子类，我是橙色
        
我是ul中li的子类，我是橙色
        
我是ul中li的子类，我是橙色
        
我是ul中li的子类，我是绿色
        
    
    

        
我是另一个ul中li的子类，我也是橙色
        
我是另一个ul中li的子类，我也是橙色
        
我是另一个ul中li的子类，我也是橙色
        
我是ul中li的子类，我是青色
        
我是ul中li的子类，我是青色
        
我是ul中li的子类，我是青色
    
    

如下的代码可以实现选中有序列表中的列表项：

      ol li
      {
          color: red;
      }

还可以选中更多级别的子标签，如下选择的是列表项中的a标签：

      ol li a
      {
          color: blue;
      }

 还有一种写法是直接将标签的class属性作为父类，也就是说允许类选择器和标签选择器混用~

同理Id选择器也支持这样的操作，这里不再赘述~ 

完整代码不沾了，效果如下：

  

上述的犯规写法要注意一下：ul或ol中的元素必须包裹在li——即列表项中，负责不能按照列表项正常显示~ 

二.并集选择器

与后代选择器的功能从某种角度来说恰恰相反：后代选择器某种程度上是为了将样式区分得更细，而并集选择器则是为了方便控制多种标签的样式一致而诞生的

下述结构文件中有多种标签：

    
熊大
    熊二
    
光头强
    

        
亚古兽
        
加布兽
        
哥玛兽
    

注意并集选择器的语法——标签相互之间用逗号隔开 ：

 效果如下——被选中的标签样式均保持一致：

三.伪类选择器

伪类选择器（pseudo-class selector）是 CSS 中一类选择器，该选择器可以说是CSS基础里最抽象的选择器了，它们可以选中 HTML 中某些状态（如 hover、active、visited等）下的元素，从而改变元素的样式。同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

也就是说，它的主要功能是实现某种事件下标签样式的动态变化，比如选中、点击等情况~

如下定义了结构文件：

    
影视目录
    
点击观看迪迦奥特曼第一集
    
点击观看迪迦奥特曼第二集
    
点击观看迪迦奥特曼第三集
    
点击观看迪迦奥特曼第四集
    
点击观看迪迦奥特曼第五集

    
疑难杂症：a标签默认的属性貌似有visited属性。

以及一些默认且共有的属性：

    .center
    {
        text-align:center ;
    }
    div
    {
        text-align: center;
        /* text-align的功能貌似非常广泛 */
        font-size: large;
    }

然后开始写伪类选择器：

• a:link：规定链接标签a未被点击过所拥有的颜色~
• a:visited：与上文恰好相反，被点击过后的颜色~
• a:hover：光标接触时所展示的颜色~
• a:active：当链接标签被选中后的颜色~

给大家展示一段伪类选择器的样式：

    a:link
    {
        color: black;
        text-decoration: none;
    }
    /* 没点过是黑色 */
    a:visited
    {
       color: blue;
    }
    /* 点过是蓝色 */
    /* 效果非常一般，实际开发用得少 */
    a:hover
    {
        color: crimson;
    }
    /* 光标接触为红色 */
    a:active
    {
        color:darkorange;
    }

大部分地方没什么值得注意的，有一点要说明的是text-decoration: none属性的功能是将a标签原有的下划线去掉~

此外，别的标签也可以使用伪类选择器，比如input：

    
    
    
    
    


    

        
这是第一个输入框：