十一CSS复合选择器

Posted 2022-01-29 上善若水

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了十一CSS复合选择器相关的知识，希望对你有一定的参考价值。

一、CSS的复合选择器

1.1、什么是复合选择器

在CSS中，可以根据选择器的类型把选择器分为 $\\colorred基础选择器$ 和 $\\colorred复合选择器$ ，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素（标签）；
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等；

1.2 后代选择器（重要）

$\\colorred后代选择器$ 又称为 $\\colorred包含选择器$ ，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。
语法

元素1 元素2 样式声明

上述语法表示 $\\colorred选择元素1里面的所有元素2$ (后代元素)。
例如

ul li 样式声明 /* 选择ul里面所有的li标签元素 */

元素1和元素2中间用 $\\colorred空格隔开$ ；
元素1是父级，元素2是子级，最终选择的是 $\\colorred元素2$ ；
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可；
元素1 和元素2 可以是任意基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ol li 
        color: pink;
    
    ol li a 
        color: red;
    
    .nav li a 
        color: green;
    

</style>
<body>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>

    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">不会变化的</a></li>
    </ul>

    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
    </ul>
</body>
</html>

1.3、子选择器（重要）

$\\colorred子元素选择器（子选择器）$ 只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。
语法

元素1 > 元素2 样式声明

上述语法表示 $\\colorred选择元素1里面的所有直接后代（子元素）元素2$ .
例如

div > p 样式声明 /* 选择div里面所有最近一级p标签元素 */

元素1 和元素2 中间用 $\\colorred大于号$ 隔开；
元素1是父级，元素2是子级， $\\colorred最终选择的是元素2$ ;
元素2必须是 $\\colorred亲儿子$ ，其孙子、重孙之类都不归它管，你也可以叫它亲儿子选择器；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        .nav > a 
            color: red;
        
        .nav p a 
            text-decoration: none;
        
    </style>
<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>
</html>

1.4、并集选择器（重要）

$\\colorred并集选择器可以选择多组标签，同时为它们定义相同的样式$ 。通常用于集体声明。
$\\colorred并集选择器$ 是各选择器 $\\colorred通过英文逗号（,）连接而成$ ，任何形式的选择器都可以作为并集选择器的一部分；
语法：

元素1,元素2 样式声明

上述语法表示 $\\colorred选择元素1和元素2$
例如：

ul,div 样式声明 /* 选择ul和div标签元素 */

元素1和元素2中间用 $\\colorred逗号隔开$ ；
逗号可以理解为 $\\colorred和$ 的意思；
并集选择器通常用于集体声明；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 要求1: 请把熊大和熊二改为粉色 */
    /* div,
    p 
        color: pink;
     */

    /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
    div,
    p,
    .pig li 
        color: pink;
    

    /* 约定的语法规范,我们并集选择器喜欢竖着写 */
    /* 一定要注意,最后一个选择器 不需要加逗号 */
</style>
<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>
</html>

1.5 伪类选择器

$\\colorred伪类选择器$ 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是 $\\colorred用冒号（:）表示$ ，比如 :hover、:first-child。
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

1.6链接伪类选择器

a:link      /* 选择所有未被访问的链接 */
a:visited   /* 选择所有已被访问的链接 */
a:hover     /* 选择鼠标指针位于其上的链接 */
a:active    /* 选择活动链接（鼠标按下未弹起的链接） */

1、链接伪类选择器注意事项。
2、链接伪类选择器实际开发中的写法。
$\\colorred链接伪类选择器注意事项$

1.为了确保生效，请按照 $\\colorredLVHA$ 的循环顺序声明 :link 、:visite
、:hover 、 :active
2.记忆法：love hate 或者 lv 包包 hao。
3.因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
$\\colorred链接伪类选择器实际工作开发中的写法:$

/* a 是标签选择器 所有的链接 */
a 
    color: gray;

/* :hover 是链接伪类选择器 鼠标经过 */
a:hover 
    color: red;  /* 鼠标经过的时候，由原来的 灰色 变成了 红色 */

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器之链接伪类选择器</title>
    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link 
            color: #333;
            text-decoration: none;
        

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited 
            color: orange;
        

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover 
            color: skyblue;
        

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active 
            color: green;
        
    </style>
</head>
<body>
    <a href="#">小猪佩奇</a>
    <a href="https://www.baidu.com/">百度</a以上是关于十一CSS复合选择器的主要内容，如果未能解决你的问题，请参考以下文章 
 CSS复合选择器
 css复合选择器都有哪些
 CSS基础知识二复合选择器元素显示模式背景三大特性注释
 夯实基础--CSS=＞复合选择器
 CSS学习笔记——复合选择器
 CSS学习笔记——复合选择器