css选择器
2021-02-12 18:17
阅读：486
标签：div 内容 last 属性选择器 pre 属性 style css -o 1、标签选择器
div{
color:red;
}
div>文本内容
2、class选择器
class="text">文本内容
.text{
color:red;
}
3、id选择器
每个id选择器的属性值在一个页面只能用一次
id="text">文本内容
#text{
color:red;
}
4、属性选择器
class="text">文本内容[class]{ color:red; }
也可使用
[class="text"]{
color:red;
}
5、后代选择器
文本内容
div span{
color:red;
}
6、子代选择器
文本内容
div > p{
color:red;
}
7、兄弟相邻选择器
文本1
文本2
div p + p{
color:red;
}
8、兄弟选择器
文本1
文本2
class
="text">文本3 p ~ .text{ color:red; }
9、群组选择器
class
="text1">文本1
class="text2">文本2
.text1,.text2{ color:red; }
10、伪类选择器
div::after{
content:"文本1";
color:red;
}// 文本1变红色
11、first-child、last-child、nth-child( )、nth-last-child( )
class="first">文本1
文本2
文本3
文本4
class="last">文本5
div p:first-child{
color:red;
}// 文本1变红色
div p:last-child{
color:green;
}// 文本5变绿色
div p:nth-child(even){
color:blue;
}// 文本2、文本4变蓝色
div p:nth-child(odd){
color:pink;
}// 文本1、文本3、文本5变粉红色
div p:nth-child(2n + 1){
color:gray;
}// 文本1、文本3、文本5变灰色
div p:nth-child(-n + 3){
color:orange;
}// 文本1、文本2、文本3变橙色
div p:not(class){
color:red;
}// 文本2、文本3、文本4变红色
12、first-of-type、last-of-type、nth-of-type( )、nth-last-of-type( )
文本1
文本2
文本3
文本4
div span:first-of-type{
color:red;
}// 文本2变红色
div p:last-of-type{
color:green;
}// 文本3变绿色
css选择器
标签：div 内容 last 属性选择器 pre 属性 style css -o
原文地址：https://www.cnblogs.com/cuishuangshuang/p/13028069.html
评论
亲，登录后才可以留言！