一、标签选择器
语法:(像p、div、hn....的标签)
<p>标签选择器</p>
<style>
p {
color: green;
}
</style>
效果展示:
二、类选择器
顾名思义,class本身就有类的意思,这里表示具有相同class值的一类。
语法:
<p class="LEI">类选择器</p>
.LEI {
color: red;
}
效果展示:
一个class 的style样式可以被多个标签同时使用。
例如:
<p class="LEI">类选择器111</p>
<p class="LEI">类选择器222</p>
样式与上一样,那么效果呢:
效果是一样的。
注意:①使用类选择器设置样式的时候,类名前要有英语符号“.”。且命名要遵循命名原则。
②不要用纯数字、汉字命名,且尽量不要用“_”下划线,可以用“-”。
③尽可能有很好的可读性。
三、多类名选择器
一个标签如果同时具有多个类名,那么就会同时具有那些类名的样式。
例如:
<p class="LEI F-size">多类名选择器</p>
.LEI {
color: red;
}
.F-size {
font-size: 30px;
}
那么效果与上面的作比较:
四、id选择器
id选择器就像一个人的身份证号,只有一个。所以,id样式只能被一个标签所使用,即只能被使用一次。
语法:
<p id="big">ID</p>
#big {
color: orange;
font-size: 100px;
}
效果如下:
五、通配符选择器
语法:
* {
margin: 0;
padding: 0;
}
通配符选择器对所有的标签都有用,,但是优先级较低,容易被覆盖。其中使用最多的就是消除标签外边距和内边距(清除浏览器的默认值,以便于自己设定自己所需要的)。
六、伪类选择器
1. 链接伪类选择器(只要针对于链接标签 a)
语法:
<a href="#" class="aa">请点击</a>
a {
color: #000;
}
.aa:hover {
color: red;
}
前面的a样式是给a标签一个最初的颜色,以便分辨。(鼠标经过前后对比)
其他的类似。
但是,在定义样式的时候,要注重上下顺序,例如,如果hover在link的上面,那么hover的效果就不显示。
顺序:link、visited、hover、active
2. 结构位置伪类选择器(CSS3)
语法:
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
ul li {
font-size: 30px;
font-weight: bold;
}
ul li:first-child {
color: red;
}
ul li:nth-child(2){
color: orange;
}
ul li:nth-child(3){
color: green;
}
ul li:last-child {
color: purple;
}
效果展示:
注意事项:
① nth-child()括号里还可以写odd和even,分别表示奇数和偶数。例如:
ul li:nth-child(odd){
color: green;
}
ul li:nth-child(even){
color: orange;
}
② nth-child(kn+b) k、b分别 系数和常数,如果k=2,b=0,那么选择的就是2的倍数;如果k=2,b=1,那么就是比2的倍数多1的数。
3. 目标伪类选择器