• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

2.3 CSS选择器入门(上)

在“CSS入门教程”中,我们并不像其他教材一样,一上来就恨不得把所有的CSS选择器都灌输给读者,到最后搞得读者对CSS选择器一头雾水。

“CSS入门教程”是针对初学者而言的,在这个教程中,我们先讲解最实用的CSS选择器,然后在CSS进阶教程中,我们会系统而详细地讲解剩下的CSS选择器。

从上一节,我们知道,CSS选择器的功能就是把我们所需要的标签选中,然后操作选中的标签CSS样式。

CSS选择器的格式:

 
选择器
{
    样式属性1:取值1;
    样式属性2:取值2;
    ……
}

一、基本选择器

1、元素选择器

元素选择器,就是“选中”相同的元素,然后对相同的元素设置同一个CSS样式。

语法:

CSS元素选择器

举例:

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

在浏览器预览效果如下:

CSS元素选择器

分析:

“div{color:red}”表示把页面所有的div元素选中,然后为所有的div元素设置颜色color为红色。

在这里我们可以看出,元素选择器就是选择相同的元素,而不会选择其他元素,例如这段代码中的p元素和span元素就没有被选中,因此它们的内容就没有变成红色。

2、id选择器

我们可以为元素设置一个id,然后针对这个id的元素进行CSS样式操作。注意,在同一个页面中,不允许出现两个相同的id,这个就像没有哪两个人的身份证号是相同的道理一样。

语法:

CSS的id选择器

说明:

id名前面必须要加上前缀“#”,否则该选择器无法生效。id名前面加上“#”,表明这是一个id选择器。

举例:

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

在浏览器预览效果如下:

CSS的id选择器

分析:

“#lvye{color:red;}”表示选中id为lvye的元素,然后为这个元素设置CSS属性“color:red;”。

选择器为我们提供了一种选择方式。如果我们不使用选择器,就没办法把第二个div选中。

3、class选择器

class选择器,也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class(类名),然后针对这个class的元素进行CSS样式操作。

语法:

CSS的class选择器

说明:

class名前面必须要加上前缀“.”(英文点号),否则该选择器无法生效。类名前面加上“.”,表明这是一个class选择器。

举例1:

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

在浏览器预览效果如下:

CSS的class选择器

分析:

“.lv{color:red;}”表示选中class为lv的所有元素,然后为这些元素设置CSS属性“color:red;”。

p元素和span元素是两个不同的元素,但是我们可以为这两个不同的元素设置相同的class,这样就可以同时为这两个不同的元素设置相同的CSS样式了。

举例2:

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

在浏览器预览效果如下:

class选择器

分析:

虽然这个HTML页面有3个div元素,但是我们为前两个div元素设置相同的class,然后设置相同class的元素颜色为红色。因此,第3个div层内容不会变成红色,因为它不属于class="lv",它没有被“选中”。

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

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

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

回到顶部