CSS学习总结基础篇复合选择器

最新推荐文章于 2020-12-23 02:50:47 发布

Ace_bb

最新推荐文章于 2020-12-23 02:50:47 发布

阅读量412

点赞数

分类专栏： HTML、CSS、JS 文章标签： html css 编程语言

本文链接：https://blog.csdn.net/Ace_bb/article/details/104287136

版权

HTML、CSS、JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

复合选择器

在CSS中,选择器可以分为基础选择器和复合选择器,复合选择器是以基础选择器为基础的, 并且对基本选择器进行组合形成的。
●复合选择器可以更准确、更高效的选择目标元素(标签)
●复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
●常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

后代选择器又称为包含选择器,可以选择父元素里面的子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当嵌套标签,内层标签就成为外层标签的子标签。
语法格式：
外层标签内层标签 {
…
}
中间必须用空格隔开
内外层标签可以是任意类型的选择器。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        ol li{
            color: red;
        }
    </style>
</head>
<body>
    <ol>
        <li>11111111111111</li>
        <li>222222222222222</li>
        <li>3333333333333333333</li>
        <p>ppppppppppppp</p>
    </ol>

</body>
</html>

在这里插入图片描述
当body中由两个或以上的ol li 组合时，不能直接用后代选择器。
可以如下设计：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        ol li{
            color: red;
        }
        .nav li{
            color: green;
        }
    </style>
</head>
<body>
    <ol>
        <li>111111111111</li>
        <li>222222222222</li>
        <li>333333333333</li>
        <p>ppppppppppppp</p>
    </ol>
    <ol class="nav">
        <li>33333333333</li>
        <li>44444444444</li>
        <li>55555555555</li>
        <p>ppppppppppppp</p>
    </ol>
</body>
</html>

子选择器

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。
语法格式：
父元素>子元素{
…
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        .nav>p{
            color: green;
        }
    </style>
</head>
<body>
    <ol class="nav">
        <li>33333333333</li>
        <li>44444444444</li>
        <li>55555555555</li>
        <p>ppppppppppppp</p>
    </ol>
</body>
</html>

并集选择器

并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号(, )连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法格式:
元素1, 元素2 {
样式声明
}
上述语法表示选择元素1和元素2.
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        div,p,ul li{
            color: pink;
        }
    </style>
</head>
<body>
    <div>大宝贝</div>
    <p>小宝宝</p>
    <ul>
        <li>hhhhhh</li>
        <li>llllll</li>
    </ul>
</body>
</html>

元素之间的逗号不能少，可以同时并不同的选择器。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如当鼠标移到一个链接时，链接变为浅蓝色。
伪类选择器书写最大的特点是用置号(😃表示,比如:hover、:first-child .
因为伪类选择器很多,比如有链接伪类.结构伪类等,所以这里先给大家讲解常用的链接伪类选择器。

链接伪类选择器

顾名思义，就是对一个链接添加特殊效果

标签名	作用
a:link	选择所有未被访问的链接
a:visited	选择所有己被访问的链接
a: hover	选择鼠标指针位于其上的链接
a:active	选择活动链接(鼠标按下未弹起的链接)

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接伪类选择器</title>
    <style>
        a:link {
            color: aqua;
            text-decoration: none;
        }
        a:visited{
            color: green;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="index06.html">第一个链接</a>
    <a href="index04.html">第二个链接</a>

</body>
</html>

focus 伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况 < input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
语法格式：
input :focus {
backg round- color: yel1ow;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接伪类选择器</title>
    <style>
        input:focus {
            background-color: yellow;
            color: red;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">

</body>
</html>