前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >css选择器

css选择器

作者头像
十月梦想
发布2018-08-29 10:27:39
8610
发布2018-08-29 10:27:39
举报
文章被收录于专栏:十月梦想

选择器详解

    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及以下不支持

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-10-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档