HTML——选择器（1）

最新推荐文章于 2022-10-01 21:58:01 发布

Jhinhua

最新推荐文章于 2022-10-01 21:58:01 发布

阅读量151

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/piduocheng0577/article/details/104899388

版权

Web前端专栏收录该内容

72 篇文章 2 订阅

订阅专栏

选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 全局选择器 */
			*{
				background-color: palegoldenrod;
			}
			/* 根选择器 */
			:root{
				border: paleturquoise 2px dashed;
			}
			/* id选择器 */
			#page{
				color: palevioletred;
			}
			/* 类选择器 */
			.sun{
				border: solid 2px hotpink;
			}
			.box{
				background-color: mediumpurple;
			}
			
			/* 属性选择器 */
			/* p[title]{
				color: blue;
			} */
			/* p[title="voice"]{
				color: purple;
			} */
			p[class][id]{
				/* 切圆角 */
				/* 就是在四个角 生层一个半径为20的内切圆 然后按照圆弧切圆角 */
				border-radius: 20px;
			}
		</style>
	</head>
	<body>
		<p title="voice">岱宗夫如何？齐鲁青未了。</p>
		<p id="page">造化钟神秀，阴阳割昏晓。</p>
		<p class="box sun" id="main">荡胸生曾云，决眦入归鸟。</p>
		<p class="sun">会当凌绝顶，一览众山小。</p>
		<p title="artical">会当凌绝顶，一览众山小。</p>
		
		<div title="append">
			会当凌绝顶，一览众山小。
		</div>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 否定选择器 */
			/* li:not(.pear){
				color: red;
			} */
			/* li:not(#orange){
				color: green;
			} */
			/* 识别不到 显示不了 */
			/* li:not(li[name="you"]){
				color: purple;
			} */
			/* 空节点选择器： 只有标签没有内容 */
			/* :empty{
				border: solid 2px plum;
			} */
			/* li:empty{
				border: solid 2px plum;
			} */
			
			/* li:first-child{
				color: deepskyblue;
			} */
			
			/* li:last-child{
				color: deeppink;
			} */
			
			/* li:nth-child(3){
				color: peru;
			} */
			
			li:nth-child(even){
				color: red;
			}
			
			li:nth-child(odd){
				color: blue;
			}
			
			/* 组合选择器 */
			/* p{
				background-color: red;
				color: white;
			}
			div{
				background-color: red;
				color: white;
			} */
			p,div{
				background-color: red;
				color: white;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li class="pear">大鸭梨</li>
			<li id="orange">橙子</li>
			<li name="you">柚子</li>
			<li>橘子</li>
			<li>榴莲</li>
			<li></li>
		</ul>
		<p>荡胸生曾云，决眦入归鸟。</p>
		
		<div>会当凌绝顶，一览众山小。</div>
		
	</body>
</html>