CSS选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Gong_Zheng6/article/details/107333245

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

例中span{}的span为标签选择器，为该html文件中所有span标签添加样式。

标签选择器：浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，其语法如下：

标签选择器名 {

  declaration1;

  declaration2;

    …

}

形式如同上例

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

类选择器名 {
    declaration1;
    declaration2;
    …
}

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>  
	 <style>
       		.x{
       			color: red;
       		}
       </style>
	</head>
	<body>
		<div class="x">class x</div>
                <div class="x">class x</div> 
	</body>
</html>

注意：

1.class标签属性的属性值不能以数字开头；
2.class标签属性的属性值可以有多个，每个值之间用空格间隔；

id选择器：浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，其语法如下：

# id选择器名 {
	declaration1;
	declaration2;
    	…
}

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>  
	 <style>
       		#zzu1{
       			color: red;
       		}
       </style>
	</head>
	<body>
		<div id="zzu1">id zzu1</div>
        <div id="zzu2">id zzu2</div> 
	</body>
</html>

注意：

1.id标签属性的属性值不能以数字开头；
2.id标签属性的属性值在HTML文档中必须唯一；class标签属性的属性值可以不唯一；

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

父代选择器1 子父代选择器2 子父代选择器3 …子代选择器 {
	declaration1;
	declaration2;
    	…
}

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>  
	 <style>
       		ol #z #i{
       			color: red;
       		}
       </style>
	</head>
	<body>
		<ol>
			<li id="x">x</li>
			<li id="y">y</li>
			<ol id="z">
				<li id="i">w</li>
				<li id="ii">j</li>
			</ol>
		</ol>
	</body>
</html>

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

选择器1,选择器2,选择器3…{
	declaration1;
	declaration2;
    …
}

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>  
	 <style>
       		ol,#iii,.z{
       			color: red;
       		}
       </style>
	</head>
	<body>
		<ol>
			<li id="x">x</li>
			<li id="y">y</li>
			<ol id="z">
				<li id="i">w</li>
				<li id="ii">j</li>
			</ol>
		</ol>
		<span id="iii">span id</span><br />
		<span class="z">span class</span>
	</body>
</html>

通配符选择器：

通配符选择器匹配HTML文档中的任何HTML元素，其语法如下：

*{
	declaration1;
	declaration2;
    	…
}

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>  
	 <style>
       		*{
       			color: red;
       		}
       </style>
	</head>
	<body>
		<ol>
			<li id="x">x</li>
			<li id="y">y</li>
			<ol id="z">
				<li id="i">w</li>
				<li id="ii">j</li>
			</ol>
		</ol>
		<span id="iii">span id</span><br />
		<span class="z">span class</span>
		<div>div</div>
	</body>
</html>

CSS选择器总结