基本选择器
基本选择器 | 解释 |
---|
Id选择器 | #选择器(id的属性值) |
Class选择器(类选择器) | .选择器(class的属性值) |
标签选择器 | 标签名作为选择器 |
*(通配符选择器) | 匹配所有 |
层级选择器
层级选择器 | 解释 |
---|
组合选择器 | div,p |
包含选择器 | div.p |
父子选择器 | div>p |
兄弟选择器 | div~p |
紧贴在div后的p标签 | div+p |
属性选择器
1. 匹配input标签中属性为name的采用此样式
input[name]{
color:red
}
2. 匹配input标签中name属性的值是以u开头采用此样式
input[name^=u]{
color:red
}
3. 匹配input标签中name属性的值是以u结束采用此样式
input[name$=u]{
color:red
}
4. 匹配input标签中type属性的值中包含a采用此样式
input[name*=a]{
color:red
}
5. 匹配input标签中type属性的值为password采用此样式
input[type=password]{
color:red
}
伪元素选择器
1. div标签中第一行内容采用此样式
div:first-line{
color:pink;
}
2. div标签中第一个字母采用此样式
div:first-letter{
color:pink;
}
3. 只作用于块状元素
p:first-letter{
color:pink;
}
4. 在div标签之前添加此内容+样式
div:before{
content:"啦啦啦";
}
5. 在div标签之后添加此内容+样式
div:after{
content:"啦啦啦";
}
结构性伪类选择器
1. ul的第一个儿子li采用此样式
ul li:first-child{
color:yellow;
}
2. ul的最后一个儿子li采用此样式
ul li:lastt-child{
color:yellow;
}
3. ol唯一的一个儿子li采用此样式
ol li:only-child{
color:yellow;
}
4. ul的第三个儿子li采用此样式
ul li:nth-child(3){
border:1px solid red;
}
5. ul的第奇数个儿子采用此样式 [正序]
ul li:nth-child(odd){
color:yellow;
}
6. ul的第偶数个儿子采用此样式 [正序]
ul li:nth-child(even){
color:yellow;
}