6.前端基础之CSS选择器2024-03-19

一、什么是选择器

选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式

二、选择器的分类

CSS中提供了多种不同类型的选择器，例如基本选择器、组合选择器、伪类选择器、伪元素选择器等等。

1、基本选择器

（1）概览

在CSS中，选择器用于选取HTML文档中的元素。
根据选择器的类型和语法的不同，可以选择不同的元素。
常用的有id选择器、类选择器、元素/标签选择器和通用选择器。

选择器	格式	含义	缺点	举例
id选择器	#id属性值	id选择器可以为标有特定的ID的HTML元素指定特定的样式，只能使用一次，ID选择器以“#”来定义。	只能使用一次	#title
类选择器	.class属性值	类选择器，给拥有指定的CLASS属性值的元素设置样式	可以根据需求选择	.box
元素/标签选择器	标签名	标签选择器，匹配对应的HTML标签。	不能差异化选择	p
通用选择器	*	通用选择器，将匹配HTML所有标签。	选择的太多，有部分不需要	*

（2）id选择器

通过元素的id属性进行选取。
每个页面中id值是唯一的，所以在css中最好不重复使用id选择器。

 <style>
	/*id选择器*/
	#d1 {  /*找到id是d1的标签，将文本颜色变成绿黄色*/
		color: greenyellow;
    }
</style>

（3）类选择器

类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值，如下所示：

 .black {
    color: black;
}

.black选择器能够匹配文档中所有具有class="black"属性的标签。

由于 class 属性不是唯一的，可以应用于不同的标签，因此您还可以在定义类选择器时指定具体的标签，如下所示：

 p.black {
    color: black;
}

p.black选择器仅会将其中的样式应用到所有具有class="black"属性的标签中，对于其它的具有class="black"属性的标签则没有影响。

另外，一个 HTML 标签中 class 属性可能不止一个，例如：

 <p class="info selected"></p>
<p class="info"></p>

假如我们要为所有 class 属性包含 info 的元素设置粗体，为所有 class 属性包含 selected 的元素设置红色字体，为 class 属性中既包含 info 又包含selected 的元素设置蓝色背景，则可以写成下面这样：

 .info {
    font-weight:bold;
}
.selected {
    color: red;
}
.info.selected {
    background: blue;
}

这种由多个 class 属性值所组成的类选择器我们可以称之为“多类选择器”，而前面介绍的由单个 class 属性值定义的类选择器可以称为“单类选择器”。

注意：多类选择器中，多个 class 属性之间是紧挨着的（例如 .info.selected），不需要使用空格分开。

（4）元素/标签选择器

通过元素的标签名称进行选取。
比如选择所有的段落、列表等。

  <style>
    /*元素(标签)选择器*/
    span {  /*找到所有的span标签*/
          color: green;
     }
</style>

（5）通用选择器

*表示所有的元素。

  <style>
    /*通用选择器*/
    * {  /*将HTML页面上所有的标签全部找到*/
      	  color: blue;
      }
</style>

（6）总体应用实例

  <!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>
        /* id选择器 */
        #myH1 {
            color: red;
        }
 
        /* 类选择器 */
        .title {
            font-size: 24px;
        }
 
        .content {
            line-height: 1.5;
        }
 
        /* 元素/标签选择器 */
        p {
            color: blue;
        }
 
        ul {
            list-style-type: none;
        }
 
        /* 通用选择器 */
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<h1 id="myH1">Hello, World!</h1>
<p class="title">This is a title.</p>
<p class="content">This is a content.</p>
<ul>
    <li>This is a list item.</li>
    <li>This is another list item.</li>
</ul>
</body>
</html>

在上面的示例中，我们创建了一个包含一个id为"myH1"的标题、两个类分别为"title"和"content"的段落以及一个无序列表的HTML文档。

2、组合选择器

（1）概览

后代选择器
儿子选择器
毗邻选择器
弟弟选择器

选择器	格式	含义	举例
后代元素选择器	E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔	div span
儿子元素选择器	E>F	子元素选择器，匹配所有E元素的子元素F	div>span
毗邻元素选择器	E+F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F，同级别紧挨着的下面第一个	div+span
弟弟元素选择器	E~F	弟弟元素选择器，匹配所有E元素之后的所有元素F	div~span

（2）设置标签关系

 <div>div1
	<div>div2
		<p>p1</p>
	</div>
	<p>p2
		<span>span1</span>
	</p>
	<span>span2</span>
</div>

通过嵌套层级来表示亲属关系
- 对于div1来说：div2、p2、span2都是儿子
- 对于div2、p2、span2来说：div1就是父亲
- 对于p1来说：div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
- 对于span2来说：div2、p2是哥哥 span2是弟弟
- div1内部所有的标签无论层级都可以称之为是div1的后代

ps:判断的时候一定要看层级关系

（3）样式设计实例

 /*# 1.儿子选择器(关键符号是大于号)*/
d1 > span {
    /*查找id是d1标签内部所有的儿子span*/
    color: red;
}
 
