CSS 选择器

Posted on Wed, 25 Dec 2024 16:13:45 +0800 by LiangMingJian

概述

CSS 选择器是 CSS（层叠样式表）提供的一种 HTML 元素定位选择工具，可以用来选择你想要的元素。

用 HTML 标签名称作为选择器，按标签名如 a，div，ul 等进行分类。

tag {
    name: value;
}

使用标签中加入的 class='class_name' 属性进行选择分类。

.class_name {
    name: value;
}

使用标签中唯一的 id='id_name' 属性进行选择分类。

#id_name {
    name: value;
}

使用 CSS 中通配符来进行选择分类，比如选取页面中所有的标签的通配符 *。

* {
    name: value;
}

根据 HTML 元素包含关系，对内层元素进行选择。

最外层 外层 内层{
    name: value;
}

比如需要选中下面 p 标签内的 span，可以使用 div span 进行。

<div>
    <p>
        <span>123</span>
    </p>
</div>
<span>123</span>

只能选择最近一级选择器，控制的是下一层的某个元素。

外层 > 内层{
    name: value;
}

比如需要选中下面 div 标签内的第一个 em 元素，可以使用 div > em 进行。

<div>
    <em>123</em>
    <strong>
        <em>234</em>
    </strong>
</div>

参考文件