css复合选择器

最新推荐文章于 2024-03-07 00:02:51 发布

nick665544

最新推荐文章于 2024-03-07 00:02:51 发布

阅读量224

点赞数

分类专栏： css基础记录文章标签： css html css3

本文链接：https://blog.csdn.net/nick665544/article/details/126946079

版权

css基础记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在css中，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器

（1）后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法格式：

元素1 元素2 { 样式声明 }
例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ol li{
				color: #00BFFF;
			}
		</style>
	</head>
	<body>
		<ol>
			<li>我属于ol</li>
			<li>我属于ol</li>
		</ol>
	     <ul>
	     	<li>我属于ul</li>
	     	<li>我属于ul</li>
	     </ul> 
	</body>
</html>

结果图：

我属于ol
我属于ol

我属于ul
我属于ul

例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ol li{
				color: #00BFFF;
			}
			ol li a{
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<ol>
			<li>我属于ol</li>
			<li>我属于ol</li>
			<li><a href="#">我属于ol里面的li</a></li>
		</ol>
	     <ul>
	     	<li>我属于ul</li>
	     	<li>我属于ul</li>
	     </ul> 
	</body>
</html>

结果图2：

我属于ol
我属于ol
我属于ol里面的li

我属于ul
我属于ul

（2）子选择器

子选择器只能选择作为某元素的最近一级子元素

语法格式：

元素1>元素2 { 样式声明 }
元素1和元素2中间用大于号隔开

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul>li{
				color: #00BFFF;
			}
		</style>
	</head>
	<body>
	     <ul>
	     	<li>我属于ul</li>
	     	<ol>
	     	<li>我属于ul</li>
	     	</ol>
	     </ul> 
	     
	</body>
</html>

结果图：

我属于ul
1. 我属于ul

（3）并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式

并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法格式：

元素1，元素2 { 样式声明 }
例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div,p{
				color: #00BFFF;
			}
			ul,li{
				color: brown;
			}
		</style>
	</head>
	<body>
	     <div>喜羊羊</div>
	     <p>懒羊羊</p>
	     <ul>
	     	<li>灰太狼</li>
	     	<li>红太狼</li>
	     	<li>小灰灰</li>
	     </ul>
	</body>
</html>

结果图:

喜羊羊

懒羊羊

灰太狼
红太狼
小灰灰

(4) 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大特点是用冒号表示，伪类选择器有很多，由链接伪类，结构伪类。

链接伪类选择器

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
为了确保生效，请按照LVHA的顺序声明:link-:visited-:hover-:active

:focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素，焦点就是光标，一般情况下类表单元素才能获取。因此这个选择器也主要针对于表单元素。

input：focus {
background-color：blue
}

nick665544

关注

0
点赞
踩
0

收藏

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

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大特点是用冒号表示，伪类选择器有很多，由链接伪类，结构伪类。:focus伪类选择器用于选取获得焦点的表单元素，焦点就是光标，一般情况下类表单元素才能获取。并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。在css中，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器。
复制链接

扫一扫

专栏目录