CSS的标签选择器与标签属性选择器

最新推荐文章于 2023-08-23 19:39:56 发布

司徒小夜

最新推荐文章于 2023-08-23 19:39:56 发布

阅读量612

点赞数

分类专栏： html 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43530326/article/details/126993221

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.四大标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
/* 		后代选择器(以空格     分隔)
		子元素选择器(以大于 > 号分隔）
		相邻兄弟选择器（以加号 + 分隔）
		普通兄弟选择器（以波浪号 ～ 分隔） */
			/* 1、后代选择符：#div 下的 所有span标签的样式 */
			#div1 span {
				color: greenyellow;
			}
			#div1>span {
				color: red;
			}
			/* 3、相邻选择符：#div 下的 第一层span标签的样式 */
			#s1+span {
				color: yellow;
			}
			/* 4、兄弟选择符：与#s1同级  后面的所有兄弟的样式 */
			#s1~span {
				color: skyblue;
			}
		</style>
	</head>
	<body>
		<div id="div1" style="border: 1px aquamarine solid; border;">
			div1<span>
				字符<span>span.span</span>
				</span>
			<br />
			div1<span id="s1">字符2</span>
			div1<span>sapn字符3</span><span>sapn字符4</span>

		</div>
		<div id="div2" style="border: 1px aquamarine solid; border;">
			div2<span>字符</span>

		</div>
	</body>
</html>

2.标签属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
/* 			标签名[属性名="字符串"]
			1.省略="" 	则表示：含有该属性的标签具有的样式
			2.~="str" 	含空格的匹配，属性的取值用字母分隔 且其中有个字符串为需要匹配的字符串	例：div[id~="div"]   <div id="div 5">
			3.^="str"	以str开头的属性值		例：div[class^="divg"] <div id="div4" class="divgroup" >
			4.$="str"	以str结尾头的属性值
			5.*="str"	包含str的属性值
			6.|="str"	含有-str的属性值		例：div[id|="div"] <div id="div-6"> */			
		/* 1.具有id属性的div标签 */
			div[id] {
				width: 200px;
				height: 100px;
				background: red;
			}
			div[class] {
				width: 100px;
				height: 100px;
				background: green;
			}
			div[style] {
				
				background: #ff55ff;
			}
			/* div[id="div4"] {
				background: royalblue;
			}
			
			div[id~="div"] {
				background: #FFFF00;
			}
			
			div[class^="divg"] {
				background: blue;
			}
			
			div[class$="oup"] {
				background: #ADFF2F;
			}
			
			div[class*="vgr"] {
				background: gray;
			}
			
			div[id|="div"] {
				background: turquoise;
			} */
		</style>
	</head>
	<body>
		<div id="div1">
			div1
		</div>
		<div id="div2" class="divgroup" style="width: 400px;">
			div2<span ></span>
		</div>
		<div id="div3">
			div3
		</div>
		<div id="div4" class="divgroup" >
			div4
		</div>
		<div id="div 5">
			div5
		</div>		
		<div id="div-6">
			div6
		</div>
	</body>
</html>