注意
1.id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式
2.复杂的情况下可以先写好css样式，根据样式我们去设置标签的类
类选择器
一个标签可以指定多个类名
格式:
<标签名称 class="类名1 类名2 ...">
错误的写法:
<p class="para1" class="para2">
<p class="pp">迟到毁一生</p>
<p class="ppp">早退穷三代</p>
<p class="pppp">按时上下班</p>
<p class="ppppp">必成高富帅</p>
<p class="para1 para2">我是段落</p>
<p class="para1 para2">我是段落</p>
后代选择器
中间用空格隔开，后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
div p{
}
直接后代选择器
大于号连接
div>p{
}
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
交集选择器（同时符合这些筛选的条件）
选择器和选择器之间没有任何的连接符号
.people#no1{
}
并集选择器（多个标签同时符合所属属性）
用逗号间隔
兄弟选择器
相邻兄弟选择器(给指定选择器后面紧跟的那个选择器选中的标签设置属性:+连接)
a+p{
color: yellow;
}
通用兄弟选择器(给指定选择器后面的所有选择器选中的所有标签设置属性:~连接)
a~p{
color: yellow;
}
序选择器
CSS3中新增的选择器最具代表性的就是序选择器
1.同级别的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型
2.同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y)x和y是用户自定义的, 而n是一个计数器, 从0开始递增
属性选择器
格式1：标签[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性
格式2：标签[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
p[id]{
color: red;
}
p[class=cc]{
color: blue;
}
<p id="identity1">我是段落1</p>
<p id="identity2" class="cc">我是段落2</p>
<p class="cc">我是段落3</p>
<p id="identity3" class="para">我是段落4</p>
<p>我是段落5</p>
另一种：
1.属性的取值是以什么开头的
[attribute^=value] CSS3
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
2.属性的取值是以什么结尾的
[attribute$=value] CSS3
3.属性的取值是否包含某个特定的值得
[attribute*=value] CSS3
CSS3中的只要包含value就可以找到
网友评论