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>
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>
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>
特点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>
初学者常见的错误，就是写成了两个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>
什么时候用后代选择器？
后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。
<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>
后代选择器，描述的是祖先结构。
1.5 交集选择器
选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。
交集选择器没有空格。
<style>
/* 交集选择器 */
h3.special{
color:aqua;
}
</style>
<h3 class="special">小明</h3>
<h3>小明</h3>
<h3>小明</h3>
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>
1.7 通配符*
*就表示所有元素
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
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>
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>
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>
注意：它修饰的是h3后面紧挨着h3的那个段落p标签里的文本。
6329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
