标签：文字 这是 color text 一段 选择器 CSS
CSS选择器
首先是关于css选择器的总结大纲
1.id选择器
效果图：
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#title{
color: orangered;
text-align: center;
}
#one{
color:orange;
text-align: center;
}
#two{
color: greenyellow;
text-align: center;
}
#three{
color: aquamarine;
text-align: center;
}
#four{
color: blueviolet;
text-align: center;
}
</style>
</head>
<body>
<div id="title">《出塞》</div>
<div id="one">秦时明月汉时关，</div>
<div id="two">万里长征人未还。</div>
<div id="three">但使龙城飞将在，</div>
<div id="four">不教胡马度阴山。</div>
<!-- 虽然编译通过，不符合规范 -->
<div id="title">水水水水水</div>
</body>
</html>
一般id选择器用来搭建网页的主要框架。
2.类名选择器
效果图
代码片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类名选择器</title>
<style>
.title{
color: deeppink;
background-color: deepskyblue;
/* 文本居中 */
text-align: center;
}
.one{
color:orange;
text-align: center;
}
.two{
color: greenyellow;
text-align: center;
}
.three{
color: aquamarine;
text-align: center;
}
.four{
color: blueviolet;
text-align: center;
}
</style>
</head>
<body>
<div class="title">《出塞》</div>
<div class="one">秦时明月汉时关，</div>
<div class="two">万里长征人未还。</div>
<div class="three">但使龙城飞将在，</div>
<div class="four">不教胡马度阴山。</div>
<hr>
<div class="title">《静夜思》</div>
<div class="one">床前明月光，</div>
<div class="two">疑是地上霜。</div>
<div class="three">举头望明月，</div>
<div class="four">低头思故乡。</div>
</body>
</html>
类名选择器 单词是class 样式中标志：.(点)，类名选择器一般用来写框架内的盒子
3.标签选择器
效果图
代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css样式</title>
<style>
p{
/* 文字颜色 */
color: pink;
/* 文字大小 */
font-size: 30px;
/*背景颜色*/
background-color: rgb(66, 224, 185);
/* 宽度 */
width: 500px;
/* 高度 */
height: 300px;
}
/* div样式 */
div{
color: blue;
}
.a{
color: #000;
}
#b{
color: chartreuse;
}
</style>
</head>
<body>
<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字，这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字。</p>
<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字，这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字。</p>
<div class="a">这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字，这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字。</div>
<div id="b">一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字，这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字。这是</div>
<div>文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字，这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字。这是一段</div>
</body>
</html>
当一种标签需要同样的样式时使用
4.包含选择器
效果图
部分代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 600px;
height: 600px;
background-color: plum;
}
.mother{
width: 600px;
height: 600px;
background-color: sandybrown;
}
.mother p{
background-color: seagreen;
}
.mother p span{
display: block;
width: 100px;
height: 100px;
background-color: slateblue;
}
p{
width: 200px;
height: 200px;
background-color: powderblue;
}
.uncle{
width: 600px;
height: 600px;
background-color: plum;
}
.uncle>div{
width: 300px;
height: 300px;
background-color: tan;
}
</style>
</head>
<body>
<div class="father">
<p>
<span>孙子</span>
</p>
<p>儿子2</p>
</div>
<div class="mother">
<p>
<span>孙子</span>
</p>
</div>
<div class="uncle">
<div>
儿子1
<div>孙子</div>
</div>
<div>
儿子2
</div>
</div>
</body>
</html>
** 包含选择器
后代选择器
长辈 后背{}
不加大于号可以找到所有的后辈
加了大于号只能找到儿子
一般用来改一些单独需要更改的标签
**
5.通配符选择器
效果图
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
通配符选择器：
可更改所有选择器样式
-->
<style>
*{
color: red;
}
</style>
</head>
<body>
<div>div标签</div>
<p>p标签</p>
<h3>h标签</h3>
<span>span标签</span>
</body>
</html>
*{
margin：0；
padding：0；
}
一般用来修改页面整体样式，去除页面内外边距。一般写页面必写
6.群组选择器
效果图
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
群组选择器：
可以一次给多个标签应用同样的样式
-->
<style>
div,p{
color: red;
}
h3,span{
color: sandybrown;
}
</style>
</head>
<body>
<div>div标签</div>
<p>p标签</p>
<h3>h标签</h3>
<span>span标签</span>
</body>
</html>
给多个标签更改相同样式时使用
标签：文字,这是,color,text,一段,选择器,CSS 来源： https://blog.csdn.net/weixin_45476607/article/details/119189469
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。