选择器

最新推荐文章于 2022-07-28 11:20:26 发布

Happy_syy

最新推荐文章于 2022-07-28 11:20:26 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/Happy_syy/article/details/101715773

版权

1.什么是选择器？
选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式。
2.标签选择器
浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，其语法如下：
标签选择器名 {
declaration1;
declaration2;
…
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>选择器</title>
		<style>
			a {
				text-decoration: none;  /*a为标签选择器，
				此时浏览器会为HTML文档内所有a标签元素添加“text-decoration: none;”CSS样式。*/
			}
		</style>
	</head>
	<body>
		<a href="http://www.jd.com">京东</a>
		<a href="https://www.vip.com">唯品会</a>
	</body>
</html>

3.类选择器：
浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式，其语法如下：
. 类选择器名 {
declaration1;
declaration2;
…
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>类选择器</title>
		<style type="text/css">
			.center {
				border:1px solid red;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<p class="center">添加边框且居中显示</p>
		<p class="center">添加边框且居中显示</p>
	</body>
</html>

注意：
①class标签属性的属性值不能以数字开头；
②class标签属性的属性值可以有多个，每个值之间用空格间隔；
4.id选择器：
浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，其语法如下：
# id选择器名 {
declaration1;
declaration2;
…
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>id选择器</title>
		<style type="text/css">
			#font_size {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<p id="font_size">文字大小24像素</p>
	</body>
</html>

注意
id标签属性的属性值不能以数字开头；
id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；
5.后代选择器（descendant selector）又称为包含选择器，
用于为特定的HTML子元素添加CSS样式，语法如下：
父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 {
declaration1;
declaration2;
…
}

6.如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码，该选择器的选择器名由多个选择器组成，使用逗号分隔，其语法如下：
选择器1,选择器2,选择器3…{
declaration1;
declaration2;
…
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分组选择器</title>
		<style>
			/*#numbers{
				color: red;
			}
			.letters{
				color: red;
			}*/
			
			/*上面CSS用于数字或字母的颜色设置为红色，但代码冗余！*/
			#numbers,.letters{
				color: red;
			}
		</style>
	</head>
	<body>
		<p id="numbers">9527</p>
		<h3 class="letters">Traveler</h3>
	</body>
</html>

7.通配符选择器匹配HTML文档中的任何HTML元素，其语法如下：
*{
declaration1;
declaration2;
…
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			/*取消标签默认margin与padding值*/
			*{
				margin:0px;
				padding:0px;
			}
		</style>
	</head>
	<body>
		<p style="border:1px solid red;">海上生明月，天涯共此时。</p>
	</body>
</html>