CSS学习笔记3（代码+效果展示）——选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>E[attribute]选择器</title>
		<style>
			[id]{
				font-size: 36px;
				color: #f00;
			}
		</style>
	</head>
	<body>
		<p id="one">啊，朋友！</p>
		<h2 id="two">黄河以它英勇的气魄，</h2>
		<p class="two">出现在亚洲的原野。</p>
		<!--包含id 的文字片段都执行了其设置的格式-->
	</body>
</html>

效果展示

2、E[attribute=value]选择器（属性值选择器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>E[attribute]选择器</title>
		<style>
			[align ="center"]{
				font-size: 36px;
				text-shadow: 20px 20px 10px red;
			}
			p[align="center"]{
				color: #f00;
			}
		</style>
	</head>
	<body>
		<p align="center">啊，朋友！</p>
		<h2 align="center">黄河以它英勇的气魄</h2>
	</body>
</html>

效果展示

3、E[attribute~=value]选择器（前缀选择器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>E[attribute~=value ]选择器</title>
		<style>
			[class~=a]{
				font-size: 36px;
				color: green;
			}
		</style>
	</head>
	<body>
		<p class="a">《赤壁》</p>
		<p class="a b">杜牧</p>
		<p class="a-b">折戟沉沙铁未销，自将磨洗认前朝。</p>
	</body>
</html>

效果展示

4、E[attribute|=value]选择器（前缀-选择器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>E[attribute~=value ]选择器</title>
		<style>
			[class|=a]{
				font-size: 36px;
				color: green;
			}
		</style>
	</head>
	<body>
		<p class="a">《赤壁》</p>
		<p class="a b">杜牧</p>
		<p class="a-b">折戟沉沙铁未销，自将磨洗认前朝。</p>
	</body>
</html>

效果展示

5、E[attribute^=value]选择器（前缀选择器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>E[attribute^=value ]选择器</title>
		<style>
			p[id^=one]{
				color: pink;
				font-size: 20px;
				font-family: "微软雅黑";
			}
		</style>
	</head>
	<body>
		<p id="one">山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。</p>
		<p id="two">苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。</p>
		<p id="one1">可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。</p>
		<p id="two1">孔子云：何陋之有？</p>
	</body>
</html>

效果展示

6、E[attribute$=value] 选择器（后缀选择器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>E[attribute^=value ]选择器</title>
		<style>
			p[id$=main]{
				color: #0cf;
				font-size: 32px;
				font-family: "宋体";
			}
		</style>
	</head>
	<body>
		<p id="old1">水陆草木之花，可爱者甚蕃。</p>
		<p id="old2">晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。</p>
		<p id="oldmain">予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，</p>
		<p id="oldmain">香远益清，亭亭净植，可远观而不可亵玩焉。</p>
	</body>
</html>

效果展示

7、E[attribute*=value] 选择器（包含选择器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>E[attribute^=value ]选择器</title>
		<style>
			p[id*=ma]{
				color: #0ca;
				font-size: 20px;
				font-family: "宋体";
			}
		</style>
	</head>
	<body>
		<p id="olmad1">水陆草木之花，可爱者甚蕃。</p>
		<p id="old2">晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。</p>
		<p id="oldin">予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，</p>
		<p id="oldmain">香远益清，亭亭净植，可远观而不可亵玩焉。</p>
	</body>
</html>

效果展示

【2】关系选择器

1、子元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子元素选择器</title>
		<style>
			h2>strong{
				color: red;
				font-size: 20px;
				font-family: "微软雅黑";
			}
		</style>
	</head>
	<body>
		<h2>前不见<strong>古人</strong>，后不见<strong>来者</strong>。</h2>
		<h2>念天地之悠悠，<em><strong>独怆</strong></em>然而涕下！</h2>
	</body>
</html>

效果展示

2、兄弟选择器

