CSS选择器

最新推荐文章于 2024-07-22 20:38:06 发布

AnFooo

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量161

点赞数 1

分类专栏： Java Web

本文链接：https://blog.csdn.net/DangerousMc/article/details/101453503

版权

Java Web 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

2.id选择器的执行顺序高于类选择器，类选择器的执行顺序高于标签选择器。

3.后代选择器的路径中空格问题

一.选择器

选择器是用来为浏览器执行HTML代码时提供选择的，例如如下这段代码，当浏览器执行时，要在浏览器中显示body标签中的span标签中的内容“CSS选择器”，这时由于第6行的style标签中有一个选择器，所以浏览器会将选择器中提供的选择加到选择器指定的内容上去，也就是最后打印结果会是将“CSS选择器”的颜色变为绿色，执行结果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			span{
				color: green;
			}
		</style>
	</head>
	<body>
		<span>CSS选择器</span>
	</body>
</html>

二.选择器的分类

1.标签选择器

标签选择器就是直接在style标签中直接写你要添加选择的标签名即可，格式为:标签名

上面的那个例子使用的就是标签选择器，为span标签添加的选择器。

2.id选择器

标签选择器的作用是将该文件中所有被该标签包裹的内容改为指定显示规格，但这时如果只想为其中的一个被该标签包裹的内容设置显示规格呢？这时就可以使用id选择器，就是为目标内容设置一个id，然后在style标签中使用id选择器为该id对应的内容添加显示规格，id选择器的格式：#id标签属性值

使用示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#green_txt{
				color: green;
			}
		</style>
	</head>
	<body>
		<span>CSS选择器</span>
		<br />
		<span id="green_txt">CSS选择器</span>
	</body>
</html>

由于只为第二个“CSS选择器”设置了id，这时浏览器中的内容只会将id选择器指定的内容显示成绿色，执行结果如下：

3.类选择器

类选择器，顾名思义就是可以将一类内容都添加到选择器中，来设置显示规格，使用方式就是将目标内容的class类名都设置成同一个类名，这时在style标签中将这一类内容添加到选择器中，类选择器的格式：.class标签属性值

使用示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.blue_txt{
				color: blue;
			}
		</style>
	</head>
	<body>
		<b class="blue_txt">CSS</b>
		<br />
		<i class="blue_txt">选择器</i>
	</body>
</html>

由于“CSS”和“选择器”的class类名都为blue_text，所以浏览器在执行类选择器时会将这两个内容都显示成蓝色字体，执行结果如下:

4.分组选择器

当你要为多个不同标签的内容设置相同的选择器的时候，可以分别将所有的标签依次写成标签选择器，但这样做非常麻烦，因为这些内容要设置的选项都是一样的，所以这时可以使用分组选择器，他可以将多个标签或者id、类归并到一起设置相同的选项。

使用示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.blue_txt,#dd,del{
				color: blue;
			}
		</style>
	</head>
	<body>
		<b class="blue_txt">CSS</b>
		<br />
		<i class="blue_txt">选择器</i>
		<br />
		<span id="dd">CSS选择器</span>
		<br />
		<del>说的好听</del>
	</body>
</html>

执行结果如下：

5.通配符选择器

通配符选择器的作用会将文件中所有的内容都加入到选择器中，使用示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				color: blue;
			}
		</style>
	</head>
	<body>
		<b class="blue_txt">CSS</b>
		<br />
		<i class="blue_txt">选择器</i>
		<br />
		<span id="dd">CSS选择器</span>
		<br />
		<del>说的好听</del>
	</body>
</html>

运行结果如下：

6.后代选择器

后代选择器类似于文件的目录路径，可以用于为指定路径的内容精确设置选择器。

使用示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*后代选择器*/
			html body b.blue_txt{
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<b class="blue_txt">CSS</b>
		<br />
		<i class="blue_txt">选择器</i>
	</body>
</html>

虽然“选择器”也是类名为“blue_txt”的内容，但是由于后代选择器已经指定了精确的设置目录，所以只有“CSS”的内容才会显示黄绿色字体，执行结果如下：

三.选择器使用的注意事项

1.id选择器在使用中id不能重复

所以id选择器一次最多只能指定一个内容添加选择器。

2.id选择器的执行顺序高于类选择器，类选择器的执行顺序高于标签选择器。

也就是说，当一个内容同时被id选择器、类选择器、标签选择器包含，浏览器则会优先选择id选择器中内容，然后是类选择器，最后才是标签选择器，以下时代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			b{
				color: green;
			}
			
			.blue_txt{
				color: blue;
			}
			
			#red_txt{
				color: red;
			}
		</style>
	</head>
	<body>
		<b class="blue_txt" id="red_txt">id选择器</b>
		<br />
		<b class="blue_txt">类选择器</b>
		<br />
		<b>标签选择器</b>
	</body>
</html>

执行结果如下：

3.后代选择器的路径中空格问题

父代和子代的选择器中要用空格断开，但是如果在双标签（如b、i标签）中的子代选择器为id或类选择器，则不能加空格，如下代码中在b和.class中间加入了空格，则浏览器中该内容添加的选择器便失效了：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*后代选择器*/
			html body b .blue_txt{
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<b class="blue_txt">CSS</b>
		<br />
		<i class="blue_txt">选择器</i>
	</body>
</html>

AnFooo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

一.选择器选择器是用来为浏览器执行HTML代码时提供选择的，例如如下这段代码，当浏览器执行时，要在浏览器中显示body标签中的span标签中的内容“CSS选择器”，这时由于第6行的style标签中有一个选择器，所以浏览器会将选择器中提供的选择加到选择器指定的内容上去，也就是最后打印结果会是将“CSS选择器”的颜色变为绿色，执行结果如下：<!DOCTYPE html><...
复制链接

扫一扫

专栏目录