CSS选择器-复合选择器

最新推荐文章于 2024-04-06 19:41:17 发布

dawdler-w

最新推荐文章于 2024-04-06 19:41:17 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/Mr_wyt/article/details/110873768

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS选择器——复合选择器

CSS复合选择器分为四类：后代选择器、子选择器、并集选择器、伪类选择器

后代选择器：

后代选择器在我们日常的编程中是非常重要的，它能选择父代元素里面的所有子代元素，添加效果，减少了我们代码的冗余。

语法：

元素1 元素2 {

属性：属性值；

…

}

注意：元素1和元素2之间必须用空格隔开！

均采用内部样式表（嵌入式）
<html>
    <head>
        <style>
            ul li {
                color:red;
            }
        </style>
    </head>
    <body>
        <ul>
           <li>注意下面要说的话</li>
           <li>元素1必须是父级</li>
           <li>元素2是子级</li>
        </ul>
    </body>
</html>

效果演示：

在这里插入图片描述

子选择器：

子选择器只能选择作为某元素的最近一级子元素（选亲儿子元素）。

语法：

元素1 > 元素2 {

属性：属性值；

…

}

注意：元素1是父级元素，元素2是子级元素！

举例说明：
<html>
    <head>
        <style>
            .nav > span {
         		color:blue;       
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <span>我是亲儿子级的,我被选中了！</span>
            <p>
                <span>我是孙子级的！</span>
            </p>
        </div>
    </body>
</html>

效果演示：
在这里插入图片描述

并集选择器：

并集选择器是各个选择器或者同一级别的元素通过逗号连接起来的，任何形式的选择器（包括基础选择器）都可以作为并集选择器的一部分。

语法：

元素1(或选择器)，元素2(或选择器) {

属性：属性值；

…

}

注意：元素1和元素2是同级的，中间必须用逗号隔开！

<html>
    <head>
        <style>
        	div, p {
      			color: red;
   			 }
   			 .yellow, #green {
      			font-size: 35px;
   			 }
        </style>
    </head>
    <body>
        <div>我是div！</div>
        <P>我是p标签！</P>
        <span class="yellow">我是span标签！</span>
        <ul id="green">
            <li>我是绿色吖！</li>
        </ul>
    </body>
</html>

效果演示：
在这里插入图片描述

伪类选择器：

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，伪类选择器用" : "表示。

链接伪类选择器(重点)：

语法	内容
a:link	选择所有未被访问的链接(实际开发常用)
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接(实际开发常用)
a:active	选择活动链接(鼠标按下未弹起来的链接)

由于a:link和a:hover在实际开发中比较常用，下面就来代码演示一下：

<html>
    <head>
        <style>
            a:hover {
                color: #333;
                text-decoration: none;
            }
            a:visited {
                color: blue;
            }
            a:hover {
                color: red;
            }
            a:active {
                color: yellow;
            }
        </style>
    </head>
    <body>     
  		<a href="#">链接伪类选择器</a>
    </body>
</html>

效果演示：

在这里插入图片描述

上面a:link表示的是未被访问的链接，我们设置颜色为灰色，当我们点击的时候，链接已经被访问，所以变成了蓝色,当我们指针位于链接上面的时候，会变成红色,当我们鼠标按下未弹起的时候，链接会变为黄色。

在上面的四种链接伪类选择器中，a:link和a:hover在实际开发中最常用，还有重要的一点是，上面四种链接伪类选择器的顺序不能代码顺序不能打乱，否则会出现错误^ - ^!

dawdler-w

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器-复合选择器

CSS选择器——复合选择器CSS复合选择器分为四类：后代选择器、子选择器、并集选择器、伪类选择器后代选择器：后代选择器在我们日常的编程中是非常重要的，它能选择父代元素里面的所有子代元素，添加效果，减少了我们代码的冗余。语法：元素1 元素2 { 属性：属性值； …}注意：元素1和元素2之间必须用空格隔开！均采用内部样式表（嵌入式）<html> <head> <style> ul li {
复制链接

扫一扫