CSS 高级选择器

最新推荐文章于 2023-01-09 23:46:50 发布

苏艾格

最新推荐文章于 2023-01-09 23:46:50 发布

阅读量558

点赞数 1

分类专栏： CSS学习笔记文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_43641202/article/details/115264754

版权

CSS学习笔记专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS中的高级选择器，包括层次选择器（后代、子、相邻兄弟、通用兄弟选择器）和属性选择器（E[attr]、E[attr=val]、E[attr*=val]、E[attr^=val]、E[attr$=val]），并通过实例演示了如何使用这些选择器精准选取和操作页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 高级选择器与简单的文本样式

- 高级选择器

高级选择器

层次选择器

层次选择器是通过
HTML的文档对象模型元素间的层次来选择元素的，主要层次包括后代、父子、相邻兄弟和通用兄弟几种关系，通过它们之间的关系可以快速选定需要的元素。

选择器	类型	功能描述
E F	后代选择器	选择匹配F元素，且F元素在E元素里面
E>F	子选择器	选择匹配F元素，且F元素是E元素的子元素
E+F	相邻兄弟选择器	选择匹配F元素，且F元素紧跟于E元素后面
E~F	通用兄弟选择器	选择位于E元素后的所有F元素

举个例子来演示一下这几种选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
            p,ul{
                border: 1px solid red; /*边框属性*/
            }
        </style>
    </head>
    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <ul>
            <li><p>4</p></li>
            <li><p>5</p></li>
            <li><p>6</p></li>
        </ul>     
    </body>    
</html>

在这里插入图片描述
我们用一个思维导图来说一下这里的结构

body就相当于这些元素的祖先，p1~p3和ul就相当于body的儿子。那li和 p4~p6呢？li和 p4~p6 统称为body的后代，也是ul的后代。而p1、p2、p3他们之间的关系就是兄弟，他们是同一级别的，

在这里插入图片描述

后代选择器

后代选择器的作用就是可以选择某个元素的后代元素，例如“body p”中，body为祖先元素，p为后代元素，那么不管p元素是body的子元素、孙辈元素或更深层次的后代，都将被选中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
            p,ul{
                border: 1px solid red; /*边框属性*/
            }
            /*后代选择器*/
            body p{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <ul>
            <li><p>4</p></li>
            <li><p>5</p></li>
            <li><p>6</p></li>
        </ul>     
    </body>    
</html>

上面代码表示选择body元素的后代元素p，即所有的p元素都会被选中。显示效果为：
在这里插入图片描述

子选择器

子选择器（E>F）只能选择某个元素的子元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
            p,ul{
                border: 1px solid red; /*边框属性*/
            }
          	/*子选择器*/
            body>p{
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <ul>
            <li><p>4</p></li>
            <li><p>5</p></li>
            <li><p>6</p></li>
        </ul>     
    </body>    
</html>

上面代码的以上就是选择body元素的子元素p。只有前面三个p元素属于body元素的子元素，所以p1~p3被选中并变为粉色。显示效果如下：

在这里插入图片描述

相邻兄弟选择器

相邻兄弟选择器（E+F）可以选择紧跟在另一个元素后面的元素，他们有一个相同的父级元素。换句话说就是E和F是同辈元素，F元素在E元素后面并且相邻。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
            p,ul{
                border: 1px solid red; /*边框属性*/
            }
            /*相邻兄弟选择器*/
            .active+p{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <p class="active">1</p>
        <p>2</p>
        <p>3</p>
        <ul>
            <li><p>4</p></li>
            <li><p>5</p></li>
            <li><p>6</p></li>
        </ul>     
    </body>    
</html>

上面代码的意思是选择类名为active的相邻兄弟p元素，也就是active类后面的一个p元素被选中。
在这里插入图片描述

通用兄弟选择器

通用兄弟选择器（E+F）用于选择某元素后面的所有兄弟元素，和相邻兄弟选择器类似，需要在同一个父元素之中，也就是说E和F是同辈元素，并且F元素在E元素之后，E~F将选中E元素后面所有F元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层次选择器</title>
        <style>
            p,ul{
                border: 1px solid red; /*边框属性*/
            }
            .active~p{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <p class="active">1</p>
        <p>2</p>
        <p>3</p>
        <ul>
            <li><p>4</p></li>
            <li><p>5</p></li>
            <li><p>6</p></li>
        </ul>     
    </body>    
</html>

上面代码的意思是选择active类后面的所有兄弟p元素。显示效果如图：
在这里插入图片描述

属性选择器

在HTML中，可以给元素设置各种各样的属性，如id、class、title、href等。通过这些属性可以选择元素并为其设置样式。

选择器	功能描述
E【attr】	选择匹配具有属性attr的E元素
E【attr=val】	选择匹配具有属性attr的E元素，并且属性为值为val（其中val区分大小写）
E【attr^=val】	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E【attr$=val】	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E【attr*=val】	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

E【attr】属性选择器

E【attr】属性选择器是最简单的一种，用来选择具有某个属性的元素，不管其属性值是什么。样式代码如下：

a[id]{
    background-color: yellow;
}

这句代码的意思是选择具有id属性的a元素。

E【attr=val】属性选择器

E【attr=val】属性选择器相比E【attr】来说，已经缩小了选择范围，能进一步精确选择自己需要的元素。如：

a[id=first]{
    background-color: red;
}

这句代码的意思是选择具有id属性的a元素，并且属性值为“first”。

注意E【attr=val】选择器中，属性和属性值必须完全匹配才能被选中。

E【attr*=val】属性选择器

E【attr*=val】属性选择器设置了通配符，也就是只要选择的属性中含有“val”字符串就可以匹配上。

a[class*=links]{
    background-color: red;
}

这句代码的意思是选择含有class属性并且属性值中包含“links”字符串的a元素。

E【attr^=val】属性选择器

E【attr^=val】属性选择器就是元素E设置了属性attr，并且属性值是以字符串“val”开头的所有E元素。比如：

a[href^=http]{
    background-color: red;
}

这句代码的意识是选择所有含有href属性并且属性值以“http”开头的a元素。

E【attr$=val】属性选择器

E【attr$=val】属性选择器与E【attr^=val】刚好相反，表示选择所有attr属性值以“val”结尾的所有E元素。比如：

a[href$=png]{
    background-color: red;
}

这句代码的意思是选择所有含有href属性并且属性值以“png”结尾的a元素。

CSS的选择器就给大家介绍完了。下一章给大家介绍CSS基本的文本样式。