1.1 标签选择器
特点:就是标签名称
标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”的。
所有的标签,都可以是标签选择器,比如ul、li、label、dt、dl、input....
无论这个标签藏的多深,一定能够被选择上,一定能被标签选择器p里面的样式规则修饰上
例如:
<style>
p{
font-size: 30px;
}
span{
color: aquamarine;
}
ul{
background-color: yellow;
}
section{
background-color: orange;
}
</style>
</head>
<body>
<p>前端与移动端开发<span>2班</span></p>
<p>web前端开发<span>2班</span></p>
<p>h5开发<span>2班</span></p>
<ul>
<li>
<li>
<li>
<p>设定</p>
</li>
</li>
</li>
</ul>
<ul>
<li>晓晓</li>
</ul>
<ul>
<li>消息</li>
</ul>
<section>
互动
</section>
![](https://i-blog.csdnimg.cn/blog_migrate/c0e1019a1a88b35f04ffa0a4ec256ca2.png)
1.2 id选择器
id选择器的选择符是“#”
标签中最常用的四大属性是id
, class
, title
, style
这四个属性,几乎每个html标签都会有, 需要特别关注。
任何的HTML标签都可以有id属性。表示这个标签的名字。
这id属性里面的值的设置,需要遵循一下原则:
这个标签的名字,可以任取,但是:1) 只能有字母、数字、下划线、连接线2) 必须以字母开头3) 不能和标签同名。比如id不能叫做body、img、a
<p id="a1">我是段落</p>
<p id="a_1">我是段落</p>
<p id="a-1">我是段落</p>
<!-- 错误的写法 -->
<p id="1a">我是段落</p>
<!-- 错误的写法 -->
<p id="p">我是段落</p>
在实际网页布局中,给id属性写值,不能写 a1----a100。你给这个id属性里写的值,要具有语意性。
一个HTML页面,不能出现相同的id,哪怕他们不是一个类型。比如页面上有一个id为pp的p,一个id为pp的div,是非法的!
<!-- 即使是同一个标签p,他们的id属性里面的值,不能相同 -->
<p id="pp">1000</p>
<p id="pp">2000</p>
<!--即使是不同标签p和div,他们的id属性里面的值,也不能相同 -->
<div id="pp">3000</div>
id选择器,css样式规则的写法:
<style>
#title{
font-size: 50px;
color: blue;
}
</style>
![](https://i-blog.csdnimg.cn/blog_migrate/600536c121e32b35c5269f6202d17e9f.png)
1.3 类选择器
.就是类的符号。类的英语叫做class。所谓的类,就是class属性,class属性和id非常相似,任何的标签都可以携带class属性。
特点1:class属性可以重复,比如,页面上可能有很多标签都有con这个类
<style>
.con{
font-size: 60px;
color: aquamarine;
}
</style>
<p class="con">1000</p>
<p class="con">1000</p>
<p>1000</p>
<p class="con">1000</p>
![](https://i-blog.csdnimg.cn/blog_migrate/1ce478669dbfa45695247492b73414d2.png)
特点2:同一个标签,可能同时属于多个类,类与类之间,用空格隔开。(同一个标签可以同时携带多个类)
<style>
.con{
font-size: 60px;
color: aquamarine;
}
.line{
text-decoration: underline;
}
.lic{
font-style: italic;
}
</style>
<p class="con">1000</p>
<p class="con line lic">1000</p>
<p>1000</p>
<p class="con">1000</p>
![](https://i-blog.csdnimg.cn/blog_migrate/17e00c57e32692039cc1813e576d13ae.png)
初学者常见的错误,就是写成了两个class:
<!-- 错误的写法 -->
<p class="con" class="line">1000</p>
特别提醒:页面布局中
到底用id还是用class?答案:尽可能的用class,除非极特殊的情况可以用id。原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。
1.4 后代选择器
空格就表示后代,.box p 就是.box的后代所有的p。
强调一下,选择的是后代,不一定是儿子。
<style>
.box p{
color: antiquewhite;
font-size: 50px;
}
.box p span{
color: blue;
}
</style>
<div class="box">
<ul>
<li>
<p>段落</p>
<p>段落<span>100</span></p>
<p>段落<span>200</span></p>
</li>
</ul>
</div>
![](https://i-blog.csdnimg.cn/blog_migrate/c5f832058d6aae007c76d821cf099c0c.png)
什么时候用后代选择器?
后代选择器,就是一种平衡:共性、特性的平衡。当要把某一个部分的所有的什么,进行样式改变,就要想到后代选择器。
<style>
.flink a{
color: lawngreen;
text-decoration: none;
}
.flink a:hover{
color: orange;
}
</style>
<div class="flink">
<a href="">百度</a>
<a href="">网易</a>
<a href="">凤凰网</a>
</div>
![](https://i-blog.csdnimg.cn/blog_migrate/94c9541fdab23268fd37e3615f2f97b4.png)
后代选择器,描述的是祖先结构。
![](https://i-blog.csdnimg.cn/blog_migrate/8349bfda70113d1c8b280b174f3f721e.png)
1.5 交集选择器
选择的元素是同时满足两个条件:必须是h3标签,然后必须是special标签。
交集选择器没有空格。
<style>
/* 交集选择器 */
h3.special{
color:aqua;
}
</style>
<h3 class="special">小明</h3>
<h3>小明</h3>
<h3>小明</h3>
![](https://i-blog.csdnimg.cn/blog_migrate/8c114ca7d659d3a4bf7b190f3191b111.png)
1.6 并集选择器(分组选择器)
用逗号就表示并集。
/* 并集选择器 */
p,div,em{
font-size: 50px;
}
.box1,.box2{
font-size: 50px;
background-color: yellow;
}
<p>小红</p>
<div>小花</div>
<em>小紫</em>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
![](https://i-blog.csdnimg.cn/blog_migrate/9a356277b2446424d5fbac90585b52d0.png)
1.7 通配符*
*就表示所有元素
![](https://i-blog.csdnimg.cn/blog_migrate/d02b023d8e0d1bef63279e73807da3f5.png)
效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。
1.8 儿子选择器>
大于符号
儿子选择器,只能在IE7浏览器以上的版本使用。IE7开始兼容,IE6不兼容。
<style>
/* 儿子选择器 */
div>p{
color: aqua;
}
</style>
</head>
<body>
<div>
<p>我是div的儿子</p>
</div>
<div>
<ul>
<li>
<p>我是div的重孙子</p>
</li>
</ul>
</div>
![](https://i-blog.csdnimg.cn/blog_migrate/da02722e3be295edd2f66027aab190e7.png)
1.9 序选择器
序选择器,只能在IE8浏览器以上的版本使用。
IE8**开始兼容;IE6、7都不兼容**
<style>
/* 选择第1个li: */
ul li:first-child{
color: antiquewhite;
}
ul li:nth-child(2){
color: aquamarine;
}
ul li:nth-child(3){
color: rgb(53, 80, 235);
}
ul li:nth-child(4){
color: rgb(220, 53, 235);
}
ul li:nth-child(5){
color: rgb(235, 53, 153);
}
/* 选择最后一个1i: */
ul li:last-child{
color: rgb(144, 38, 243);
}
</style>
</head>
<body>
<ul>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ul>
</body>
![](https://i-blog.csdnimg.cn/blog_migrate/4e1051552a55f4870cda2485500b46eb.png)
1.10 下一个兄弟选择器+
+表示选择下一个兄弟
下一个兄弟选择器,只能在IE7浏览器以上的版本使用。IE7开始兼容,IE6不兼容。
<style>
/* 下一个兄弟选择器 */
h3+p{
color: bisque;
}
</style>
<h3>标题3</h3>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<h3>标题3</h3>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<h3>标题3</h3>
<p>段落</p>
<p>段落</p>
<p>段落</p>
![](https://i-blog.csdnimg.cn/blog_migrate/0cee791115cecae2e97e44f50e96ffa9.png)
注意:它修饰的是h3后面紧挨着h3的那个段落p标签里的文本。