HTML+CSS+JavaScript复习笔记持更（五）——CSS选择器

最新推荐文章于 2024-07-24 21:48:20 发布

小陈同学の

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量189

点赞数

分类专栏： HTML+CSS+JS复习笔记文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_43781426/article/details/105811648

版权

HTML+CSS+JS复习笔记专栏收录该内容

11 篇文章 2 订阅

订阅专栏

CSS选择器

在一个页面中，必不可少的就是css样式，css样式全都写在style标签中，在使用css时，我们可以用的css选择器非常之多，所以css选择器的分类也很多，但是基本上可以统计分为两类：基础选择器+其他选择器

基础选择器

基础选择器中包含了五种：通配符选择器、元素选择器、类选择器、ID选择器

通配符选择器

顾名思义，通配符选择器用于页面中所有的元素，常用于定义页面的初始化效果

语法格式：

* {
	padding: 0;
	margin: 0;
}

* 代表所有元素，通配符选择器一般写在所有CSS的最前面。

元素选择器

元素选择器也被称为标签选择器，主要应用在修改某一标签的样式，作用于全局的该标签，所以实际应用需要根据需求，谨慎考虑是否使用。

语法格式：

		div {
			width: 300px;
			height: 200px;
			background-color: red;
		}
		span {
			color: blue;
		}
		h2 {
			color: chartreuse;
		}

用法即：标签 {属性名：属性值;}

类选择器

类选择器可以说是调整样式时最常用的选择器了。只要标签中定义了class名字，即可被css的类选择器调用

注：使用该选择器，对应的标签中一定要定义class名字

调用时选择器时，需要在class名字前添加一个“.”

语法格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 在style中先写一个  "."  再接着写class名字 */
        .box {
            width: 300px;
            height: 200px;
            background-color: chartreuse;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- div中定义了class名字为box -->
    <div class="box">我的class名字是box</div>
</body>
</html>

效果图：
在这里插入图片描述

ID选择器

ID选择器与class选择器很类似，同样需要在标签中定义id名字，调用时将“.”更换为“#”

tip：在后期学习及实际运用中，class常用于修改样式，id常用于js调用

语法格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 在style中先写一个  "#"  再接着写id名字 */
        #box {
            width: 300px;
            height: 200px;
            background-color: chartreuse;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- div中定义了id名字为box -->
    <div id="box">我的id名字是box</div>
</body>
</html>

效果图：
在这里插入图片描述

属性选择器

属性选择器，有一点点像元素选择器（标签选择器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 在style中先写一个  "[]"  在里面写属性名 */
        /*本例子中的属性选择的是class*/
        [class] {
            width: 300px;
            height: 200px;
            background-color: chartreuse;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 属性选择器将会选取[]里标签 ，本例子中会找到包含class属性的标签-->
    <div id="box1">我的id名字是box1</div>
    <div class="box2">我的calss名字是box2</div>
    <div>我没有id，也没有class</div>
</body>
</html>

效果图：
在这里插入图片描述

其他选择器

其他选择器也被称为扩展选择器，其意义在于与基础选择器分开，个人感觉在记忆时，只需要记住各种选择器的名称及用法即可，是基础还是拓展，并无大碍

后代选择器

后代选择器，又称为包含选择器

语法格式：第一个元素+空格+第二个元素，空格在这里可以翻译为，……后的……，在这里就翻译为div后的a标签，所以，只要是被div包含的a标签都会变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 第一个元素+空格+第二个元素 */
        div a {
            background-color: chartreuse;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">我会变色</a>
        <!-- 请大家记住这里有个span -->
        <span>
            <a href="#">我也变色</a>
        </span>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

子类选择器

子类选择器与后代选择器很容易搞混，后代选择器的后代可以是很多层之后的后代，而子类选择器选择的是，第一个元素后的第一层后代。

可以这么理解：

第一个元素是第一代祖先，
那么后代选择器选的就是它的所有符合条件的后代，
而子类选择器，只能选择它的儿子这一代。

语法格式：第一个元素+右括号+第二个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 第一个元素+>+第二个元素，中间不要接空格 */
        div>a {
            background-color: chartreuse;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">我会变色</a>
        <!-- 这时span和上面的a属于同一代 -->
        <span>
            <!-- span里面的a标签与上面的a不属于同一代，所以不变色 -->
            <a href="#">我不变色</a>
        </span>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

兄弟元素选择器

兄弟元素选择器有两种：相邻兄弟选择器（+）、通用兄弟选择器（~）

区别在于：
相邻兄弟选择器可以选择到第一个元素的后一个兄弟元素
通用兄弟选择器可以选择到第一个元素的后面所有兄弟元素

相邻兄弟选择器语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 第一个元素+“+”+第二个元素，中间不要接空格 */
        div+span {
            display: block;
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div>div</div>
    <span>第一个span</span>
    <span>第二个span</span>
</body>
</html>

在这里插入图片描述

通用兄弟选择器语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 第一个元素+“~”+第二个元素，中间不要接空格 */
        div~span {
            display: block;
            width: 200px;
            height: 200px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <div>div</div>
    <span>第一个span</span>
    <span>第二个span</span>
</body>
</html>

在这里插入图片描述

伪类选择器

伪类选择器，常用的有四种，经常用于a元素上

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：如果同时存在link、visited、hover，那么a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意：如果同时存在a:hover、active，那么a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。

伪元素选择器

常用的有两个：
::before（在指定对象的前端插入内容）
::after（在指定对象的尾部添加内容）
一般都需要结合content这个样式一起使用，用于添加文字

语法格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a::before{
            content: "我是before，在前面添加，";
        }
        a::after{
            content: "，我是after，在后面添加";
        }
    </style>
</head>
<body>
    <a href="#">这是个a标签</a>
</body>
</html>

在这里插入图片描述

小陈同学の

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript复习笔记持更（五）——CSS选择器

CSS选择器在一个页面中，必不可少的就是css样式，css样式全都写在style标签中，在使用css时，我们可以用的css选择器非常之多，所以css选择器的分类也很多，但是基本上可以统计分为两类：基础选择器+其他选择器基础选择器基础选择器中包含了五种：通配符选择器、元素选择器、类选择器、ID选择器通配符选择器顾名思义，通配符选择器用于页面中所有的元素，常用于定义页面的初始化效果语法格式...
复制链接

扫一扫

专栏目录