15、CSS基础——选择器

lvh98

已于 2022-08-02 16:17:46 修改

阅读量595

点赞数 1

分类专栏： web前端学习笔记（HTML+CSS篇）文章标签： css html5 html

于 2021-10-13 16:50:19 首次发布

本文链接：https://blog.csdn.net/lvh98/article/details/120724602

版权

web前端学习笔记（HTML+CSS篇）专栏收录该内容

38 篇文章 1 订阅

订阅专栏

选择器

文章目录

选择器

选择器的作用：精准的选中想要的元素。

1. 简单的选择器

1.1 ID选择器

#id{}，选中的是对应id的元素，因为元素的id属性是唯一的，因此id选择器只能选中特定的一个元素。

1.2 元素选择器

element{}，直接选中所有指定元素名的同名元素。

1.3 类选择器

.class{}，选中对应类名的元素，可以选中多个指定元素。

1.4 通配符选择器

*{}，选中所有元素。

例1.1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
    <p>Lorem.</p>
    <a href="">Lorem, ipsum.</a>
    <h3>Lorem.</h3>
</body>
</html>

通配符选择器选中的是所有的元素，包括html,head,body,p,a,h3等元素。

1.5 属性选择器

[属性]{}，根据属性名和属性值选中元素。

例1.2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*选中所有具有href属性的元素*/
        [href]{
            color: blue;
        }
        /*选中href值为https://www.sina.com的元素*/
        [href="https://www.sina.com"]{
            color: red;
        }
    </style>
</head>
<body>
    <p>Lorem.</p>
    <div>Lorem, ipsum.</div>
    <h3>Lorem.</h3>

    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.sina.com">新浪</a>
    <a href="https://douyu.com">斗鱼</a>
</body>
</html>

在这里插入图片描述

除了[属性]{}和[属性=属性值]{}的用法之外，属性选择器的用法还有很多，可以在mdn上查询。

1.6 伪类选择器

选中某些元素的某种状态

:hovor{}: 鼠标悬停的状态

:hover{}选中的是所有元素鼠标悬停时的状态，若想控制指定元素，则在冒号前配合其他选择器使用。例如

a:hover{}选中的是鼠标悬停时的a元素

例1.3：

HTML:

<p>Lorem.</p>
<div>Lorem, ipsum.</div>
<h3>Lorem.</h3>

<a href="https://www.baidu.com">百度</a>
<a href="https://www.sina.com">新浪</a>
<a href="https://douyu.com">斗鱼</a>

CSS:

a:hover{
    background-color: yellow;
    color: red;
}

hover

:active{}：激活状态，鼠标按下状态

例1.4：

还是以上例的HTML代码为例，更改CSS声明

CSS：

a:hover{
    background-color: yellow;
    color: red;
}
a:active{
    background-color: aqua;
    color: #fff;
}

active

:link{}: 超链接未访问时的状态
:visited{}：超链接访问过后的状态

浏览器默认样式中，未被访问的链接颜色为蓝色，已被访问的链接颜色为紫色。两种状态的样式可以使用伪类选择器link和visited来设置。

例1.5：

CSS：

a:link{
    color:#f40;
}
a:visited{
    color: #f4f;
}

link&visited

上图中新浪和斗鱼的链接未被访问过，百度已被访问。

若要将四个伪类选择器都用上，顺序必须为：link > visited > hover > active (此顺序的口诀：爱恨法则（love hate）)

1.7 伪元素选择器

1.生成并选中某元素内部的第一个子元素

::before{
	content: ;
}

2.生成并选中某元素内部的最后一个子元素

::after{
	content: ;
}

例1.6：

还是以伪类选择器中的HTML代码为例，其关联的CSS代码改为

a::before{
    content: "this is ";
    color: red;
}
a::after{
    content: " ?";
    color: green;
}

before&after

2. 选择器的组合

2.1 并且（不加任何符号，两个选择器连着写）

选择器+选择器