/*# 2.后代选择器(关键符号是空格)*/
d1 span {
    /*查找id是d1标签内部所有的后代span*/
    color: red;
}
 
/*# 3.毗邻选择器(关键符号是加号)*/
d1 + a {
    /*查找id是d1标签同级别下面紧挨着第一个a标签*/
    color: red;
}
 
/*# 4.弟弟选择器(关键符号是小波浪号)*/
d1 ~ a {
    /*查找id是d1标签同级别下面所有a标签*/
    color: red;
}

3、属性选择器

（1）概览

含有某个属性
含有某个属性并且有某个值
含有某个属性并且有某个值的某个标签

attr是英文单词 “attribude”的简写，中文意思 “属性” 属性名

val是英文单词 “value”的简写，中文意思是“值” 属性值

属性选择器种类	含义	举例
[attr]	匹配所有具有attr属性的元素，不考虑它的值	[align]
[attr = "val"]	匹配所有attr属性值等于val的元素	[align="center"]{.....}，属性值一般加引号
标签 [attr = "val"]	匹配所有attr属性值等于val的元素的标签	input [align="center"]

（2）实例

属性选择器是以[]作为标志的

 <style>
	/*第一种情况*/
    [username] {  /*将所有含有属性名是username的标签背景色改为红色*/
        background-color: red;
    }
 
    /*第二种情况*/
    [username='xiao'] {  /*找到所有属性名是username并且属性值是xiao的标签*/
        background-color: orange;
    }
 
    /*第三种情况*/
    input[username='xiao'] {  /*找到所有属性名是username并且属性值是xiao的input标签*/
        background-color: bisque;
    }
</style>

4、分组与嵌套

（1）分组

 /*查找div或者p或者span*/
div, p, span {
    color: red;
}

（2）嵌套

 /*查找id是d1或者class包含c1或者span*/
#d1, .c1, span {
    color: red;
}

（3）综合

玩法1

 div#d1		查找id是d1的div标签
div.c1		查找class包含c1的div标签

玩法2

 div #d1   查找div内部id是d1的后代标签
#d1>.c1	  查找id是d1的内部class包含c1的儿子标签

5、伪类选择器

（1）概览

标签属性	含义	状态
元素/标签 : link	向未被访问的链接添加样式	正常状态
元素/标签 : visited	向已被访问的链接添加样式	访问过后状态
元素/标签 : hover	当鼠标悬浮在元素上方时，向元素添加样式	鼠标放上状态
元素/标签 : active	鼠标放在元素上面时，点击的一瞬间	激活状态
input : focus	input框获取焦点(鼠标点击了input框)	聚焦状态

（2）实例

 <style>
    a:link{/* 正常状态 */
        color: #f00;/* 红 */
    }
    a:visited{/* 访问过后状态 */
        color: #000;/* 黑 */
    }
    a:hover{/* 鼠标悬停状态 */
        color: gold;/* 黄 */
    }
    a:active{/* 激活状态 */
        color: #0f0;/* 绿 */
    }
    input:focus {  /* input输入框获取焦点(input被选中) */
        background-color: blue;  /* 蓝 */
        }
 
</style>
<body>
    <a href="http://www.bilibili.com">哔哩哔哩</a>
    <a href="http://www.douyu.com">斗鱼</a>
    <a href="http://www.123.com">123</a>
    <input type="text">
</body>

（3）a链接的属性实现顺序

超级链接的不同状态它其实是有顺序的，也就是说伪类选择器设置其实是有顺序的。如果不按照伪类选择器的顺序，那么样式就会失效。

顺序：要遵循 “爱恨法则” 要先有爱，才有恨。“love hate”。

l ：link
v：visited
h：hover
a：active

6、伪元素选择器

（1）使用方法

 /*1.修改首个字体样式*/
p:first-letter {
    color: red;
    font-size: 48px;
}
 
/*2.在文本开头添加内容*/
p:before {
    content: '哈哈';
    color: blue;
}
 
/*3.在文本结尾添加内容*/
p:after {
    content: '嘿嘿';
    color: yellow;
}

（2）应用场景

before 和 after 通常都是用来清除浮动带来的影响，即父标签塌陷的问题
用于网站的内容防爬

三、基本选择器优先级

选择器相同，书写顺序不同
- 就近原则：谁离标签更近就选谁的
选择器不同...
- 行内 > id选择器 > 类选择器 > 标签选择器
- 选择器不同的情况下，精确度越高越有效

 ##  行内 > id选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
 
   <style>
       #d1 {
           color: orange;
       }
       .c1 {
           color: blueviolet;
       }
       p {
           color: red;
       }
   </style>
<!--    <link rel="stylesheet" href="mycss.css">-->
</head>
<body>
   <p id="d1" class="c1" style="color: blue">下一个更乖</p>
</body>
</html>

posted @ 2024-03-19 16:26 Xiao0101 阅读(29) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端基础之jQuery基础

· 前端基础之CSS基础

· CSS选择器详解

· CSS基础-选择器

· CSS概念与CSS选择器

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）

公告

一个不像技术博客的博客

