CSS选择器二（高级选择器）

最新推荐文章于 2023-05-13 16:30:42 发布

不言尘世

最新推荐文章于 2023-05-13 16:30:42 发布

阅读量291

点赞数 1

分类专栏：前端开发文章标签： css高级选择器

本文链接：https://blog.csdn.net/weixin_43599377/article/details/96021111

版权

前端开发专栏收录该内容

33 篇文章 2 订阅

订阅专栏

今天来整理一下剩下的四个高级选择器
高级选择器
后代选择器：用空格隔开
伪类选择器
父子选择器
组合选择器（分组选择器）：用逗号隔开

1后代选择器，规定用空格隔开
后代选择器，描述的是祖先结构
直接看例子吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后代选择器</title>
		<style type="text/css">
			#name1 p{
				color: red;
			}
			#name1 p font{
				color: green;
			}
		</style>
	</head>
	<body>
		<div id="name1">
			<p>我是后代
				<font>我是后代的后代</font>
			</p>
			
		</div>
	</body>
</html>

2伪类选择器
对于标签，其对应几种不同的状态：

link：超链接点击之前
visited：超链接点击之后
hover：鼠标放到某个标签上的时候
active：点击某个标签没有松鼠标时
CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：

静态伪类：只能用于超链接
动态伪类：针对所有标签都适用
下面来分别讲一下这两种伪类选择器。
（1）静态伪类选择器
用于以下两个状态（只能使用于超链接）：

link：超链接点击之前
visited：超链接点击之后

<html>
	<head>
		<meta charset="UTF-8">
		<title>静态伪类选择器</title>
		<style type="text/css">
			a:link{
				/*点击之前是红色的*/
				color: red;
			}
			a:visited{
				/*点击后是绿色的*/
				color: green;
			}
			a:hover{
				color: blue;
			}
		</style>
	</head>
	<body>
		<a href="ffff">我是超链接</a>
	</body>
</html>

（2）动态伪类选择器

<html>
	<head>
		<meta charset="UTF-8">
		<title>静态伪类选择器</title>
		<style type="text/css">
			
			a:visited{
				/*点击后是绿色的*/
				color: green;
			}
			/*鼠标悬停*/
			a:hover{
				/*鼠标悬停的样式*/
				cursor: hand;
				color: blue;
			}
			/*鼠标按下的效果*/
			a:active{
				color: palevioletred;
			}
			
		</style>
	</head>
	<body>
		<a href="ffff">我是超链接</a>
	</body>
</html>

3 父子选择器
作用在：子选择器上
写法：
父选择器>子选择器
{
css属性1：值;
css属性2：值;
}

		/*父子选择器*/
	    ul>li{
			color: red;
			background-color: green;
		}
		
		ol>li{
			color: green;
			background-color: red;
		}
		
		#ul1>li{
			color: orange;
			background-color: gray;
			float: left;
			list-style: none;
			width: 80px;
		}

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

4群组选择器
多种类型的选择器，使用逗号分隔，写在一块

	/*组合选择器*/
			span,a,font,.first_class,#div1 p{
				display: block;
				width: 200px;
				height: 200px;
				border: 1px solid;
			}

CSS优先级

标签自带样式< 通配符选择器< 标签选择器 < 类选择器 < Id选择器< 行内样式
注意：覆盖相同的CSS属性，
权重值来确定优先级
标签自带样式< 通配符选择器< 标签选择器 < 类选择器 < Id选择器< 行内样式
0 1 10 1000 最高
注意：
A. 基础选择性可以采用第一种方式
B. 权重值来判断【权重越大，优先级越高】
C. 权重值相等的时候，写在后面的高于写在前面的样式
.dd p{
color: blue;
}
```
   div .pp{
   	color: green;
   }
```

D. 参考链接：https://www.cnblogs.com/cnblogs-jcy/p/8574177.html

不言尘世

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS选择器二（高级选择器）

今天来整理一下剩下的四个高级选择器高级选择器后代选择器：用空格隔开伪类选择器父子选择器组合选择器（分组选择器）：用逗号隔开1后代选择器，规定用空格隔开后代选择器，描述的是祖先结构直接看例子吧<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>后...
复制链接

扫一扫