关系选择符与属性选择符小实例

最新推荐文章于 2022-04-12 20:19:33 发布

zzlwei

最新推荐文章于 2022-04-12 20:19:33 发布

阅读量208

点赞数 1

本文链接：https://blog.csdn.net/zzlwei/article/details/106642968

版权

关系选择符：
在这里插入图片描述
属性选择符：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
	
/* 关系选择符 */
	/* 包含选择符 E F 选择所有被E元素包含的F元素*/
	.one p{
		color: #FF0000;
	}
	/* 子选择符 E>F 选择所有作为E元素的子元素F*/
	.one>h1{
		color: darkmagenta;
	}
	/* 相邻选择符 E+F 选择紧贴在E元素之后F元素，元素E与F必须同属一个父级*/
	.Adjacent+p{
		color: blue;
	}
	/* 兄弟选择符 E~F 选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级*/
	.Brothers~p{
		color: palegoldenrod;
	}
/* 属性选择符 */

	/* E[att] 具有att属性E元素改变样式*/
	p[style]{
		color: aquamarine;
	}
	/* E[att="val"]  具有att属性且属性值等于val的E元素*/
	p[class="outer"]{
		color: mediumaquamarine;
	}
	/* E[att~="val"] */
	/* 具有att属性且属性值为一用空格分隔的字词列表，
	其中一个等于val的E元素（包含只有一个值且该值等于val的情况）*/ 
	p[class~="first"]{
		font-size: 30px;
	}
	/* E[att^="val"] 具有att属性且属性值为以val开头的字符串的E元素*/
	h3[class^="val"]{
		color: #FFFF00;
	}
	/* E[att$="val"] 具有att属性且属性值为以val结尾的字符串的E元素*/
	h3[class$="val"]{
		color: #66CDAA;
	}
	/* E[att*="val"] 具有att属性且属性值为包含val的字符串的E元素*/
	p[class*="val"]{
		color: cadetblue;
	}
	/* E[att|="val"] */
	/* 具有att属性，其值是以val开头并用连接符"-"分隔 
	的字符串的E元素；如果值仅为val，也将被选择*/ 
	p[class|="img"]{
		color: darkorange;
	}
	
</style>
</head>
<body>
<div class="one">
<h1>这是第一个div的第一个h1 紫色</h1>
<p>这是第一个div的第一个p 红色</p>
<p>这是第一个div的第二个p 红色</p>
<h1>这是第一个div的第二个h1 紫色</h1>
</div>
<br/><br/>
<h2 class="Adjacent">这是相邻选择符</h2>
<p>h2相邻的p 蓝色</p>
<p>h2不相邻的p</p>
<br/><br/>
<div>
<h2 class="Brothers">这是兄弟选择符</h2>
<p>h2相邻的p</p>
<p>h2不相邻的p</p>
</div>
<br/><br/>

	<p style="">这是具有style属性的一个p</p>
	<p class="outer">这是具有class属性且为outer的一个p</p>
	<p class="first second">这是具有class属性且为 first second的一个p</p>
	<p class="second first">这是具有class属性且为 second first的一个p</p>
	
	<div class="">
		<h3 class="valtitle">这是具有class属性且以val开头的一个h3</h3>
		<h3 class="classval">这是具有class属性且以val结尾的一个h3</h3>
		<p class="classvaltit">这是具有class属性且包含val的一个p</p>
	</div>
	<div class="">
		<p class="img">这是具有class属性且为img的一个p</p>
		<p class="img-title">这是具有class属性且以img开头带有-分隔符的一个p</p>
		<p class="imgtitle">这是具有class属性且为imgtitle的一个p</p>
	</div>
</body>
</html>

zzlwei

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关系选择符与属性选择符小实例

关系选择符：属性选择符：<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title></title><style> /* 关系选择符 */ /* 包含选择符 E F 选择所有被E元素包含的F元素*/ .one p{ color: #FF0000; } /* 子选择符 E>F 选择所有作为E元素
复制链接

扫一扫