• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

2.4 CSS选择器(下)

一、子元素选择器

子元素选择器,就是选中某个元素下的子元素,然后对该子元素设置CSS样式。

语法:

CSS子元素选择器

说明:

父元素与子元素必须用空格隔开,从而表示选中某个元素下的子元素。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #father1 div{color:blue;}
        #father2 #p1{color:red;}
    </style>
</head>
<body>
    <div id="father1">
        <div>绿叶学习网</div>
        <div>绿叶学习网</div>
    </div>
    <div id="father2">
        <p id="p1">绿叶学习网</p>
        <p id="p2">绿叶学习网</p>
        <span>绿叶学习网</span>
    </div>
</body>
</html>

在浏览器预览效果如下:

CSS子元素选择器

分析:

“#father1 div{…}”表示选择“id为father1的元素”下的所有div元素;

“#father2 #p1{…}”表示选择“id为father2的元素”下的子元素,其中子元素的id为#p1。因为“id为father2的元素”下的第2个p元素没有被选中,所以第2个p元素内容没有变成红色。

二、相邻选择器

相邻选择器,就是选中该元素的下一个兄弟元素,在这里注意一点,相邻选择器的操作对象是该元素的同级元素。

语法:

CSS相邻选择器

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #lv+div{color:red;}
    </style>
</head>
<body>
    <div>绿叶学习网</div>
    <div id="lv">
        <p>绿叶学习网</p>
    </div>
    <div>绿叶学习网</div>
    <div>绿叶学习网</div>
</body>
</html>

在浏览器预览效果如下:

CSS相邻选择器

分析:

“#lv+div{…}”表示选择“id为lv的元素”的相邻的下一个兄弟元素div,也就是第3个div元素。

三、群组选择器

群组选择器,就是同时对几个选择器进行相同的操作。常常,我们的CSS 样式中会有好几个地方需要使用到相同的设定时,一个一个分开写会是一件满累人的工作,重覆性太高且显得冗长,更不好管理....在CSS 语法的基本设定中,就可以把这几个相同设定的选择器合并在一起,原本可能是写了7~8 行相同的语法,合在一起后就只要短短的一小行,怎么看都让人心旷神怡啊~

语法:

CSS群组选择器

说明:

对于群组选择器,两个选择器之间必须用“,”(英文逗号)隔开,不然群组选择器无法生效。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        h3,div,p,span{color:red;}
    </style>
</head>
<body>
    <h3>绿叶学习网</h3>
    <div>绿叶学习网</div>
    <p>绿叶学习网</p>
    <span>绿叶学习网</span>
</body>
</html>

在浏览器预览效果如下:

CSS群组选择器

分析:

“h3,div,p,span{color:red;}”表示选中所有的h3元素、div元素、p元素和span元素,然后设置这些元素的字体颜色为red。

 
<style type="text/css">
    h3,div,p,span{color:red;}
</style>

其实上面这段代码等价于以下代码:

 
<style type="text/css">
    h3{color:red;}
    div{color:red;}
    p{color:red;}
    span{color:red;}
</style>

现在大家知道使用群组选择器的效率有多高了吧!

这一章介绍的CSS选择器的使用频率占所有选择器的80%以上,对于初学者来说,已经完全够用了。所以大家现在不急于学习其他的选择器,否则容易会产生混淆。对于剩下的选择器的使用方法和技巧,我们在“CSS进阶教程”会详细给大家讲解,敬请大家关注!

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部