CSS 选择器

最新推荐文章于 2023-12-13 17:58:37 发布

qq_37175053

最新推荐文章于 2023-12-13 17:58:37 发布

阅读量1.1k

点赞数 6

分类专栏： CSS 文章标签： CSS 选择器

本文链接：https://blog.csdn.net/qq_37175053/article/details/94339934

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. CSS 选择器

1.1 基出选择器

基础选择器：标签选择器、id 选择器、类选择器和通配符选择器。

以下是基础选择器的示例代码：
1.标签选择器、id 选择器、类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		/*标签选择器*/

		p{
			font-size: 50px;
			color: red;
			height: 100px;
		}
		/*类选择器*/
		.W{
			font-size: 50px;
			color: green;
			text-indent: 2em;
		}
		/*ID选择器*/
		/*一个ID选择器只能在一个页面调用一次*/
		#M{
			font-size: 50px;
			color: pink;
            width: 200px;
            height:100px;
		}
	</style>

</head>
<body>
	<p>世界通史</p>
	<p>菜根谭</p>
	<div class="W">百年孤独</div>
	<div id="M">人间词话</div>
	<span class="W" >老人与海</span>
	<br>
	<span class="W" id="M">巴黎圣母院</span>
	
</body>
</html>

2.通配符选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS选择器练习</title>
	<style type="text/css">
		*{
			font-size: 50px;
			color: red;
			text-indent: 2em;
		}
		span{
			display: inline-block;
		}
	</style>
</head>
<body>
	<div >计算机</div>
	<div>应用数学</div>
	<P>CSS选择器</P>
	<P>CSS选择器</P>
	<span>前端</span>
</html>

1.2 复合选择器

复合选择器：交集选择器、并集选择器、后代选择器和子代选择器。

1.交集选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>交集选择器</title>
	<!-- 标签+类、ID选择器{属性:值；} -->
	<!-- 既要满足标签还要满足使用的id或类选择器 -->
	<style type="text/css">
		.box{
			font-size: 50px;
		}
		div.box{
			color: red;
		}
		#miss{
			color: red;
		}
		div#miss{
			width: 200px;
			height: 60px;
			font-size: 50px;
			background-color: yellow;
		}
	</style>
</head>
<body>
	<div class="box">高级程序设计</div>
	<p class="box">穆斯林的葬礼</p>
	<div id="miss">人间词话</div>
</body>
</html>

2.并集选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>并集选择器</title>
	<style type="text/css">
		
		.box,#fox,span,h1{
			font-size: 50px;
			background-color: #00ff00;
			color: yellow;
		}

	</style>
</head>
<body>
	<div class="box">人间词话</div>
	<p id="fox">人性的优点</p>
	<span>人性的弱点</span>
	<h1>语言的突破</h1>
</body>
</html>

3.后代选择器，元素的所有后代，包含元素后代的后代：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<!-- 标签+空格+标签{ 属性：值} -->
	<style type="text/css">
		div p span{
			font-size: 50px;
			color: red;
		}

		.box p span{
			font-size: 80px;
			color: green;
		}

		#frist span{
			font-size: 120px;
			color: blue;
		}

	</style>
</head>
<body>
	<div>
		<p><span>亨利之书</span></p>
	</div>

	<article class="box">
		<p><span>会计刺客</span></p>
	</article>

	<div id="frist">
		<p><span>一个明星的诞生</span></p>
	</div>

</body>
</html>

4.子代代选择器，只包含元素的直接后代，不包含元素后代的后代：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后代选择器</title>
	<!-- 标签+空格+标签{ 属性：值} -->
	<style type="text/css">
		div p span{
			font-size: 50px;
			color: red;
		}

		.box p span{
			font-size: 80px;
			color: green;
		}

		#frist span{
			font-size: 120px;
			color: blue;
		}

	</style>
</head>
<body>
	<div>
		<p><span>亨利之书</span></p>
	</div>

	<article class="box">
		<p><span>会计刺客</span></p>
	</article>

	<div id="frist">
		<p><span>一个明星的诞生</span></p>
	</div>

</body>
</html>

1.3 属性选择器：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		input[type=text][id=one]{
			height: 20px;
			background: pink;
			/* 取消边框线 */
  			border-style: none;
		}
	</style>
</head>
<body>
	文本输入框：<input type="text" value="text">
	<br>
	文本输入框：<input type="text" value="text" id="one">
	<br>
	密码输入框：<input type="password" >
	<br>
	普通按钮：<input type="button" value="button">
	<br>
	表单提交按钮：<input type="submit" value="submit">
	<br>
</html>