HTML5-选择器续

最新推荐文章于 2023-04-01 22:39:38 发布

vivianlisunny

最新推荐文章于 2023-04-01 22:39:38 发布

阅读量150

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/vivianlisunny/article/details/74150547

版权

HTML5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

十、通配符选择器
1、作用：给当前界面所有标签设置属性
2、注意点：当界面标签太多时会影响性能，一般不用

*{
           color: red;
       }

选择器小练习

<head>
    <meta charset="UTF-8">
    <title>选择器练习</title>
    <!--将两个p标签设为红色-->
    <style>
       /*1、标签选择器*/
        p{
            color: red;
        }

        /*2、id*/
        #identity1{
            color: red;
        }
        #identity2{
            color: red;
        }

        /*3、类选择器*/
        .para{
            color: red;
        }

        /*4、后代选择器*/
        div p{
            color: red;
        }

       /*5、子元素选择器*/
       div>p{
           color: red;
       }

       /*6、交集选择器*/
       p.para{
           color: red;
       }

       /*7、并集选择器*/
       #identity1,#identity2{
           color: red;
       }

       /*8、通用兄弟选择器*/
       h1~p{
           color: red;
       }

       /*9、续选择器*/
       p:nth-of-type(n+1)){
           color: red;
       }

       /*10、属性选择器*/
       p[id]{
           color: red;
       }

    </style>
</head>
<body>

<div>
    <h1>title</h1>
    <p id="identity1" class="para">paragraph 1</p>
    <p id="identity2" class="para">paragraph 2</p>
</div>

</body>

vivianlisunny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5-选择器续

十、通配符选择器 1、作用：给当前界面所有标签设置属性 2、注意点：当界面标签太多时会影响性能，一般不用*{ color: red; }选择器小练习<head> <meta charset="UTF-8"> <title>选择器练习</title>  <style> /*1、标签选
复制链接

扫一扫