html 5 css选择器,css的9个常用选择器

css的9个常用选择器

1.类选择器(通过类名进行选择)

.p1{

color: #00ff00;

}

.p2{

color: #0000ff;

}

这是类选择器

hello world

效果图：

2.id选择器(通过id进行选择)

#text{

color: red;

}

这是id选择器

效果图：

3.标签选择器(通过id进行选择)

p{

color: #f40;

font-size: 25px;

}

这是标签选择器

效果图：

4.分组选择器(可一次选择多个标签以设置相同样式)

p,a,li{

color: blue;

}

这是分组选择器

hello

world

• 1
• 2
• 3

效果图：

5.后代选择器(选择某个标签的所有后代以设置相同样式)

div ul li{

color: red;

list-style: none;

}

• 1
• 2
• 3

效果图：

6.属性选择器(通过属性(如name属性)进行选择以设置相同的样式)

[name="pra1"]{

color: blue;

}

[name="pra2"]{

color: red;

}

这是属性选择器

hello world

效果图：

7.通用选择器(选择所有标签以设置相同样式)

*{

color: red;

}

这是通用选择器

hello

world

效果图：

8.兄弟选择器(选择兄弟关系的标签设置样式)

p+a{

color: green;

}

这是兄弟选择器

hello world

效果图：

9.直接父子选择器(选择父子关系的标签中子标签设置样式)

div>p {

color: red;

}

这是直接父子选择器

效果图：