CSS 选择器

2018-04-20 本文已影响8人 child_cool

标签选择器

<!-- 语法：
        html标签 {属性： value；} 
    -->

    <!-- 常用属性
        color 前景色（文字颜色)
        background-color 背景色
        font-size 设置文字大小
        width 宽
        height 高
     -->

<style type="text/css">
        p {
            color: red; /*改变文字颜色*/

            font-size: 22px; /*改变文字大小*/

            background-color: pink; /*设置背景颜色*/

            width: 300px;

            height: 300px;
        }

        div {
            color: gray;

            font-size: 30px;
        }
    </style>

类选择器

<!-- 类样式主要是为了处理公有的样式 -->
    <!-- 语法
    .class_name {key: value;}
     -->
     <!-- 调用方式
    <p class="red public">
      -->
    <!-- 类名命名规范
        1.不能使用纯数字或者以数字开头
        2.尽量不使用汉字
        3.不能使用特殊字符或者以特殊字符开头
        4.不使用标签名做类名
     -->

类常用命名

C600A2A7-53EC-4760-9C35-BBF92373F938.png

ID选择器

/*语法
        #ID_name {key: value;}
        */
        /*使用需要给标签添加一个id属性，每个标签的id属性值唯一*/
        /*id选择器与类选择器的区别
        一个类样式可以被多个标签同时掉用
        页面中标签的id值唯一
        一个标签只能调用一个id样式
        */

通配符选择器

/*语法：* {key: value;}*/
        /*会选中页面中的所有标签,全局设置样式，一般用于页面初始化标签样式*/

标签指定式选择器

/*标签指定式选择器*/
        div.one {
            color:red;
        }
        div#two {
            color:pink;
        }

        /*标签指定式选择器*/
        /*语法：
        标签名.class_name {key: value;}
        标签名#id_name {key: value;}

        关系是 且
        */

交集选择器
后代选择器

        div span {
            color: yellowgreen;
        }
        /*后代选择器
        标签之间必须是嵌套关系
                选择器与选择器之间使用空格隔开
                只能选中后代标签
        */
        /*语法
        选择器 选择器 {key: value;}
        */

子代选择器

/*子代选择器选择器之间必须是嵌套关系
        只能选中直接后代元素  
        */
        /*语法 选择器>选择器 {key: value;}*/

        div>span {
            color: red;
        }

<body>
    <div class="one">
        <span>子代span标签</span>
        <p><span>后代span标签</span></p>
    </div>
</body>

并集选择器

div,p,span {
            color: red;
        }
        /*并集选择器
        选择器之间使用逗号隔开
        选择器标签之间的结构可以是任意关系
        */
        /*语法
        选择器，选择器 {key: value;}
        */

属性选择器

<style type="text/css">
/*      [class] {
            color: red;
        }*/
        
        /*选中多个属性*/
/*      [id][class] {
            color: orange;
        }*/

        /*给属性赋值*/
/*      [class="two"] {
            color: pink;
        }
*/
        /*属性值是否以o开头*/
/*      [class^=o] {
            color: red;
        }*/
        
        /*属性值是否以o结尾*/
    /*  [class$=o] {
            color: red;
        }*/

        /* 属性值中是否包含o*/
        [class*=o] {
            color: red;
        }
        /*属性选择器*/
        /*[属性名]{key: value;}
            [属性名="value"]{key: value;}
        */

    </style>

<body>
    <div>div</div>
    <div class="two">class div</div>
    <div class="one" id="ID">wenzi</div>
</body>

伪类选择器

结构伪类



 <style type="text/css">
     /*li:first-child 代表选中父标签中第一个元素li*/
     li:first-child {
         color: red;
     }
     /*选中最后一个标签li*/
     li:last-child {
         color: red;
     }

     /*选中第二个标签li*/
     li:nth-child(2) {
         color: pink;
     }
     
     /*选中倒数第二个标签*/
     li:nth-last-child(2) {
         color: green;
     }

     /*选中奇数标签*/
     li:nth-child(odd) {
         color: orange;
     }
     
     /*选择偶数标签*/
     li:nth-child(even) {
         color: red;
     }
 </style>
 
 <ul>
     <li>li1</li>
     <li>li2</li>
     <li>li3</li>
     <li>li4</li>
     <li>li5</li>
     <li>li6</li>
     <li>li7</li>
     <li>li8</li>
     <li>li9</li>
     <li>li10</li>
 </ul>

> 伪元素选择器

CSS 选择器

猜你喜欢

热点阅读