CSS选择器

最新推荐文章于 2024-07-22 20:38:06 发布

小脑斧123

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量108

点赞数

分类专栏： Pyhon高级

本文链接：https://blog.csdn.net/weixin_42219287/article/details/106886727

版权

Pyhon高级专栏收录该内容

75 篇文章 0 订阅

订阅专栏

1、标签选择器

2、ID选择器

3、类选择器

4、层级选择器

5、组选择器

6、伪类及伪元素选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{
			color: red;
		}

		/*1、标签选择器*/
		p{
			color: blue;
		}

		/*2、id选择器*/
		#div1{
			color: green;
		}

		/*3、类选择器*/
		.orange{
			color: orange;
		}

		.big{
			font-size: 40px;
		}

		/*4、层级选择器:最好不要超过四层class*/
		.box{
			font-size: 20px;
			line-height: 30px;
			text-indent: 40px;
		}

		.box span{
			color: green;
			font-weight: bold;
		}
		
		.box em{
			font-style: normal;
			text-decoration: underline;
			font-weight: bold;
			color: blue;
		}

		.box .span02{
			color: black;
		}


	</style>
</head>
<body>
	<div id="div1" class="big">这是第一个div</div>
	<div class="orange big">这是第二个div</div>
	<p class="big">这是第一个p</p>
	<div class="box">你可以将类<span>fancy</span>分配给任何一个表格元素任意多的次数。那些以<em>fancy</em>标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为fancy的类的单元格不会受这条规则的影响。还有一点值得注意，class为<span class="span02">fancy</span>的段落也不会是带有灰色背景的橙色，当然，任何其他被标注为fancy的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式，这个效果被限制于被标注为fancy的表格单元（即使用td元素来选择fancy类）。</div>
</body>
</html>

5、组选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>层级选择器</title>
	<style type="text/css">
		/*组选择器逗号隔开，选择共同的样式（层级选择器是空格隔开）*/
		.box01,.box02,.box03{
			font-size: 20px;
			text-indent: 40px;
			font-weight: bold;
		}

		.box01 span{
			color: red;
		}

		.box02 p{
			color: green;
		}

		.box03 em{
			color: blue;
		}

	</style>
</head>
<body>
	<div class="box01">这是第一个<span>div</span></div>
	<div class="box02">这是第二个<p>div</p></div>
	<div class="box03">这是第三个<em>div</em></div>
</body>
</html>

6、伪类及伪元素选择器

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style type="text/css">
		.link{
			font-size: 30px;
			text-decoration: none;
			color: pink;
		}
		
		/*伪类*/
		.link:hover{
			color: green;
			font-weight: blod;
			font-style: italic;
		}

		.box01,.box02{
			font-size: 20px;
		}
		
		/*伪元素*/
		.box01:before{
			content:"*";  /*塞进去的东西前端无法被选中*/
			color: red;
		}

		.box02:after{
			content:"。";  /*塞进去的东西前端无法被选中*/
			color: red;
		}



	</style>
</head>
<body>
	<a href="www.baidu.com" class="link">百度一下</a>>
	<div class="box01">这是第一个div</div>
	<div class="box02">这是第二个div</div>
</body>
</html>