标签名选择器、id选择器、class类型选择器、组合选择器

最新推荐文章于 2023-05-20 00:03:24 发布

jhan；

最新推荐文章于 2023-05-20 00:03:24 发布

阅读量2.8k

点赞数

分类专栏： JavaWeb-html&CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_46065214/article/details/126344635

版权

JavaWeb-html&CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

标签名选择器

标签名选择器格式：

标签名{

属性：值；

}

标签名选择器，可以决定那些标签被动的使用这个样式

需求：

在所有div标签上修改字体颜色为蓝色，字体大小为30个像素，边框为1个像素黄色实线；

并修改所有span标签的字体颜色为黄色，字体大小为20个像素，边框为5个蓝色虚线

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>标签名选择器</title>
    <style type="text/css">
        div{
            color: dodgerblue;
            font-size: 30px;
            border: 1px solid yellow;
        }

        span{
            color: yellow;
            font-size: 20px;
            border: 5px dashed dodgerblue;
        }
    </style>
</head>
<body>
    <div>div标签1</div>
    <div>div标签2</div>
    <span>span标签1</span>
    <span>span标签2</span>

</body>
</html>

id选择器

id选择器格式：

#id属性值{

属性：值；

}

id选择器，可以让我们通过id属性选择性的去使用这个样式

需求：

分别定义两个div标签，第一个div标签定义id为id001，根据id属性定义css样式修改字体为蓝色，字体大小为30个像素，边框为1个像素黄色实线；第二个div标签定义为id002，根据id属性定义css样式，修改字体颜色为红色，字体大小为20个像素，边框为5个像素蓝色虚线

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #id001{
            color: dodgerblue;
            font-size: 30px;
            border: 1px solid yellow;
        }

        #id002{
            color: red;
            font-size: 20px;
            border: 5px dashed dodgerblue;
        }

    </style>
</head>
<body>
  <div id="id001">div标签1</div>
  <div id="id002">div标签1</div>

</body>
</html>

class类型选择器

class类型选择器的格式：

.class属性值{

属性：值；

}

class类型选择器，可以通过class属性有效的选择性的去使用该样式

需求：

修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小为30个像素，边框1个像素黄色实线；修改class属性值为class02的div标签，字体颜色为灰色，字体大小为26个像素，边框为1个像素红色实线

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Class类型选择器</title>
    <style type="text/css">
        .class01{
            color: dodgerblue;
            font-size: 30px;
            border: 1px solid yellow;
        }

        .class02{
            color: darkgray;
            font-size: 26px;
            border: 1px solid red;
        }
    </style>

</head>
<body>
  <div class="class01">div标签1class01</div>
  <div class="class02">div标签2class02</div>
  <span class="class01">span标签1class01</span>
  <span>span标签2</span>

</body>
</html>

组合选择器

组合选择器的格式：

选择器1，选择器2，选择器n{

属性：值；

}

组合选择器可以让多个选择器共用同一个css样式代码

需求：

修改class="class01"的div标签和id="id01"所有的span标签，字体颜色为蓝色，字体大小为20个像素，边框为1个像素黄色实线

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        .class01,#id01{
            color: dodgerblue;
            font-size: 20px;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <div class="class01">div标签01class01</div>
    <span id="id01">span标签01</span>
    <div >div标签02</div>

</body>
</html>