美文网首页
CSS-----选择器

CSS-----选择器

作者: 看这里 | 来源:发表于2022-06-21 10:17 被阅读0次

css中利用选择器选择器选取需设置样式的元素:
1、元素选择符:

   <style>
        div{
            background-color: aqua;
            color:red;
        }
        h1{
            color:antiquewhite;
        }
    </style>
</head>
<body>
    <div>11111111</div>
    <div>111111111111</div>
    <h1>22222222222</h1>
</body>

2、类选择器:

   <style>
        /*两个 样式 里都有作用于同一个div,在style里就近原则 */
        .ibm{
            background-color: blue;
            color:brown 
        }

        .qianfeng{
            color:blueviolet;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <!-- aa,bb 为自己定义的,随便写 -->
    <div>1111111</div>
    <div class="aa bb">22222</div>
    <div class="aa">3333333</div>
    <div class="bb">4444444444</div>
    <div>555555555</div>
</body>

3、id选择器:

  <style>
        #box1{
            background-color: aqua;
        }
        #box2{
            background-color: blanchedalmond;
        }
        #box3{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <!-- 只能写一个id,具有唯一性 -->
    <div id="box1">111111111111</div>
    <div id="box2">22222222222222</div>
    <div id="box3">3333333333333</div>

4、通配符(清边距):

  <style>
        *{
            /* 外边距 */
            margin: 0;
            /* 内边距 */
            padding: 0;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <div>1111111111</div>
    <ul>
        <li>111111</li>
        <li>22222222</li>
        <li>3333333</li>
    </ul>
</body>

5、群组选择器:

    <style>
        /* div{
            background-color: yellow;
        }

        p{
            background-color: yellow;
        }
        h1{
            background-color: yellow;
        } */
        
        /* 群组选择器:提出公共代码,节约代码量 */
        div,p,h1{
            background-color: yellow;
        }
        div,.aaa,h1{
            color: red;
        }
    </style>
</head>
<body>
    <div>22222222222</div>
    <p class="aaa">222222222222</p>
    <h1>33333333333</h1>
</body>

6、后代选择器:

  <style>
        /*后代选择器,包含选择器 
        
        匹配原则:从右到左匹配选择*/
        div p{
            background-color: aqua;
        }

        p b{
            background-color: beige;
        }
    </style>
</head>
<body>
    <div>
        <p>111111111111</p>
    </div>
    <p>22222222222</p>
    <p>
        <b>2222222222222222</b>
    </p>
    <div>
        <b>3333333333333333</b>
    </div>
</body>

7、伪类选择器:

   <style>
        /* 顺序不能改变 link,visited,hover,active*/

        /* 访问前,初始状态 */
        a:link{
            color:yellow;
        }
        /* 访问之后 */
        a:visited{
            color:red;
        }
        /* 鼠标移上 */
        a:hover{
            color:orange;
        }
        /* 点击激活 */
        a:active{
         color: green;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>

相关文章

  • CSS-----选择器

    css中利用选择器选择器选取需设置样式的元素:1、元素选择符: 2、类选择器: 3、id选择器: 4、通配符(清边...

  • css3选择器总结

    选择器分基本选择器和拓展选择器 基本选择器:id选择器,类选择器,元素选择器,通用选择器 拓展选择器:群组选择器,...

  • 「CSS 」选择器

    选择器简单选择器标签选择器类选择器id 选择器通配符选择器属性选择器伪类选择器其他选择器伪元素选择器组合选择器选择...

  • CSS 理解

    选择器 通用选择器: id选择器 class选择器 元素选择器 子选择器 后代选择器 伪类选择器 伪元素选择器: ...

  • CSS 学习总结

    CSS 选择器 { 样式 } 选择器:基础选择器(单个选择器物),复合选择器物 基础选择器:标签选择器,类选择器,...

  • CSS选择器

    通用选择器 元素选择器 类选择器 ID选择器 群组选择器 后代选择器 子代选择器 伪类选择器 通用选择器 元素选择...

  • CSS知识树

    css选择器 基础选择器ID选择器类选择器属性选择器元素选择器组合选择器多元素选择器 ,格式:E,F后代选择器,格...

  • CSS 选择器

    CSS选择器的概念 标签选择器 类选择器 ID选择器 类选择器与ID选择器的区别 子代选择器 后代选择器 子选择器...

  • CSS3 基本选择器

    回顾选择器 通配选择器 元素选择器 类选择器 ID选择器 后代选择器 新增基本选择器 子元素选择器(直接后代选择器...

  • ## CSS选择器

    ## CSS选择器 # 标签选择器 # id选择器 # 类选择器 # 后代选择器 # 子元素选择器 # 交集选择器...

网友评论

      本文标题:CSS-----选择器

      本文链接:https://www.haomeiwen.com/subject/qbgsvrtx.html