首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2.CSS选择器-CSS基础

2.CSS选择器-CSS基础

作者头像
见贤思齊
发布2020-10-10 16:06:10
5150
发布2020-10-10 16:06:10
举报
文章被收录于专栏:初见Linux初见Linux

一、元素的id和class

id 和 class 是元素最基本的两个属性,一般情况下,id 和 class都是用来选择元素,进而进行CSS操作或JavaScript操作。

1.id属性

id属性具有唯一性,也就是说一个页面中相同的id只能出现一次。 若出现多个相同id,那么CSSJavaScript会无法识别,这个id对应的是哪个元素。

2.class属性

class,类。思想和别的编程语言相似。 我们可以通过为同一个页面的相同元素或不同元素设置相同的class,然后使得具有相同class得元素具有相同的样式

3.形象理解

因为id属性具有唯一性,所以它其实和我们的身份证号码一样,全国唯一。 而class不具唯一性,它就和我们的名字一样,全国有的人名字就是一模一样的。

二、选择器是什么

选择器,就是用一种方式把我们想要的那个元素选中。只有把它选中,我们才可以为这个元素添加CSS样式。 在CSS中,有很多方式可以把我们想要的元素选中,这些不同的方式其实就是不同的选择器。选择器的不同,在于选择方式不同,但是它们的最终目的是一样的,那就是把想要的元素选中,然后才可以定义该元素CSS样式。 我们也可以用一种选择器来代替另一种选择器,这仅仅是选择器不同而已,但目的都是一样的。

三、CSS选择器

CSS选择器非常多,以下是最常用的 5 种选择器:

  • 元素选择器
  • id 选择器
  • class 选择器
  • 后代选择器
  • 群组选择器

可千万不要小看它们,这 5 种选择器使用频率占所有选择器的 80% 以上

CSS选择器格式
选择器{
    属性1 : 取值1;
    ...
    属性n : 取值n;
}

1.元素选择器

元素选择器,就是选中指定的相同的所有元素,然后给相同的元素定义同一个CSS样式

(2)示例
① 例1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title></title>
        <style type="text/css">
            div{                /*元素选择器,选择所有的div标签*/
                color:#00FFFF;
            }
        </style>
    </head>
    <body>
        <div>見贤思齊</div>
        <span>見贤思齊</span>
        <p>見贤思齊</p>
        <strong>見贤思齊</strong>
        <em>見贤思齊</em>
        <div>見贤思齊</div>
    </body>
</html>

元素选择器示例1.png

2.id 选择器

其实,id 选择器就像是我们的身份证号码一样,在同一个页面中,不允许出现 2 个相同的 id。 我们可以为元素设置一个id属性,然后针对设置了这个id的元素定义CSS样式,这就是id 选择器

(1)#前缀

对于id 选择器id名前必须加上前缀#。 不加的话,id 选择器无法生效,只有加上前缀#,才表示这是一个id 选择器

(2)示例
① 例1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title></title>
        <style type="text/css">
            #hope{              /*id选择器*/
                color:#00FFFF;
            }
        </style>
    </head>
    <body>
        <div>見贤思齊</div>
        <span>見贤思齊</span>
        <p>見贤思齊</p>
        <strong id="hope">見贤思齊</strong>
        <em>見贤思齊</em>
        <div>見贤思齊</div>
    </body>
</html>

id选择器示例1.png

3.class 选择器

class 选择器,即类选择器,就是可以对相同的元素 或 不同的元素定义相同的class属性,然后针对拥有同一个class属性的元素进行CSS样式操作

(1).前缀

对于class 选择器,class名前必须要加上前缀 .(注意:一定是英文的点)。 否则class 选择器无法生效,只有加上前缀.,才表示这是一个class 选择器

(2)减少大量重复代码

要为两个及以上元素定义相同的样式,建议使用class 选择器,因为可以减少大量重复代码

(3)示例
① 例1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS选择器</title>
        <style type="text/css">
            .dream{             /*class选择器*/
                color:#00FFFF;
            }
        </style>
    </head>
    <body>
        <div>見贤思齊</div>
        <span class="dream">見贤思齊</span>
        <p>見贤思齊</p>
        <strong class="dream">見贤思齊</strong>
        <em>見贤思齊</em>
        <div class="dream">見贤思齊</div>
    </body>
</html>

class选择器示例1.png

4.后代选择器

后代选择器,就是选择元素内部中所有的某一种元素,包括子元素和其它后代元素。

(1)空格隔开

父元素和后代元素必须用空格隔开,从而表示选中某个元素内部的后代元素

(2)示例
① 例1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS选择器</title>
        <style type="text/css">
            
            /*后代选择器*/
            #first div{             
                color:#00FFFF;
            }
            #second p{
                color:#66A9FE;
            }
        </style>
    </head>
    <body>
        <div id="first">
            <span>見贤思齊</span>
            <div>見贤思齊</div>
        </div>
        <div id="second">
            <p>見贤思齊</p>
            <span>見贤思齊</span>
            <p>見贤思齊</p>
        </div>      
    </body>
</html>

<!--
    #first div,表示选中id为first元素下的所有div元素。
    #second p,表示选中id为second元素下的所有p元素。
-->

后代选择器示例1.png

5.群组选择器

群组选择器,就是同时对几个选择器进行相同的操作

(1)英文逗号,隔开

对于群组选择器,每个选择器之间必须用英文逗号“ , ”隔开。 如若不这么做,群组选择器无法生效。

(2)示例
① 例1
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      <!--必须放在title标签及其它meta标签前-->
        <title>CSS选择器</title>
        <style type="text/css">
            
            /*群组选择器*/
            h3,#first div,p{                
                color:#00FFFF;
            }

        </style>
    </head>
    <body>
        <h3>見贤思齊</h3>
        <div id="first">
            <span>見贤思齊</span>
            <div>見贤思齊</div>
        </div>
        <p>見贤思齊</p>
        <span>見贤思齊</span>
    </body>
</html>

<!--
    通过元素选择器,选择了所有 h3、p标签,
    通过后代选择器,选择了id为first下的div标签。
    另外,若再加上span标签,所有span标签都会被选中,此处未写上。
-->

群组选择器示例1.png

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、元素的id和class
    • 1.id属性
      • 2.class属性
        • 3.形象理解
        • 二、选择器是什么
        • 三、CSS选择器
          • 1.元素选择器
            • (2)示例
          • 2.id 选择器
            • (1)#前缀
            • (2)示例
          • 3.class 选择器
            • (1).前缀
            • (2)减少大量重复代码
            • (3)示例
          • 4.后代选择器
            • (1)空格隔开
            • (2)示例
          • 5.群组选择器
            • (1)英文逗号,隔开
            • (2)示例
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档