css选择器和权值计算

博客介绍了CSS选择器相关知识。包括简单选择器、属性选择器、伪类、伪元素、组合器等分类;阐述了权值计算规则,如千位对应style属性声明,百位对应id选择器等;还说明了样式应用原则,如!important最高,权值大优先,权值相同后声明优先。

选择器分类:

  • 简单选择器:元素选择器、class、id、通用选择器(*)

  • 属性选择器:

    • 精确匹配属性值

      • [attr],存在attr属性的所以元素

      • [attr=val],attr属性等于val的元素

      • [attr~=val],attr属性值可能有多个,val只是其中被空格分隔的一个

    • 类似正则表达式

      • [attr|=val],attr属性的值是val或者以(val-)开头的

      • [attr^=val],attr属性的值,以val开头,包含val

      • [attr$=val],attr属性的值,以val结尾,包含val

      • [attr*=val],attr属性的值,包含val子字符串

  • 伪类

    • 冒号作为前缀

    • 常见伪类

    • link、visited、hover、active(鼠标按下还没有松开时)

    • focus,当点击时,会同时触发focus和active但只能看到focus

    • checked是否选中、enabled/disabled是否可用、empty是否为空

    • first-child选中其父元素下第一个元素、nth-child(n)第几个、last-child最后一个、nth-last-child(n)选中倒数第n个、only-child选中父元素中唯一的子元素

    • first-of-type匹配其父元素中特定元素的第一个、nth-of-type(n)第n个、last-of-type最后一个、nth-last-of-type()倒数第n个、only-of-type选中其父元素只有一个该特定元素的元素

    • not(element)非element的元素

    • root,找到根元素,也就是html

    • required(required)、read-only(readonly)选择设置了括号内属性的元素--------read-write(选择没有设置readonly的元素)--optional(选择没有设置required的元素)适用于input、select、textarea

    • in-range/out-of-range,input元素,当前值在/不在min-max限定范围

    •  

  • 伪元素

    • 前缀两个冒号

    • ::after 、::before,再所选取的元素后加content内容

    • ::first-letter选择特定元素的首字母,(可与以下属性使用:字体属性、颜色属性、背景属性、外边距属性、内边距属性、边框属性、text-decoration、vertical、align(只有在 float 为 'none' 时)、text-transform、line-height、float、clear)

    • ::first-line选择特定元素的第一行,(可与以下属性使用:字体属性、颜色属性、背景属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear)

    • ::selection,匹配鼠标选中的的部分,(可与以下属性:color、background、 cursor、outline)

    • ::backdrop

  • 组合器

    • A,B    匹配满足A(和/或)B的任意元素

    •  

    • A  B     匹配任意元素,满足条件:B是A的后代结点(B是A的子节点,或者A的子节点的子节点)

    • A>B     匹配任意元素,满足条件:B是A的直接子节点

    •  

    • A+B     匹配任意元素,满足条件:B是A的下一个兄弟节点(AB有相同的父结点,并且B紧跟在A的后面)

    • A~B     匹配任意元素,满足条件:B是A之后的兄弟节点中的任意一个(AB有相同的父节点,B在A之后,但不一定是紧挨着A)

 

权值计算:

  • 千位:声明在style属性中的

  • 百位:id选择器

  • 十位:类选择器、属性选择器、伪类

  • 个位:元素选择器、伪元素

  • 通用选择器、复合选择器(+、>、~、“ ”)、否定伪类(:not)没有影响

 

样式应用:

  1.  !important最高,始终采用这个

  2. 权值排序,大的优先

  3. 权值一样,后声明的优先

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值