CSS选择器

一、常用的选择器

元素选择器

作用：通过元素选择器可以选择页面中所有指定元素

语法：P{}

1、 练习：为页面中的所有的p元素，设置一个字体颜色为红色 

Id

作用：通过元素属性值Id选择是唯一的

语法：#id属性值{}

2、练习：为指定的P元素设置指定的大小

#p1{

Font-size:20px;

}

<p id=”p1”></p>

 

Class

作用：设置class属性，id不可重复，class可以重复。类选择器

语法：.class属性值

3、练习：同时选中三个元素，设置这三个元素为一组

.hello{

}

.p2{

Color:red;

}

 

注意：可以为一个class设置多个属性值，多个属性值之间通过空格隔开

<p class=”p2” hello></p>

 

选择器分组（并集选择器）

4、练习：为id为p1的元素，class为p2的元素，h1同时设置一个背景颜色为黄色

通过选择器分组可以同时选择多个选择对应的元素

语法：选择器1，选择器2，选择器N{}

 

通配选择器

5、练习：

可以用来选中页面中所有的元素

语法：*{}

*表示选中所有元素

 

交集选择器（复合选择器）

6、练习：为拥有class p3 span的元素设置一个背景颜色为黄

作用：可以选中同时满足多个条件的元素

语法：选择器1选择器2选择器N

Span,p3

 

 

二、元素之间的关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

 

祖先元素：直接或间接包含后代的元素

后代元素：直接或间接被祖先元素包含的元素

兄弟元素：拥有相同父元素的元素

 

习题：<div id=”d1”>

  <span>我是div标签中的span</span>

  <p><span>我是p标签中的span</span></p>

</div>

 

后代元素选择器：选中指定元素的指定后代元素

语法：祖先元素后代元素{}

1、  练习：为div中的span设置一个颜色为绿色

 

2、  练习：选中id为d1的div中的p元素中的span元素

 

答案：#di p span{}

 

子元素选择器：选中指定父元素的的指定子元素

语法：父元素>子元素

 

3、  为div的子元素span设置一个背景颜色为黄色