1、邻近兄弟选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子元素选择器</title>
		<style>
			p+h2{
				color: green;
				font-family: "宋体";
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<h2>《赠汪伦》</h2>
		<p>李白乘舟将欲行，</p>
		<h2>忽闻岸上踏歌声。</h2>
		<h2>桃花潭水深千尺，</h2>
		<h2>不及汪伦送我情。</h2>
	</body>
</html>

效果展示

2、普通兄弟选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子元素选择器</title>
		<style>
			p~h2{
				color: green;
				font-family: "宋体";
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<h2>《赠汪伦》</h2>
		<p>李白乘舟将欲行，</p>
		<h2>忽闻岸上踏歌声。</h2>
		<h2>桃花潭水深千尺，</h2>
		<h2>不及汪伦送我情。</h2>
	</body>
</html>

效果展示

【3】结构化伪类选择器

1、:root选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子元素选择器</title>
		<style>
			:root{
				font-size: 40px;
				color: blueviolet;
			}
			h2{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<h2>《赠汪伦》</h2><!--同属性样式，标签样式优先-->
		<p>李白乘舟将欲行，忽闻岸上踏歌声。桃花潭水深千尺，不及汪伦送我情。</p>
	</body>
</html>

效果展示

2、:not选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构化伪类选择器</title>
		<style>
			h2:not(.one){
				font-size: 20px;
				color: blueviolet;
				font-family: "宋体";
			}
			<!--本标签的意思时除了含class="one"的h2标签的h2标签都会添加样式-->
		</style>
	</head>
	<body>
		<h2>《赠汪伦》</h2>
		<h2 class="one">李白乘舟将欲行，忽闻岸上踏歌声。</h2>
		<p>桃花潭水深千尺，不及汪伦送我情。</p>
	</body>
</html>

效果展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构化伪类选择器</title>
		<style>
			:not(h2){
				font-size: 20px;
				color: blueviolet;
				font-family: "宋体";
			}
			h2{
				color: red;
				font-size: 15px;
			}
			<!--not (h2)这种情况下,若h2不单独添加样式,不会被排除-->
		</style>
	</head>
	<body>
		<h2>《赠汪伦》</h2>
		<h2 class="one">李白乘舟将欲行，忽闻岸上踏歌声。</h2>
		<p>桃花潭水深千尺，不及汪伦送我情。</p>
	</body>
</html>

效果展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构化伪类选择器</title>
		<style>
			:not(h2){
				font-size: 20px;
				color: blueviolet;
				font-family: "宋体";
			}
			<!--:not(h2)在这种情况下,若h2不单独添加样式,不会被排除-->
		</style>
	</head>
	<body>
		<h2>《赠汪伦》</h2>
		<h2 class="one">李白乘舟将欲行，忽闻岸上踏歌声。</h2>
		<p>桃花潭水深千尺，不及汪伦送我情。</p>
	</body>
</html>

效果展示

3、:only-child选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构化伪类选择器</title>
		<style>
			strong:only-child{
				color: palevioletred;
			}
		</style>
	</head>
	<body>
		<p>
			<strong>《泊秦淮》</strong>
			<strong>杜牧</strong>
		</p>
		<p>
			<strong>烟笼寒水月笼沙，</strong>
		</p>
		<p>
			<strong>夜泊秦淮近酒家。</strong>
			<strong>商女不知亡国恨，</strong>
			<strong>隔江犹唱后庭花。</strong>
		</p>
	</body>
</html>

效果展示

4、:first-child选择器和:last-child选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构化伪类选择器</title>
		<style>
			p:first-child{
				color: palevioletred;
			}
			p:last-child{
				color: red;
			}
		</style>
	</head>
	<body>
		<article>
			<p>《泊秦淮》</p>
			<p>杜牧</p>
			<p>烟笼寒水月笼沙，</p>
			<p>夜泊秦淮近酒家。</p>
			<p>商女不知亡国恨，</p>
			<p>隔江犹唱后庭花。</pstrong:first-child{
				color: palevioletred;
			}>
		</article>
	</body>
</html>

效果展示

5、:nth-child(n)和:nth-last-child(n)选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构化伪类选择器</title>
		<style>
			p:nth-child(2){
				color: palevioletred;
			}
			p:nth-last-child(2){
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<p>第一篇 毕业了</p>
			<p>第二篇 关于考试</p>
			<p>第三篇 夏日飞舞</p>
			<p>第四篇 惆怅的心</p>
			<p>第五篇 畅谈美丽</p>
		</div>
	</body>
</html>

效果展示

6、:first-of-type选择器和:last-of-type选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构化伪类选择器</title>
		<style>
			h2:last-of-type{color: #f09;}
			p:first-of-type{color:#12ff65}
		</style>
	</head>
	<body>
		<h2>李白</h2>
		<p>字太白，号青莲居士，唐代伟大的浪漫主义诗人。</p>
		<h2>杜甫</h2>
		<p>字子美，自号少陵野老，唐代伟大的现实主义诗人。</p>
		<h2>孟浩然</h2>
		<p>字浩然，号孟山人，唐代著名的山水田园派诗人。</p>
		<h2>李贺</h2>
		<p>字长吉，唐代中期的浪漫主义诗人。</p>
	</body>
</html>

效果展示

7、 :nth-of-type(n)选择器和:nth-last-of-type(n)选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构化伪类选择器</title>
		<style>
			p:nth-last-of-type(2){font-weight: bold;}
			h2:nth-of-type(even){color:#12ff65}/*设置奇数行标题样式*/
			h2:nth-of-type(odd){color:#f09}/*设置偶数行标题样式*/
		</style>
	</head>
	<body>
		<h2>李白</h2>
		<p>字太白，号青莲居士，唐代伟大的浪漫主义诗人。</p>
		<h2>杜甫</h2>
		<p>字子美，自号少陵野老，唐代伟大的现实主义诗人。</p>
		<h2>孟浩然</h2>
		<p>字浩然，号孟山人，唐代著名的山水田园派诗人。</p>
		<h2>李贺</h2>
		<p>字长吉，唐代中期的浪漫主义诗人。</p>
	</body>
</html>

效果展示

8、empty选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构化伪类选择器</title>
		<style>
			p{
				width: 150px;
				height: 30px;
			}
			:empty{
				background-color: #f00;
			}
		</style>
	</head>
	<body>
		<p>草树知春不知归，</p>
		<p>百般红紫斗芳菲。</p>
		<p>杨花榆荚无才思，</p>
		<p></p>
        <!--没有内容背景会被添加颜色-->
		<p>惟解漫天作雪飞。</p>
	</body>
</html>

效果展示

9、target选择器

一句话总结：
当页面URL中带有#锚点时，target选择器会自动选中对应id的元素，并给它“加特效”——就像你点击目录跳转后，目标段落自动高亮！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构化伪类选择器</title>
		<style>
			:target{background-color: #e5eecc;}
		</style>
	</head>
	<body>
		<h1>这是标题</h1>
		<p><a href="#new1">跳转至内容1</a></p>
		<p><a href="#new2">跳转至内容2</a></p><!--锚点链接-->
		<p>请点击上面的超链接，:target选择器会突出当前活动的HTML锚。</p>
		<p id="new1">内容1</p>
		<p id="new2">内容2</p>
	</body>
</html>

效果展示

【4】状态化伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>状伪类选择器</title>
		<style>
			a:link,a:visited{
				color: #000;
				text-decoration: none;
			}
			a:hover{
				color: #093;
				text-decoration: underline;
			}
			a:active{
				color: #FC0;
			}
		</style>
	</head>
	<body>
		<a href="#">公司首页</a>
		<a href="#">公司简介</a>
		<a href="#">产品介绍</a>
		<a href="#">联系我们</a>
	</body>
</html>

效果展示

【5】伪元素选择器

1、:before选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>状伪类选择器</title>
		<style>
			p:before{
				content: "初，权为吕蒙曰：";
				color: #c06;
				font-size: 20px;
				font-family: "微软雅黑";
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<p>
			"卿当今涂掌事，不可不学！"蒙辞以军中多务。
		</p>
	</body>
</html>

效果展示

2、:after选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪元素选择器</title>
    <style>
        strong:after {
            content: url("../img/1.png"); /* 确保路径正确 */
            display: inline-block; /* 确保内容可见 */
        }
    </style>
</head>
<body>
    <strong>天文学</strong>
</body>
</html>

效果展示