CSS----二

最新推荐文章于 2022-11-18 20:16:30 发布

且-听风吟.

最新推荐文章于 2022-11-18 20:16:30 发布

阅读量403

点赞数

分类专栏： Java 文章标签： css html

本文链接：https://blog.csdn.net/qq_45468597/article/details/114853736

版权

Java 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

CSS选择器

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
CSS选择器有三种：

1、标签选择器：标签选择器会选中这个页面上所有的这个标签的元素
2、类选择器 class:类选择器的格式： .class的名称{}
好处：可以选择多个标签归类，是同一个class，可以复用
3、id 选择器 格式： #id名称{ } 不遵循就近原则 id全局唯一
id选择器> 类选择器> 标签选择器

标签选择器：

<style>
    p{
    color:blue;
    }
        h2{
          color:red;
          background: green;
        }
    </style>

<p>标签选择器：标签选择器会选中这个页面上所有的这个标签的元素</p>
<h2>标签选择器1</h2>
<h2>类选择器2</h2>
<h1>id选择器3</h1>

类选择器：

<style>
    .biaoqian{
       color:red;
    }
    .class{
    color: blue;
    }
    .style1{
    color:green;
    }
    .style2{
    color: yellow
    }
</style>
<body>
<p class="biaoqian">标签选择器：标签选择器会选中这个页面上所有的这个标签的元素</p>
<p class="class">类选择器 class:类选择器的格式： .class的名称{}
    好处：可以选择多个标签归类，是同一个class，可以复用</p>
<h2 class="style1">标签选择器1</h2>
<h2 class="style1">类选择器2</h2>
<h1 class="style2">id选择器3</h1>
</body>

ID选择器：

    <style>
    #biaoqianid{
       color:red;
    }
    #classid{
    color: blue;
    }
    #style1{
    color:green;
    }
    #style2{
    color: yellow
    }
    #id1{
    color:pink;
    }
</style>
</head>
<body>
<p id="biaoqianid">标签选择器：标签选择器会选中这个页面上所有的这个标签的元素</p>
<p id="classid">类选择器 class:类选择器的格式： .class的名称{}
    好处：可以选择多个标签归类，是同一个class，可以复用</p>
<p id="id1">id 选择器  格式： #id名称{ }</p>
<h2 id="style1">标签选择器1</h2>
<h2 id="style2">类选择器2</h2>
<h1 class="style2">id选择器3</h1>

且-听风吟.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS----二

CSS选择器要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。CSS选择器有三种：1、标签选择器：标签选择器会选中这个页面上所有的这个标签的元素2、类选择器 class:类选择器的格式： .class的名称{}好处：可以选择多个标签归类，是同一个class，可以复用3、id 选择器格式： #id名称{ } 不遵循就近原则 id全局唯一id选择器> 类选择器> 标签选择器标签选
复制链接

扫一扫