css chooser

本文链接： https://blog.csdn.net/weixin_45104211/article/details/101479269

选择起作用

浏览器通过选择器为符合条件的Html元素添加CSS样式

部分选择器类型

标签选择器

浏览器会根据标签选择器中的标签选择HTML全部的该标签，并将其样式属性进行修改；如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{
				text-align: center;
				border:1px solid black ;
			}
		</style>
	</head>
	<body>
		<p>My Csdn</p>
		<p>Come on</p>
	</body>
</html>

类选择器

在Html中的标签可以将其归属特定的类，供选择器选择

一个标签的class的属性值可以多个（需要使用空格键间隔）

选择器的样式需要使用“.类名”进行调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{
				text-align: center;
				border:1px solid black ;
			}
			.last{
				border:1px solid red ;
			}
		</style>
	</head>
	<body>
		<p>My Csdn</p>
		<p>Come on</p>
		<p class="last begin">Let‘s begin</p>
	</body>
</html>

ID选择器

在Html中的标签可以将其归属特定的ID，供选择器选择

注：ID的属性值必须唯一，不可以重复

选择器格式：”#类名”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			p{
				text-align: center;
				border:1px solid black ;
			}
			.last{
				border:1px solid red ;
			}
			#times{
				border:1px solid wheat ;
			}
		</style>
	</head>
	<body>
		<p>My Csdn</p>
		<p>Come on</p>
		<p class="last begin" >Let‘s begin</p>
		<p id="times">Welcome yours</p>
	</body>
</html>

分组选择器

一次对多个选择器进行样式附加：从而起到简化代码的作用

p,.baidu{
                text-align: center;
                border:1px solid black ;
            }



<a target="_blank" href="https://www.baidu.com/?tn=06074089_18_pg&ch=7" class="baidu" >百度一下，你就知道</a>

后代选择器
通过父代选择器的迭代寻找子代选择器的方法

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {

declaration1;

declaration2;

……….

}

如：

html body .test{
				border: 1px solid red;
			}

其中的 HTML即为父类选择器（注：标签选择器）

统配选择器

对所有的标签进行选择

格式 *{

declaration1;

declaration2;

………….

}

*{
				padding: 0px;
				margin: 0px;
			}

对所有的标签进行操作：是所有的标签对齐

选择器的优先级

我们可以很简单的看出，上述选择器中除了统配选择器之外，其余的六种选择器的最终表现形式即为：标签选择器、类选择器、ID选择器；所以研究以上选择器的优先级十分有意义；

如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		 #Csdn{
		 	border: 1px solid red;
		 	text-align: center;
		 }
		 p{
		 	border: 1px solid wheat;
		 }
		</style>
	</head>
	<body>
		<p id="Csdn">My Csdn</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		 #Csdn{
		 	border: 1px solid red;
		 	text-align: center;
		 }
		 p{
		 	border: 1px solid wheat;
		 }
		 .compare{
		 	border: 1px solid black;
		 }
		</style>
	</head>
	<body>
		<p id="Csdn" class="compare">My Csdn</p>
	</body>
</html>

上述两段代码均为如下结果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		 p{
		 	border: 1px solid wheat;
		 }
		 .compare{
		 	border: 1px solid black;
		 	text-align: center;
		 }
		</style>
	</head>
	<body>
		<p class="compare">My Csdn</p>
	</body>
</html>

结果如下：

结论：ID选择器（#选择器名字）>类选择器（.选择器名字）>标签选择器

猜你喜欢