css选择器

2018-08-29 10:27:39 浏览数 (2)

选择器详解

    1.通配符选择器

        *{...}

    2.标记选择器

        标记名称{...}

    3.class选择器

        .class值{...}

    4.id选择器

        作用

            匹配指定id的样式

        语法

            #id值{...}

    5.群组选择器

        定义一组选择器的样式

        语法

            选择器1,选择器2{...}

    6.后代选择器

        根据元素出现的位置关系来匹配

        语法

            选择器1 选择器2{...}

        说明:至少是父子关系

    7.子代选择器

        说明:必须是父子关系

        语法

            选择器1>选择器2{...}

    8.伪类选择器

        1.链接伪类

            选择器:link      代表元素未访问过的状态

            选择器:visited   代表元素访问过的状态

实例:

代码语言:javascript复制
a:link{color:black;} /*选择器:link{...写入你的样式...}*/
a:visited{color:red;}/*选择器:visited{...写入你的样式...}*/

        2.动态伪类

            选择器:hover     代表鼠标划过的样式

            选择器:active    代表鼠标激活的样式

            选择器:focus     代表获取焦点的状态

代码语言:javascript复制
a:link{color:#122E67;text-decoration:none;}/*表示链接初始状态的时候*/
  a:hover,active{color:#FF9617;text-decoration:underline;}  /*表示鼠标被花果和鼠标长按(点击)状态*/

    9.选择器的优先级(谁的优先级高使用谁的样式)

        谁的权值大谁的优先级高

        选择器         权值

        标记选择器       1

        class选择器     10

        id选择器        100

        内联样式        1000

    10.!important

         作用

            调整样式的优先级

         用法

            选择器{... !important} 则该选择器的优先级最高

         建议

            1.尽量少使用

            2.IE6及以下不支持

优先级进行计算,谁的优先级最大则该样式被选择。

0 人点赞