备案控制台
开发者社区 开发与运维 文章 正文

CSS学习笔记(二) 选择器

2023-04-24 116
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS学习笔记(二) 选择器

在这篇文章中你能看到有关于 CSS 选择器的相关内容


1、基本选择器


（1）元素选择器

这里所说的元素，其实就是常说的 HTML 元素，我们能通过元素选择器为指定类型的 HTML 元素设置样式

<!DOCTYPE HTML>
<html>
<head>
    <!-- 为了展示方便，这里使用内部样式表指定元素样式 -->
    <style>
        /* 指定 <body> 标签内的文字颜色为灰色 */
        body { color: gray; }
        /* 指定 <h1> 标签内的文字颜色为菊蓝色 */
        h1 { color: cornflowerblue; }
    </style>
</head>
<body>
    <h1>Title Here</h1>   <!-- 字体颜色为菊蓝色 -->
    <p>Paragraph Here</p> <!-- 字体颜色为灰色 -->
</body>
</html>


  • 覆盖与继承

根据 CSS 规则，子元素将会 继承 父元素所拥有的样式【重要】

也就是说，当我们给 <body> 元素定义 color 为 gray 时，子元素 <h1> 和 <p> 的 color 也为 gray

然而，重新定义的子元素样式将会 覆盖 继承的样式【重要】

也就是说，当我们给 <h1> 元素定义 color 为 cornflowerblue 时，它会覆盖 color 为 gray 的样式设置


  • 选择器分组

现在考虑这样一个问题，假如我们需要将所有的标题都变成菊蓝色，那么我们可以像下面这样定义样式表：

h1 { color: cornflowerblue; }
h2 { color: cornflowerblue; }
h3 { color: cornflowerblue; }
h4 { color: cornflowerblue; }
h5 { color: cornflowerblue; }
h6 { color: cornflowerblue; }

这样的定义虽然清晰易懂，但是未免也太过于繁琐，所以我们可以将其合并写成下面的形式：

h1,h2,h3,h4,h5,h6 { color: cornflowerblue; }

这样的写法我们称为 选择器分组，把所有具有相同声明的元素放在一起，从而使得定义更加简洁


  • 声明分组

既然我们可以对选择器进行分组，那么我们也可以对样式声明进行分组吗？答案是肯定的！

还是考虑这样一个问题，假如我们要让段落的背景颜色变成黑色且字体颜色变成白色，那么一个简单的声明如下：

p { background: black; }
p { color: white; }

这样可以吗？当然可以，但是当声明增多时，也同样太过于繁琐

所以我们可以将同一个元素的声明合并在一起，这样的写法我们称为 声明分组

p {
    background: black;
    color: white;
}


（2）类选择器


类选择器根据 class 属性的值选择特定元素，只需要在类名前加上一个点号（ . ）即可

<!DOCTYPE HTML>
<html>
<head>
    <!-- 在 CSS 中使用类选择器 -->
    <style>
        .important { color: cornflowerblue; }
    </style>
</head>
<body>
    <!-- 在 HTML 中指定类名 -->
    <h1 class="important">这是一个重要的标题</h1> <!-- 字体颜色为菊蓝色 -->
    <h1>这是一个标题</h1> <!-- 字体颜色为黑色 -->
    <p class="important">这是一个重要的段落</p>   <!-- 字体颜色为菊蓝色 -->
    <p>这是一个段落</p>   <!-- 字体颜色为黑色 -->
</body>
</html>


（3）id 选择器


id 选择器根据 id 属性的值选择特定元素，只需要在 id 前加上一个井号（ # ）即可

<!DOCTYPE HTML>
<html>
<head>
    <!-- 在 CSS 中使用 id 选择器 -->
    <style>
        #important { color: cornflowerblue; }
    </style>
</head>
<body>
    <!-- 在 HTML 中指定 id -->
    <h1>这是一个标题</h1> <!-- 字体颜色为黑色 -->
    <p id="important">这是一个重要的段落</p> <!-- 字体颜色为菊蓝色 -->
</body>
</html>


2、层次选择器


（1）后代选择器


后代选择器可以帮助我们选择某个元素的 所有后代元素，一般的语法规则如下：

selector1 selector2 {
    property: value;
    ...
}

上面的语法表示只选择 selector1 中的后代元素 selector2，而对一般的 selector2 不起作用

