2021-08-03

最新推荐文章于 2021-11-10 17:26:45 发布

李王一

最新推荐文章于 2021-11-10 17:26:45 发布

阅读量37

点赞数

本文链接：https://blog.csdn.net/weixin_51081867/article/details/119352747

版权

复合选择器

1.后代选择器
2.子选择器
3.并集选择器
4.伪类选择器
5.:focus选择器

1.后代选择器

选择父元素里的子元素，可以是基础选择器里的任意组合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
		<style type="text/css">
			ol li {
				
			}
			ul li span {
				
			}
		</style>
	</head>
	<body>
		<ol>
			<li></li>
		</ol>
		<ul>
			<li><span></span></li>
		</ul>
	</body>
</html>

2.子选择器

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#banner>p {
				color: #ADFF2F;
			}
		</style>
	</head>
	<body>
		<div id="banner">
			<p>1</p>
			<span>
				<p>2</p>
			</span>
		</div>
	</body>
</html>

3.并集选择器

为多组标签定义相同样式，个选择器间用逗号隔开
如：

<style type="text/css">
			div,p {
				color: #ADFF2F;
			}
		</style>

4.伪类选择器

链接伪类：尽量按照 lvha 的顺序
a:link : 选择所有未被访问链接
a:visited : 选择所有已经被访问链接
a:hover : 选择鼠标指针经过
a:active : 选择鼠标一直按下未松开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a:link{
				color: #7D7D7D;
				text-decoration: none;
			}
			a:visited{
				color: hotpink;
			}
			a:hover{
				color: red;
			}
			a:active{
				color: green;
			}
		</style>
	</head>
	<body>
		<a href="www.baidu.com">hello world</a>
	</body>
</html>

5.:focus选择器

:focus表单选取焦点:
input:focus{
}
如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input:focus{
				color: red;
				background-color: #7D7D7D;
			}
		</style>
	</head>
	<body>
		<input type="text" name="" id="" value="1" />
		<input type="text" name="" id="" value="2" />
		<input type="text" name="" id="" value="3" />
	</body>
</html>

李王一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-03

复合选择器1.后代选择器2.子选择器3.并集选择器4.伪类选择器5.:focus选择器1.后代选择器选择父元素里的子元素，可以是基础选择器里的任意组合<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ol li { } ul li span
复制链接

扫一扫