css选择器详解

最新推荐文章于 2025-07-01 09:31:29 发布

醉小义

最新推荐文章于 2025-07-01 09:31:29 发布

阅读量557

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签：选择器 css

本文链接：https://blog.youkuaiyun.com/qq_30638831/article/details/88777252

前端专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了CSS中各种选择器的使用方法，包括标签、ID、类、通配符、复合、后代、子代选择器及相邻兄弟选择器等，并探讨了它们之间的优先级关系。

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

标签选择器

渲染所有的指定的标签。
*　以下例子渲染所以的span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style>
        span {
            color: red;
        }
    </style>

</head>
<body>

    <body>
    <div> 大话2
        <span>逍遥生</span>
    </div>
    <div>大话2
        <em>
            <span>飞剑侠</span>
        </em>
    </div>
    </body>

</body>
</html>

在这里插入图片描述

id选择器

#id值{key:value}
一个标签只能调用一个ID选择器。
一个标签可以同时调用类选择器和ID选择器。
页面中id最好不要重复
只渲染存在id对应为one的，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>

    <style>
        #one {
            color: red;
        }
    </style>
</head>
<body>

    <body>
    <div> 大话2
        <span id="one">逍遥生</span>
    </div>
    <div>大话2
        <em>
            <span>飞剑侠</span>
        </em>
    </div>
    </body>
</body>
</html>

在这里插入图片描述

类选择器

.class名字{key:value}
一个标签可以调用多个类选择器。
多个标签可以调用同一个类选择器
规则
- 不能用纯数字或者数字开头来定义类名
- 不能使用特殊符号或者特殊符号开头（_）来定义类名
- 不建议使用汉字来定义类名
- 不推荐使用属性或者属性的值来定义类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>

    <style>
        .one {
            color: red;
        }
        .fontOne{
            font-size: 100px;
        }
    </style>
</head>
<body>

    <body>
    <div> 大话2
        <span class="one fontOne">逍遥生</span>
    </div>
    <div>大话2
        <em>
            <span  >飞剑侠</span>
        </em>
    </div>
    </body>
</body>
</html>

在这里插入图片描述

通配符选择器

*{key:value;}
给所有的标签都使用相同的样式
不推荐使用，增加浏览器和服务器负担
常见用法为 * { padding:0px;maring:0px }

复合选择器

两个或者两个以上的基础选择器通过不同的方式连接在一起
标签+类（ID）选择器{属性：值；}
指的是一个标签上面的渲染,
div上面的class渲染，会渲染标签下马所以的样式，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        div.one {
            color: red;
        }
    </style>
</head>
<body>

    <body>
    <div class="one"> 大话2
        <span >逍遥生</span>
    </div>
    <div>大话2
        <em>
            <span >飞剑侠</span>
        </em>
    </div>
    </body>
</body>
</html>

在这里插入图片描述

后代选择器

选择器+空格+选择器{key：value;}
后代选择器首选要满足包含（嵌套）关系
指的是嵌套关系的渲染
父集元素在前边，子集元素在后边
无限制隔代
只要能代表标签，标签、类选择器、ID选择器自由组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style>
        div span span.song {
            color: red;
        }
    </style>
</head>
<body>

    <body>
    <div class="one"> 大话2
        <span >逍遥生
            <span CLASS="song">未转</span>
        </span>
    </div>
    <div class="one"> 大话2
        <span >逍遥生
            <span CLASS="song">未转</span>
        </span>
    </div>
    <div>大话2
        <em>
            <span >飞剑侠</span>
        </em>
    </div>
    </body>
</body>
</html>

在这里插入图片描述

子代选择器

选择器 > 选择器{key:value;}
选中直接下一代元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>

    <style>
        div > span{
            color: red;
        }
    </style>
</head>
<body>

    <body>
    <div  > 大话2
        <span >逍遥生</span>
    </div>

    <div>大话2
        <em>
            <span >飞剑侠</span>
        </em>
    </div>
    </body>
</body>
</html>

在这里插入图片描述
这个代码要是修改成后代选择器：

原因： 后代选择器不限制隔代

并集选择器

选择器1,选择器2…
多元素渲染相同的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
        /* 并集选择器 */
        .box, #miss, span{
            font-size: 20px;
        }
    </style>

</head>
<body>

    <div class="box">飞剑侠</div>
    <p id="miss">飞剑侠</p>
    <span> 飞剑侠 </span>
</body>
</html>

在这里插入图片描述

CSS 相邻兄弟选择器

标签1 + 标签2 ，例如： div + p
可选择紧接在另一元素后的元素，且二者有相同父元素
代表紧跟div同级的p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS相邻兄弟选择器</title>
    <style>
        div + p
        {
            background-color:yellow;
        }
    </style>
</head>
<body>
    <h1>大话西游2</h1>
    <div>
        <p>逍遥生</p>
        <p>逆天魔</p>
    </div>
    <p>一生朋友</p>
    <p>.....</p>
</body>
</html>