一、概述
我们生活中的所有页面，所有网页。其精美的呈现往往离不开前端工程师们使用CSS这支画笔，给网页装饰的精美无比。其中有一个关键的问题，程序怎么知道哪个标签该显示什么样的颜色，哪个标签的字体多大呢？其中的奥秘就是CSS选择器了。CSS选择器可以选中网页中的标签，并对他们一一进行刻画，最终组成了一张精美的画卷。
二、选择器的分类
（1）id 选择器
每一个标签都要求有唯一的id，此属性可以用于CSS选择器选择。
例如：#blue{};#haha{}
#blue{
color: blue;
}
（2）元素选择器
使用标签的标签名进行选择。
例如：p{};h1{};h2{};div{}
p{
color:red;
}
（3）class 选择器
在标签中设置标签的class属性（可以重复），用过使用 . + class名，选中。
例如：.haha{}；.nimei{}
.class_name{
color:red;
}
（4）通配选择器
所有元素：*{}
*{}
（5）交集选择器
交集选择器：选中同时符合多个条件的元素 选择器1选择器2{}
.green, .red{
/* 交集选择器 */
color: gray;
}
（6）并集选择器
并集选择器：同时选择多个选择器 选择器1，选择器2{}
div.red{
/* 并集选择器 */
font-size: 40px;
}
（7）关系选择器
- 子元素选择器：父元素> 子元素
- 后代选择器：中间使用空格
-兄弟选择器：使用+号表示下一个，~表示所有兄弟
<style>
/*子元素选择器：父元素> 子元素*/
div.box>p{
color: hotpink;
}
/* 后代选择器 :空格*/
div.houdai p.hd span.hd{
color: skyblue;
}
/* 兄弟选择器 :加号表示下一个，~表示下边所有*/
p.bro2 ~ p{
color: yellow;
}
p.bro1 + p{
color: purple;
}
</style>
<body>
<!-- -----------------交/并选择器--------------------- -->
<span class="sky">first</span>
<div class="red">i am a div!</div>
<p id="red">i am a p!</p>
<br><br><br>
<!-- -----------------子选择器--------------------- -->
<div class="box nihao">
我是一个div
<p>
我是div中的p元素<br>
<span>
我是div-p中的span元素！
</span>
</p>
<span>我是div中的span元素</span>
</div>
<br><br><br>
<!-- -----------------后代选择器--------------------- -->
<div class="houdai">
i am div grandfather.
<p class="hd">
i am span's father.<br>
<span class="hd">
i am p's son.
</span>
</p>
</div>
<br><br><br>
<!-- -----------------兄弟选择器--------------------- -->
<div class="dad">
here is the father!
<p class="bro1">here is bro1!</p>
<p class="bro2">here is bro2!</p>
<p class="bro3">here is bro3!</p>
<p class="bro4">here is bro4!</p>
</div>
</body>
（8）继承样式
样式的继承：给父标签设置的属性会发生在子标签里面
所有的都会被继承，背景，布局，字体颜色，字体大小……
继承的设计是为了方便开发；利用继承可以将一些通用的样式设置到一起
body{
/* 子元素也会有相应格式，但子元素如果也设置了相关样式，则会将原来的样式覆盖 */
font-size: large;
}
三、选择器优先级
样式冲突：就是有多个不同的设置对同一个对象设置
优先级：内联样式->id->class（伪类）->元素选择器 ->通配选择器-> 继承样式.
注意：
- 每一条css语句都要有;结尾
- 当多种样式重复定义时，会根据优先级进行覆盖。
网友评论