0
点赞
收藏
分享

微信扫一扫

【测试开发全栈--HTML】(4)CSS类选择器多应用和id选择器

上午我们说了CSS样式中基础选择器的类选择器,下午继续举个类选择器的实例,如下面这个多色盒子

【测试开发全栈--HTML】(4)CSS类选择器多应用和id选择器_类名

如果使用标签选择器,会比较麻烦。使用类选择器,会方便不少。

1.类选择器的使用

2.div就是一个盒子,用来装网页内容的。

来看一下效果:


使用<style>来来设置背景颜色和长宽,对应的代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS类选择器_实例</title>

    <style>

        .red {

            /*背景颜色*/

            background-colorred;

            width300px;

            height100px;

        }

        .green {

            /*背景颜色*/

            background-colorseagreen;

            width300px;

            height100px;

        }


    </style>

</head>

<body>

    <div class="red"></div>

    <div class="green"></div>

    <div class="red"></div>

    

</body>

</html>


接下来就是类选择器-多类名

可以给一个标签指定多个类名,从而达到更多的选择目的,这些类名都可以选出这个标签。简单理解就是一个标签可以有多个名字。

  1. 多类名使用方式
    <div red fontsize20>cool</div>
    在标签class属性中写多个类名;多个类名之间用空格分开;
  2. 多类名开发中场景
    可以把一些标签元素相同的样式(共同的部分)放到一个类里面
    这些标签都可以调用这个公共的类,然后再调用自己独有的类
    从而节省css代码,统一修改也非常方便
  3. 这个标签就可以分别具有这些类名的方式


简单理解,就是给某个标签添加了很多的类,或者这个标签有很多名字。这个标签就可以分别具有这些类名的样式。多类名选择器在后期布局比较复杂的情况下,还是使用比较多的。

看下效果:

【测试开发全栈--HTML】(4)CSS类选择器多应用和id选择器_背景颜色_02

对应的代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS类选择器_实例</title>

    <style>

        .red {

            /*背景颜色*/

            background-colorred;

        }

        .green {

            /*背景颜色*/

            background-colorseagreen;

        }

        .fontsize {

            /*字体*/

            font-size30px;

            width300px;

            height100px;

        }


    </style>

</head>

<body>

    <div class="red fontsize">王子</div>

    <div class="green fontsize">太子</div>

    <div class="red fontsize">世子</div>

    

</body>

</html>

将每个div中的字体、背景颜色的长度和宽度都设置好,然后每个div都调用这个class类


今天对类的选择器-多类名就讲到这里了,类名之间需要使用空格

举报

相关推荐

0 条评论