css选择器

选择器详解

    1.通配符选择器

        *{...}

    2.标记选择器

        标记名称{...}

    3.class选择器

        .class值{...}

    4.id选择器

        作用

            匹配指定id的样式

        语法

            #id值{...}

    5.群组选择器

        定义一组选择器的样式

        语法

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

    6.后代选择器

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

        语法

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

        说明:至少是父子关系

    7.子代选择器

        说明:必须是父子关系

        语法

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

    8.伪类选择器

        1.链接伪类

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

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

实例:

a:link{color:black;} /*选择器:link{...写入你的样式...}*/
a:visited{color:red;}/*选择器:visited{...写入你的样式...}*/

        2.动态伪类

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

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

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

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 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

JavaScript事件与例子

事件,就是预先设置好的一段代码,等到用户触发的时候执行。 一:常见的事件: 1.关于鼠标的事件   onclick 鼠标单击触发   ondblclick 鼠标...

28170
来自专栏偏前端工程师的驿站

CSS3魔法堂:禁止用户改变textarea大小

一、前言                             在FF、Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅...

20680
来自专栏黑泽君的专栏

day02_css学习笔记

9420
来自专栏余生开发

插件集--页面滚动scrollreveal.js

scrollReveal.js 不依赖其他任何文件。不支持 IE10 以下 基本方法

31440
来自专栏向治洪

Android View底层到底是怎么绘制的

Android绘制链图: ? 网上很多讲Android  view的绘制流程往往只讲到了Measure - Layout - Draw。 但是,这只是一个...

27190
来自专栏十月梦想

表格属性(特有)

       设置边框前提border-collapse取值为sparete(不合并),

10630
来自专栏黑泽君的专栏

day01_html学习笔记

24110
来自专栏Android开发与分享

【React Native】react-native-scrollable-tab-view

593120
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— 利用选择器添加内容

  上文讲到了CSS3的选择器,通过after和before选择器,在元素前后添加内容。   也可以通过变量来实现自定义的标题 1     h1:before{...

23150
来自专栏前端小叙

Vue slot简单理解

情形一: 子组件定义了具名的slot,父组件使用具名的slot,slot显示顺序为子组件定义slot的顺序 子组件: Vue.component('child'...

48060

扫码关注云+社区

领取腾讯云代金券