CSS选择器

最新推荐文章于 2022-11-05 11:35:29 发布

AnyBisks

最新推荐文章于 2022-11-05 11:35:29 发布

阅读量519

点赞数

分类专栏：前端css 文章标签： css html 前端

本文链接：https://blog.csdn.net/AnyBisks/article/details/78506158

版权

前端css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS选择器

html代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="../css/stu3-2.css" />
		<title>3-2学习</title>
	</head>

	<body>
		<div class="main">
			<div class="p-div">
				<p id="gsp" class="gsp">古诗文汇总</p>
				<p>问君能有几多愁，恰是一江春水向东流。</p>
				<p>剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
				<p>独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>
			</div>
			<div class="a-div">
				<p>唐诗背诵</p>
				<h1 id="a-p">悯农一首</h1>
				<p>春种一粒粟，秋收万颗子;</p>
				<p>四海无闲田，农夫犹饿死。</p>
			</div>
			<div class="b-div">
				<p>唐诗背诵</p>
				<h1 id="b-p">悯农二首</h1>
				<p>锄禾日当午，汗滴禾下土；</p>
				<p>谁知盘中餐，粒粒皆辛苦。</p>
			</div>
			<div class="c-div">
				<p>唐诗背诵</p>
				<h1 id="c-p">登鹳雀楼</h1>
				<p>白日依山尽，黄河入海流。</p>
				<p>欲穷千里目，更上一层楼。</p>
			</div>
		</div>
	</body>

</html>

css选择器设置的样式

/*便签选择器*/
p {
    font-size: 24px;
    color: red;
    width: 100%
}

/*类选择器*/
.p-div {
    background-color: antiquewhite;
}

/*id选择器*/
#gsp {
    /*font-size: 36px;
    color: #A52A2A;*/}

/*通配选择器*/
* {}

/*包含选择器*/
.a-div p {
    font-size: 18px;
    color: cadetblue;
}

/*子选择器*/
.b-div > p {
    font-size: 20px;
    color: goldenrod;
}

/*相邻选择器*/
p + h1 {
    font-size: 36px;
    color: orange;
}

/*兄弟选择器*/
div.p-div ~ div {
    background-color: burlywood;
}

/*分组选择器*/ 
p, a {}

/*属性选择器* ：css3新增加的选择器*/
/*属性选择器：只使用了属性名，不确定任何的属性值*/ 
h1[id] { 
    font-size: 30px;
    color: royalblue;
    font-style: oblique;
}

/*属性选择器：使用了属性名，并指定了属性的属性值*/
p[class="gsp"] {
    font-size: 30px;
    color: black;
    font-style: initial;
}

/*属性选择器：使用了属性名，并指定了属性的属性值中包含有该属性值，属性值是一个列表，用空格隔开*/
p[class~="gsp"] {
    font-size: 30px;
    color: black;
    font-style: initial;
}

/*属性选择器：使用了属性名，并指定了属性的属性值以gsp开头*/
p[class^="gsp"] {
    font-size: 30px;
    color: black;
    font-style: initial;
}

p[class$="gsp"] {/*属性选择器：使用了属性名，并指定了属性的属性值以gsp结束*/
    font-size: 30px;
    color: black;
    font-style: initial;
}

/*属性选择器：使用了属性名，并指定了属性的属性值中包含gsp*/
p[class*="gsp"] {
    font-size: 30px;
    color: black;
    font-style: initial;
}

/*属性选择器：使用了属性名，并指定了属性的属性值中包含gsp-开头的值*/
p[class|="gsp"] {
    font-size: 30px;
    color: black;
    font-style: initial;
}