CSS选择器

最新推荐文章于 2023-12-12 09:35:39 发布

碵蝎

最新推荐文章于 2023-12-12 09:35:39 发布

阅读量313

点赞数

分类专栏： css/css3

本文链接：https://blog.csdn.net/QQ408896436/article/details/52744561

版权

css/css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基本选择器

* 通配选择器

使用了该选择器，页面上的所有元素都会包含此选择器中的样式。如：

*{background: #000; margin: 0; padding: 0;}

E元素选择器

使用标签名来选择元素，如：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		span{font-size: 100px;}
	</style>
</head>
<body>
	<span>123</span>
</body>
</html>

#id id选择器

使用id来选择元素。如：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{font-size: 100px;}
	</style>
</head>
<body>
	<span id='box'>123</span>
</body>
</html>

.class 类选择器

使用类名来选择元素。如：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{font-size: 100px;}
	</style>
</head>
<body>
	<span class='box'>123</span>
</body>
</html>

selectorI,selectorN群组选择器

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box,#box,p{font-size: 100px;}
	</style>
</head>
<body>
	<span class='box'>1</span>
	<span id='box'>2</span>
	<p>3</p>
</body>
</html>

E F 后代选择器

选取E元素里的F后代元素，如：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box p{font-size: 100px;}
	</style>
</head>
<body>
	<div id='box'>
		<p>123</p>
	</div>
</body>
</html>

E > F 子选择器
选取E元素里的F子元素，如：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box > p{border: 1px solid red;}
	</style>
</head>
<body>
	<div class='box'>
		<p>1</p>
		<div class='pox'>
			<p>2</p>
		</div>
	</div>
</body>
</html>

只有1被选中了，而2没被选中。说明了该选择器选择的是它的子元素，而不是后代元素。这也是它与后代选择器的区别。

E + F 相邻兄弟选择器

选取E元素后面的F元素，并且F元素是E元素的相邻节点。如：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box + div{color: red;}
	</style>
</head>
<body>
	<div class='pox'>0</div>
	<div class='box'>1</div>
	<div class='pox'>2</div>
</body>
</html>

E ~ F 通用选择器

略

伪类选择器

伪类选择器器可以分成6种：

动态伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器、结构伪类选择器、否定伪类选择器。

动态伪类选择器包括：

E :link 链接还没被访问过的样式

E:visited 链接被访问过的样式

E:active 鼠标点击链接触发样式

E:hover 鼠标经过元素触发样式

E:focus 元素获得焦点时触发样式，如input输入框被激活时。

目标伪类选择器

E:target 选择匹配E元素下，正在被触发的元素。类似与JS中，给按钮加点击事件，然后用this来选取正在被触发的按钮。this与改target类似。如：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box :target a{font-size: 50px; color: red;}
	</style>
</head>
<body>
	<div class='box'>
		<div class='pox' id='pox1'>
			<a href="#pox1">pox1</a>
		</div>
		<div class='pox' id='pox2'>
			<a href="#pox2">pox2</a>
		</div>
	</div>
</body>
</html>

使用这一特性，可以制作一个手风琴的效果。如：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{margin:0px; font-size:12px; font-family: '微软雅黑';}
		ul,ol,h1,h2,h3,h4,h5,h6,dl,dd,p,form{margin:0px; padding:0px;}
		ul,ol{list-style-type:none;}
		a{text-decoration: none; color: #fff; display: block;}
		.book{width: 500px;}
		.page{margin-bottom: 5px;}
		.book h2{height: 35px; line-height: 35px; background: #B0B0B0; }
		.book p{height: 0; overflow: auto; -webkit-transition: height 0.5s ease;}
		.book :target h2,.book :hover h2{ background: #429BEC; }
		.book :target p{ height: 100px; }
	</style>
</head>
<body>
	<div class='book'>
		<div class='page' id='page1'>
			<h2><a href="#page1">page1</a></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div class='page' id='page2'>
			<h2><a href="#page2">page2</a></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
		<div class='page' id='page3'>
			<h2><a href="#page3">page3</a></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
</body>
</html>

碵蝎

关注

0
点赞
踩
0

收藏

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

基本选择器包括：* 通配选择器E 元素选择器#id id选择器.class 类选择器selectorI,selectorN 群组选择器E F 后代选择器E > F 子选择器E + F 相邻兄弟选择器E ~ F 通用选择器* 通配选择器使用了该选择器，页面上的所有元素都会包含此选择器中的样式。如：*{background: #000;
复制链接

扫一扫