css选择器权重、伪类选择器计算方式

选择器权重

大概内容：

  2. id:千位
  3. class：百位
  4. tag:个位
  5. 一个标签:css选择器权重为（0,0,1）
  6. 一个标签加一个class: css选择器权重为（0,1,1）
  7. 一个标签加一个class加一个id: css选择器权重为（1,1,1）
  8. （1,1,1）>（0,1,1）>（0,0,1）
  9. 同级时按书写顺序，后面覆盖前面！不同级时，按照权重计算！
  10. !important为最高指示，忽略任何权重，属于调试样式

演示

(0,0,1)权重图片：

(0,0,1)

(0,0,1)权重css代码：

  1. div{
  2.     color: chartreuse;
  3. }

(0,0,2)权重图片：

(0,0,2)

(0,0,2)权重css代码：

  1. div > pre{
  2.     color: red;
  3. }

(0,1,2)权重图片：

(0,1,2)

(0,1,2)权重css代码：

  1. div.selector > pre{
  2.     color: green;
  3. }

(1,1,2)权重图片：

(1,1,2)

(1,1,2)权重css代码：

  1. div.selector#selectorid > pre{
  2.     color: blue;
  3.     font-weight:bolder;
  4. }

最高权重图片：

最高

最高权重css代码：

  1. div >pre {
  2.     color: blueviolet !important;
  3. }

伪类选择器计算方式

  1. 伪类an+b 计算方式
  2. a系数：一个是0，一组是1
  3. n变量:[0,1,2,3....]
  4. b:偏移量

伪类选择单个图片展示：

wei-dan

伪类选择单个代码：

  1. /* 匹配第三个an+3,因为a=0,0n+3=3*/
  2. .list > :nth-of-type(3){
  3.     background-color: aqua;
  4. }

伪类选择一组图片展示：

wei-zu

伪类选择一组代码：

  1. /* 选取全部匹配一组
  2. a=1 n=[0,1,2,3....]
  3. a*n
  4. 1*0 0
  5. 1*1 1
  6. 1*2 2
  7. 1*3 3
  8. ...
  9. [1,2,3....]
  10. */
  11. .list > :nth-of-type(n){
  12.     background-color: aqua;
  13. }

伪类选择一个及后面所有图片展示：

3+n

伪类选择一个及后面所有代码：

  1. /*
  2. 第三个元素后面所有元素 n+3 n=[0,1,2,3...]
  3. 0+3 3
  4. 1+3 4
  5. 2+3 5
  6. ...
  7. */
  8. .list > :nth-of-type(n+3){
  9.     background-color: aqua;
  10. }

伪类取前几个图片展示：

qiansan

伪类取前几个代码：

  1. /*取前三个-n+3 n=[0,1,2,3...]
  2. -0+3 3
  3. -1+3 2
  4. -2+3 1
  5. */
  6. .list > :nth-of-type(-n+3){
  7.     background-color: aqua;
  8. }

伪类取后几个图片展示：

housan

伪类取后几个代码:

  1. /*最后三个  换下选择器就可以 */
  2. .list > :nth-last-of-type(-n+3){
  3.     background-color: aqua;
  4. }

更多相关文章

  1. 从Android项目学习Kotlin（一）
  2. 如何获取Android源码
  3. Android之GridView简单说明
  4. Android基于XMPP Smack Openfire开发IM（2）登录openfire
  5. Android(安卓)Service详解（三） AIDL使用解析
  6. Android(安卓)常用的命名规范
  7. android 中 application 的使用
  8. Android(安卓)高手进阶教程(十三)之----Android(安卓)数据库SQLi
  9. Android(安卓)Studio NDK开发在C代码中将Log输出到logcat上面

随机推荐

  1. 使用CSS类作为JS标记是一种不好的做法吗?
  2. 在Javascript / node.js中共享模块之间的
  3. Angular使用jQuery插件与外部控制器中的
  4. 如何更改LeafletJS中的默认加载图块颜色？
  5. element.replaceWith在自定义指令的链接
  6. JavaScript基础知识（二）
  7. electron 将pc端（vue）页面打包为桌面端应用
  8. 系列之前端：从重复造轮子说起
  9. 使用一个CSS选择网页外观而无需重新加载
  10. 具有相同名称的Mutiple按钮显示不同的div