学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>基础教程>>

CSS基础教程(三) 选择器

发布时间:2019-12-30点击:

    在CSS中,如果想要渲染HTML网页元素样式,需要先选择元素才能进行下一步的渲染。

    在CSS中选择器有三种,分别是标签选择器、id选择器、class选择器。

    一、标签选择器

    顾名思义就是使用标签名来选择元素,语法如下:

    标签选择器使用的是标签的名字,上面就是一个标签选择器的例子。但是使用时需要注意的是,标签选择器会把所有相同标签都选择,也就是说页面中只要有p标签,都会被上述CSS代码影响样式。

    二、id选择器

    在HTML文档中,每个标签都可以定义id这个属性,使用CSS选择的时候,只要在定义的id名称前加一个丼号(“#”)即可;实例如下:

    <p id="p1">这里是css定义页面背景颜色</p>
    <style>
    #p1{
    	background-color:red;
    }
    </style>

    其中p标签的id为p1,使用id选择的时候加上丼号即可。PS:切记不能使用数字开头定义id。

    三、class选择器

    同id选择器差不多,不过使用的是class属性,但是选择的时候前缀也不一样,使用class名称选择的时候需要在前面加上点(“.”)而不是丼号。

    <p class="p1">这里是css定义页面背景颜色</p>
    <style>
    .p1{
    	background-color:red;
    }
    </style>

    PS:同上,不能使用数字开头定义

    四、多级使用

    在CSS的选择器中,如果一个名称不能达到你选择的目的,你可以使用多重来选择,比如说:

    <p id="p1">这里是css定义页面背景颜色</p>
    <style>
    p #p1{
    	background-color:red;
    }
    </style>

    上面的选择器就是P标签下面的id为p1的标签,而不是其他(比如说div)下面的id为p1的标签。

    五、代码复用

    在CSS的定义中,如果想要定义两个样式选择器名称,但是样式是一样的,可以在定义的时候把选择器名称用逗号(“,”)隔开即可,如下:

    p,#p1{
    	background-color:red;
    }
    不要重复定义。在往后的学习中,我们可以把不同选择器里面相同的内容整理出来这样定义,不仅省了很多代码量,也方便样式管理。

    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索

题库内容推荐