HTML系列之各种选择器(八)

最新推荐文章于 2023-07-08 17:36:30 发布

JM_杰

最新推荐文章于 2023-07-08 17:36:30 发布

阅读量569

点赞数

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

本文链接：https://blog.csdn.net/dapyandxpy/article/details/73135496

版权

html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示CSS各种选择器</title>
    <style type="text/css">

        /*标签选择器*/
        /*会作用于所有的div标签*/

        div{

        }

        /*类选择器*/
        /*可以通过标签的class属性指定
        指定了class属性为classDemo的标签
        就会有lassDemo这个类选择器中的样式*/
        /*lassDemo就是这个类选择器的名字,名字就可以随意起*/
        .classDemo{
            color: orchid;
            font-size: 30px;
        }

        /*id选择器,通过#符号指定
        idDemo就是下面这个id选择器的名字
        id 属性为idDemo的标签,就会拥有idDemo这个选择器声明中的样式
        因为id属性在一个HTML文档中是唯一存在的
        所以id选择器也会只作用于一个标签
        而类选择器可以被多个标签使用,
        id这个属性一般是留给写js的人使用的
        写js的程序员可以通过id属性找到对应的标签
        然后通过一系列的方法操作这个标签
         所以写html页面的时候基本用的就是类选择器而不会选择id选择器*/
        #idDemo{
            color: yellow;
            font-size: 30px;
        }



    </style>
</head>
<body>
     <p class="classDemo">我是p1:用来显示类选择器的作用,我的颜色和字体大小是被改变了的</p>
     <p>我是p2:我没变过,我是用来证明p1被改变了</p>
     <span class="classDemo">我路过</span>

    <h1 id="idDemo">我是h1标题,用来展示id选择器</h1>


</body>
</html>