<!DOCTYPE HTML>
<html>
<head>
    <!-- 在 CSS 中使用后代选择器 -->
    <style>
        p span {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>我是标题，<span>没有变成蓝色</span></h1>
    <p>我是段落，<span>变成蓝色</span></p>
</body>
</html>


（2）子代选择器


与后代选择器相比，子代选择器只对某个元素的 所有子代元素 起作用，一般的语法规则如下：

selector1 > selector2 {
    property: value;
    ...
}

上面的语法表示只选择 selector1 中的子代元素 selector2，而对一般的 selector2 不起作用

<!DOCTYPE HTML>
<html>
<head>
    <!-- 在 CSS 中使用子代选择器 -->
    <style>
        p > strong {
            color: red;
        }
    </style>
</head>
<body>
    <p>这是段落，<strong>变成红色</strong></p>
    <p>这是段落，<span>这是强调，<strong>没有变成红色</strong></span></p>
</body>
</html>


（3）通用兄弟选择器


通用兄弟选择器可以帮助我们选择 在某个元素之后的所有兄弟元素，一般的语法规则如下：

selector1 ~ selector2 {
    property: value;
    ...
}

上面语法表示只选择在 selector1 之后的所有兄弟元素 selector2，而对一般的 selector2 不起作用

<!DOCTYPE HTML>
<html>
<head>
    <!-- 在 CSS 中使用通用兄弟选择器 -->
    <style>
        h1 ~ p {
            color: green;
        }
    </style>
</head>
<body>
    <h1>这是一个标题，不会变成绿色</h1>
    <p>这是一个段落，将会变成绿色</p>
    <h3>这是一个副标题，不会变成绿色</h3>
    <p>这是另一个段落，将会变成绿色</p>
</body>
</html>


（4）相邻兄弟选择器


与通用兄弟选择器相比，相邻兄弟选择器只对 在某个元素之后的下一个兄弟元素 起作用，一般的语法规则如下：

selector1 + selector2 {
    property: value;
    ...
}

上面的语法表示只选择在 selector1 之后的下一个兄弟元素 selector2，而对一般的 selector2 不起作用

<!DOCTYPE HTML>
<html>
<head>
    <!-- 在 CSS 中使用相邻兄弟选择器 -->
    <style>
        h1 + p {
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>这是一个标题，不会变成黄色</h1>
    <p>这是一个段落，将会变成黄色</p>
    <h3>这是一个副标题，不会变成黄色</h3>
    <p>这是另一个段落，不会变成黄色</p>
</body>
</html>


3、属性选择器


属性选择器允许根据 元素的属性和属性值 来选择元素，它的基本语法如下：

selector[属性选择器][...] {
    property: value;
    ...
}


属性选择器的取值如下：

属性选择器 描述
attribute 选择具有指定属性的元素
attribute=value 选择具有指定属性且属性值为 value 的元素
attribute*=value 选择具有指定属性且属性值中包含 value 的元素
attribute^=value 选择具有指定属性且属性值以 value 开头的元素
attribute$=value 选择具有指定属性且属性值以 value 结尾的元素
attribute~=value 选择具有指定属性且属性值中包含指定词汇 value 的元素
attribute|=value 选择具有指定属性且属性值中以指定词汇 value 开头的元素


其中，*= 与 ~=、^= 与 |= 之间的区别仅仅在于 “词汇” 二字，它表示什么意思呢？

“词汇” 是指 独立的 字符串，意思就是这段字符串的前后不能出现除 - 之外的其它符号，否则不能匹配

<!DOCTYPE HTML>
<html>
<head>
    <style>
        a[href^="http"] { font-size: 32px; } /* 可以匹配 */
        a[href|="http"] { font-size: 10px; } /* 不能匹配 */
        a[href*="exam"] { font-weight: 800; } /* 可以匹配 */
        a[href~="exam"] { font-weight: 200; } /* 不能匹配 */
        a[href$=".com"] { text-decoration: none; } /* 可以匹配 */
    </style>
</head>
<body>
    <a href="https://www.example.com">空的链接</p>
</body>
</html>


4、伪元素


伪元素（pseudo-element）可以向某些选择器设置特殊的效果，基本语法如下：

selector::pseudo-element {
    property: value;
    ...
}


常见的伪元素如下：

伪元素 描述
first-letter 向文本的第一个字添加特殊样式，只能用于块级元素
first-line 向文本的第一个行添加特殊样式，只能用于块级元素
before 在元素之前添加特殊样式
after 在元素之后添加特殊样式
selection 对选中文本添加特殊样式


一个简单的例子如下：

<!DOCTYPE HTML>
<html>
<head>
    <style>
        p::first-letter { font-size: xx-large; }
    </style>
</head>
<body>
    <p>这是一个段落，很长很长的段落</p>
    <p>然后这是另外一个段落，也是很长很长的段落</p>
</body>
</html>

利用伪元素，我们还可以用一个元素画出五角星，例子如下：

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .star {
            width: 0px;
            height: 0px;
            border-bottom: 9.51px solid yellow;
            border-left: 3.09px solid transparent;
            border-right: 3.09px solid transparent;
            position: relative;
        }
        .star::before, .star::after {
            content: "";
            width: 0px;
            height: 0px;
            border-bottom: 9.51px solid yellow;
            border-left: 13.09px solid transparent;
            border-right: 13.09px solid transparent;
        }
        .star::before {
            transform: rotate(-36deg);
            position: absolute;
            top: 8.6px;
            left: -13.3852px;
        }
        .star::after {
            transform: rotate(36deg);
            position: absolute;
            top: 8.6px;
            left: -12.7948px;
        }
    </style>
</head>
<body>
    <div class="star"></div>
</body>
</html>

5、伪类


伪类（pseudo-class）可以向某些选择器添加特殊的效果，其基本语法如下：

selector:pseudo-class {
    property: value;
    ...
}


（1）动态伪类选择器


语法 描述
link 选择未被访问的锚点元素
visited 选择已被访问的锚点元素
hover 选择鼠标悬浮的元素
active 选择已被激活的元素
focus 选择获得焦点的元素


一个例子如下：

<!DOCTYPE HTML>
<html>
<head>
    <style>
    /* a:hover 必须置于 a:link 和 a:visited 之后 */
        /* a:active 必须置于 a:hover 之后 */
        a:link { color: red }   /* 未访问的链接显示红色 */
        a:visited { color: green }  /* 已访问的链接显示绿色 */
        a:hover { color: blue }     /* 鼠标移动到链接上显示蓝色 */
        a:active { color: yellow }  /* 选定的链接显示黄色 */
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">百度链接</a>
</body>
</html>


（2）元素状态伪类选择器


语法 描述
checked 选择已被选中的按钮元素
enabled 选择启用的表单元素
disabled 选择禁用的表单元素


一个例子如下：

<!DOCTYPE HTML>
<html>
<head>
    <style>
    input:checked + span { color: cornflowerblue; }
    </style>
</head>
<body>
    <form action="#">
        <label><input type="checkbox" value="apple" /><span>Apple</span></label>
        <label><input type="checkbox" value="orange" /><span>Orange</span></label>
        <label><input type="checkbox" value="pear" /><span>Peer</span></label>
    </form>
</body>
</html>


（3）结构伪类选择器


语法 描述
first-child 选择作为父元素的第 1 个子元素的元素
nth-child(n) 选择作为父元素的第 n 个子元素的元素
last-child 选择作为父元素的最后一个子元素的元素
only-child 选择作为父元素的唯一一个子元素的元素
first-of-type 选择作为父元素内具有指定类型的第 1 个子元素
nth-of-type(n) 选择作为父元素内具有指定类型的第 n 个子元素
last-of-type 选择作为父元素内具有指定类型的最后一个子元素
only-of-type 选择作为父元素内具有指定类型的唯一一个子元素
root 选择作为根元素的元素，例如 html:root
empty 选择没有子元素的元素


一个例子如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        h1:only-child {
            color: deepskyblue;
        }
        h3:first-child {
            color: skyblue;
        }
        p:last-child {
            color: lightskyblue;
        }
        span:last-child {
            color: lightblue;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Hello</h1>
    </div><hr/>
    <div class="section">
        <h3>Eternity in an hour</h3>
        <p>To see a world in a grain of sand,</p>
        <p>And a heaven in a wild flower,</p>
        <p>Hold infinity in the palm of your hand,</p>
        <p>And eternity in an hour.</p>
    </div><hr/>
    <div class="footer">
        <h3>Hello World</h3>
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
        <span>Thank you for listening</span>
    </div>
</body>
</html>


（4）目标伪类选择器


语法 描述
target 被指定 URL 指向的元素


一个例子如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        * { margin: 0; padding: 0; }
        a { color: rgba(245, 245, 245, 0.8); text-decoration: none; }
        a:link, a:visited, a:hover, a:active { text-decoration: none; }
        .menu {
            list-style-type: none;
            overflow: hidden;
        }
        .menu > li {
            float: left;
            width: 100px;
            height: 25px;
            border: 0.1px solid lightskyblue;
            background-color: cornflowerblue;
        }
        .menu > li:hover {
            background-color: lightskyblue;
        }
        .content {
            list-style-type: none;
            position: relative;
        }
        .content > li {
            position: absolute;
        }
        .poem {
            width: 400px;
            height: 80px;
            color: rgba(255, 255, 255, 0.8);
            border: 0.5px solid lightskyblue;
            background-color: cornflowerblue;
        }
        #spring { z-index: 4; }
        #summer { z-index: 3; }
        #autumn { z-index: 2; }
        #winter { z-index: 1; }
        #spring:target { z-index: 5; }
        #summer:target { z-index: 5; }
        #autumn:target { z-index: 5; }
        #winter:target { z-index: 5; }
        .flex {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li class="flex"><a href="#spring">春</a></li>
        <li class="flex"><a href="#summer">夏</a></li>
        <li class="flex"><a href="#autumn">秋</a></li>
        <li class="flex"><a href="#winter">冬</a></li>
    </ul>
    <ul class="content">
        <li id="spring"><div class="flex poem">春游芳草地</div></li>
        <li id="summer"><div class="flex poem">夏赏绿荷池</div></li>
        <li id="autumn"><div class="flex poem">秋饮黄花酒</div></li>
        <li id="winter"><div class="flex poem">冬吟白雪诗</div></li>
    </ul>
</body>
</html>


（5）否定伪类选择器


语法 描述
not(selector) 排除符合要求的元素


一个例子如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        p:not(.important) { color: gray; }
    </style>
</head>
<body>
    <p>我是一个段落</p>
    <p class="important">我是一个重要的段落</p>
</body>
</html>
文章标签：
前端开发
关键词：
CSS选择器
CSS学习笔记
CSS学习笔记选择器
半虹
目录
相关文章
sunrr
|
5天前
|
前端开发
要使用CSS选择器选中特定类别的元素
【5月更文挑战第31天】要使用CSS选择器选中特定类别的元素
sunrr
13 2
sunrr
|
5天前
|
前端开发
CSS选择器
【5月更文挑战第31天】CSS选择器
sunrr
13 1
wishCoding
|
11天前
|
人工智能 前端开发
CSS学习笔记2024最新
CSS学习笔记2024最新
wishCoding
20 1
米果粒
|
15天前
|
前端开发
CSS分组和嵌套选择器
CSS分组和嵌套选择器。
米果粒
20 1
yqcoder
|
18天前
|
前端开发
前端 css 经典：选择器速记
前端 css 经典：选择器速记
yqcoder
23 0
北飞的山羊
|
21天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
北飞的山羊
12 0
晓同哇哇~
|
21天前
|
前端开发
CSS选择器
CSS选择器
晓同哇哇~
18 1
梦回故国楼台梦
|
21天前
|
前端开发 开发者
【专栏：CSS基础篇】CSS选择器详解：精准定位网页元素
【4月更文挑战第30天】本文介绍了CSS选择器在Web开发中的重要性，详细阐述了基础选择器（元素、类、ID、属性和伪类/伪元素）及复杂选择器（后代、子元素、相邻兄弟和一般兄弟）的用法。通过理解并巧妙运用这些选择器，开发者能更高效地控制页面样式，提高代码的可维护性。CSS预处理器如Sass、LESS进一步增强了选择器的功能，助力创建优雅且强大的样式表，实现精准的网页设计。
梦回故国楼台梦
29 0
爱吃糖的范同学
|
21天前
|
前端开发 容器
【Web 前端】css选择器有哪些？
【4月更文挑战第22天】【Web 前端】css选择器有哪些？
爱吃糖的范同学
24 2
恰小面包
|
21天前
|
前端开发
css的选择器，优先级和示例
css的选择器，优先级和示例
恰小面包
10 1