CSS选择器

最新推荐文章于 2024-11-09 19:20:14 发布

Wwwwww~

最新推荐文章于 2024-11-09 19:20:14 发布

阅读量79

点赞数

文章标签： css

本文链接：https://blog.csdn.net/bravery__/article/details/107333364

版权

选择器：

浏览器通过选择器为满足条件的HTML元素添加CSS样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<style>
			span{
				color: #87CEEB;
				font-family: 华文行楷;
			}
		</style>
	</head>
	<body>
		<span>郑州大学</span>
        </body>

span为标签选择器，此时浏览器会为HTML文档内所有a标签元素添加color,font-family CSS样式。

--标签选择器：浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<style>
			b{
				color: #87CEEB;
				font-family: 华文行楷;
			}
		</style>
	</head>
	<body>
		<b>郑州大学</b>
        </body>

浏览器会为HTML文档内所有b标签元素添加“color: #87CEEB;font-family: 华文行楷;”CSS样式。

--类选择器：浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<style>
			.u{
				color: #87CEEB;
				font-family: 华文行楷;
			}
		</style>
	</head>
	<body>
		<span class="u">文字大小</span>
                <span class="u">文字颜色</span>
        </body>

注意：

1.class标签属性的属性值不能以数字开头

2.class标签属性的属性值可以有多个，每个值之间用空格间隔；

--id选择器：浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<style>
			#u{
				color: #87CEEB;
				font-family: 华文行楷;
			}
		</style>
	</head>
	<body>
		<span id="u">文字大小</span>
                <span id="u">文字颜色</span>
        </body>

注意：

1.class标签属性的属性值不能以数字开头

2.id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；

--后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<style>
			html body .u{
				color: blue;
				font: "微软雅黑";
			}
		</style>
	</head>
	<body>
		<span class="u">文字大小</span>
                <span class="u">文字颜色</span>
        </body>

只为html下body中class="u"的子元素添加CSS样式

--分组选择器：如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码，该选择器的选择器名由多个选择器组成，使用逗号分隔。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<style>
			#id .u{
				color: blue;
				font: "微软雅黑";
			}
		</style>
	</head>
	<body>
		<span class="u">文字大小</span>
                <span id="id">文字颜色</span>
        </body>

--通配符选择器：匹配HTML文档中的任何HTML元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
		</style>
	</head>
	<body>
		<p style="border: 1px solid red;">花有重开日，人无再少年</p>
        </body>

选择器优先级：

id选择器 > 类选择器 > 标签选择器