/* 选择器 + 选择器 */
p.abc{}   
/* 元素选择器p和类选择器.abc之间没有任何字符 */

又比如前面例子中使用的a:hover{}，a::before{}

2.2 后代元素 —— 空格

选择器+空格+选择器

例2.1：

HTML:

<div class="red">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, et.
    <ul>
        <li>Lorem.</li>
        <li>Minima.</li>
        <li>Recusandae.</li>
        <li>Provident?</li>
        <li>Vel!</li>
    </ul>
</div>

CSS:

/* 选择器 + 空格 + 选择器 */
.red li{
	color: red;
}

设置的样式选中的是"red"类的元素的后代元素中的li元素。

空格1

例2.2：

HTML:

<div class="abc">
    <p>Lorem, ipsum.</p>
    <p class="bcd">Autem, voluptatum.</p>
    <p>Quae, rem.</p>
</div>

<p>Lorem, ipsum dolor.</p>

CSS:

.abc .bcd{
    color: red;
}

选中的是类abc的元素的后代元素中属于类bcd的元素。

空格2
.abc *{}则选中属于类abc的元素的所有后代元素。

2.3 子元素 —— >

选择器+">"+选择器

例如在例2.2中，选择器也可以写为.abc>.bcd。

例2.3

<div>
    <ul>
        <li>Lorem.</li>
        <li>Ex.</li>
        <li>Inventore?</li>
    </ul>
</div>

在上述HTML代码中，若要选中li元素，选择器可以写为div>ul>li{},div li{},ul>li{},ul li{}，不能写为div>li{}，因为li元素是div元素的后代元素，而不是子元素，注意元素间的关系。

2.4 相邻兄弟元素 —— +

选择器+"+"+选择器，选中第一个选中元素的后面一个相邻兄弟元素。但是第一个选择器选中的元素不会被选中。

例2.4

HTML:

<div>
    <ul>
        <li>Lorem.</li>
        <li>Fugiat!</li>
        <li>Inventore!</li>
        <li class="special">Amet.</li>
        <li>Beatae.</li>
        <li>Nobis?</li>
        <li>Adipisci.</li>
        <li>Exercitationem!</li>
        <li>Aut?</li>
        <li>Cumque.</li>
    </ul>
</div>

CSS:

/* 选择器 + '+' + 选择器 */
.special+il{
	color: red;
}
/* 选择类special的下一个兄弟元素 */

选中了第5个li元素。

相邻兄弟元素

2.5 兄弟元素 —— ~

选择器+"~"+选择器，选中第一个选择器选中元素后面的所有兄弟元素。

例2.5：

同例2.4中的HTML代码，CSS代码如下

/* 选择器 + '~' + 选择器 */
.special~il{}
/* 选择类special后面的所有兄弟元素 */

兄弟元素2

3. 选择器的并列

多个选择器，用逗号分隔

语法糖

例3.1：

HTML:

<div>
    <ul>
        <li>Lorem.</li>
        <li>Fugiat!</li>
        <li>Inventore!</li>
        <li class="special">Amet.</li>
        <li>Beatae.</li>
        <li>Nobis?</li>
        <li>Adipisci.</li>
        <li>Exercitationem!</li>
        <li>Aut?</li>
        <li>Cumque.</li>
    </ul>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, consequatur!</p>

CSS:

.special~li,p{
    color: #f40;
}

lvh98

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
15、CSS基础——选择器

选择器选择器：帮助你精准的选中想要的元素简单的选择器1.ID选择器2.元素选择器3.类选择器4.通配符选择器*，表示选中所有元素5.属性选择器根据属性名和属性值选中元素6.伪类选择器选中某些元素的某种状态hovor: 鼠标悬停的状态active：激活状态，鼠标按下状态link: 超链接未访问时的状态visited：超链接访问过后的状态若要将四个伪类选择器都用上，顺序必须为：link > visited > hover > active (此顺序的口诀：爱
复制链接

扫一扫