-------------------------------

时钟canvas

昵称： Xiao0101
园龄： 1年3个月
粉丝： 6
关注： 9

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. 爬虫之requests模块请求方式(1)

	<style>
	/id选择器/
	#d1 { /找到id是d1的标签，将文本颜色变成绿黄色/
	color: greenyellow;
	}
	</style>

	.info {
	font-weight:bold;
	}
	.selected {
	color: red;
	}
	.info.selected {
	background: blue;
	}

	<style>
	/元素(标签)选择器/
	span { /找到所有的span标签/
	color: green;
	}
	</style>

	<style>
	/通用选择器/
	* { /将HTML页面上所有的标签全部找到/
	color: blue;
	}
	</style>

	<!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>
	/* id选择器 */
	#myH1 {
	color: red;
	}

	/* 类选择器 */
	.title {
	font-size: 24px;
	}

	.content {
	line-height: 1.5;
	}

	/* 元素/标签选择器 */
	p {
	color: blue;
	}

	ul {
	list-style-type: none;
	}

	/* 通用选择器 */
	* {
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<h1 id="myH1">Hello, World!</h1>
	<p class="title">This is a title.</p>
	<p class="content">This is a content.</p>
	<ul>
	<li>This is a list item.</li>
	<li>This is another list item.</li>
	</ul>
	</body>
	</html>

	<div>div1
	<div>div2
	<p>p1</p>
	</div>
	<p>p2
	<span>span1</span>
	</p>
	<span>span2</span>
	</div>

	/# 1.儿子选择器(关键符号是大于号)/
	d1 > span {
	/查找id是d1标签内部所有的儿子span/
	color: red;
	}

	/# 2.后代选择器(关键符号是空格)/
	d1 span {
	/查找id是d1标签内部所有的后代span/
	color: red;
	}

	/# 3.毗邻选择器(关键符号是加号)/
	d1 + a {
	/查找id是d1标签同级别下面紧挨着第一个a标签/
	color: red;
	}

	/# 4.弟弟选择器(关键符号是小波浪号)/
	d1 ~ a {
	/查找id是d1标签同级别下面所有a标签/
	color: red;
	}

	<style>
	/第一种情况/
	[username] { /将所有含有属性名是username的标签背景色改为红色/
	background-color: red;
	}

	/第二种情况/
	[username='xiao'] { /找到所有属性名是username并且属性值是xiao的标签/
	background-color: orange;
	}

	/第三种情况/
	input[username='xiao'] { /找到所有属性名是username并且属性值是xiao的input标签/
	background-color: bisque;
	}
	</style>

	/查找id是d1或者class包含c1或者span/
	#d1, .c1, span {
	color: red;
	}

	div#d1 查找id是d1的div标签
	div.c1 查找class包含c1的div标签

	div #d1 查找div内部id是d1的后代标签
	#d1>.c1 查找id是d1的内部class包含c1的儿子标签

	<style>
	a:link{/* 正常状态 */
	color: #f00;/* 红 */
	}
	a:visited{/* 访问过后状态 */
	color: #000;/* 黑 */
	}
	a:hover{/* 鼠标悬停状态 */
	color: gold;/* 黄 */
	}
	a:active{/* 激活状态 */
	color: #0f0;/* 绿 */
	}
	input:focus { /* input输入框获取焦点(input被选中) */
	background-color: blue; /* 蓝 */
	}

	</style>
	<body>
	<a href="http://www.bilibili.com">哔哩哔哩</a>
	<a href="http://www.douyu.com">斗鱼</a>
	<a href="http://www.123.com">123</a>
	<input type="text">
	</body>

	/1.修改首个字体样式/
	p:first-letter {
	color: red;
	font-size: 48px;
	}

	/2.在文本开头添加内容/
	p:before {
	content: '哈哈';
	color: blue;
	}

	/3.在文本结尾添加内容/
	p:after {
	content: '嘿嘿';
	color: yellow;
	}

	## 行内 > id选择器 > 类选择器 > 标签选择器
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>

	<style>
	#d1 {
	color: orange;
	}
	.c1 {
	color: blueviolet;
	}
	p {
	color: red;
	}
	</style>
	<!-- <link rel="stylesheet" href="mycss.css">-->
	</head>
	<body>
	<p id="d1" class="c1" style="color: blue">下一个更乖</p>
	</body>
	</html>

xiao

前端基础之CSS选择器

一、什么是选择器

二、选择器的分类

1、基本选择器

（1）概览

（2）id选择器

（3）类选择器

（4）元素/标签选择器

（5）通用选择器

（6）总体应用实例

2、组合选择器

（1）概览

（2）设置标签关系

（3）样式设计实例

3、属性选择器

（1）概览

（2）实例

4、分组与嵌套

（1）分组

（2）嵌套

（3）综合

玩法1

玩法2

5、伪类选择器

（1）概览

（2）实例

（3）a链接的属性实现顺序

6、伪元素选择器

（1）使用方法

（2）应用场景

三、基本选择器优先级

公告

搜索

常用链接

合集

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

目录