CSS的基本选择器（三种）标签选择器class选择器id选择器

最新推荐文章于 2024-06-12 22:32:31 发布

充满鲜花的世界到底在哪里

最新推荐文章于 2024-06-12 22:32:31 发布

阅读量527

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/New_new_zero/article/details/115612757

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏


<html>
<head>
    <meta charset="UTF-8">
    <title>CSS的基本选择器</title>
    <style type="text/css">
        /* 标签选择器 */
        p {
            background-color: red;
            color: yellow;
        }

        div.div1 {
            background-color: blue;
        }
        div[class="div2"] {
            background-color: deeppink;
        }

        /* 类选择器 */
        .grayclass {
            background-color: gray;
        }

        /* id 选择器 */
        p#orangeid {
            background-color: orange;
        }

        #blackid {
            background-color: green;
        }

        /* 通配符选择器 */
        * {
            background-color: black;
            /* 清除所有 html 标记的默认外、内边距
            margin: 0;
            padding: 0;*/
        }

        /* h2 类型的标题居中 */
        h2 {
            text-align: center;
        }
    </style>
</head>
<body>
<h2 align="right">我是标题</h2>    <!-- 优先级被压制 -->
<p>&lt;p&gt;标签选择器</p>

<!-- class选择器: 每个html标签都有一个属性 class -->
<div class="div1">div.div1 选择器</div>
<div class="div2">div[class="div2"] 属性选择器</div>

<div class="grayclass">.grayclass 选择器</div>
<p class="grayclass">.grayclass 选择器</p>

<!-- id选择器: 每个html标签上面有一个属性 id -->
<p id="orangeid">p#orangeid 选择器</p>

<p id="blackid">#blackid 选择器</p>
<div id="blackid">#blackid 选择器</div>

</body>
</html>

充满鲜花的世界到底在哪里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的基本选择器（三种）标签选择器class选择器id选择器

<html><head> <meta charset="UTF-8"> <title>CSS的基本选择器</title> <style type="text/css"> /* 标签选择器 */ p { background-color: red; color: yellow; } div.div..
复制链接

扫一扫

专栏目录