其他分享
首页 > 其他分享> > 【前端工程师手册】30分钟搞清楚选择器和权重

【前端工程师手册】30分钟搞清楚选择器和权重

作者:互联网

有哪些选择器

基本选择器

  1. 通配选择器(*)
  2. ID选择器(#ID)
  3. 类选择器(.className)
  4. 元素选择器(tagName)
  5. 后代选择器(a b)
  6. 子元素选择器(a>b)
  7. 相邻后面兄弟元素选择器(a + b)
  8. 通用后面兄弟选择器(a 〜 b)
  9. 群组选择器(selector1,selector2,...)

这里面平时不太常用的选择器有相邻后面兄弟选择器通用后面兄弟选择器
首先,很多资料上把它们叫做相邻兄弟选择器通用兄弟选择器,我觉得这样会有一定的误导意义,
例如:
`

<ul>
    <li class="l1">1</li>
    <li class="l2">2</li>
    <li class="l3">3</li>
    <li class="l4">4</li>
    <li class="l5">5</li>
    <li class="l6">6</li>
    <li class="l7">7</li>
    <li class="l8">8</li>
    <li class="l9">9</li>
</ul>
li {
    list-style: none;
    height: 20px;
    width: 20px;
    background: red;
    margin: 10px;
    border-radius: 10px;
    text-align: center;
    color: white;
    float: left;
    line-height: 20px;
}

`
图片描述

当使用相邻兄弟选择器时:

.l3 + li {
    background: green;
}

效果为:
图片描述

可以看出相邻兄弟选择器只会选择它后面的一个兄弟元素。
当使用通用兄弟选择器:

.l3 ~ li {
    background: green;
}

效果为:
图片描述

可以看出来通用兄弟选择器会选择它后面所有的兄弟元素

属性选择器

属性选择器中有波浪(〜)时属性值有value时就相匹配,没有波浪(〜)时属性值要完全是value时才匹配

伪类选择器

动态伪类


在链接中常看到的锚点伪类:link、visited、hover、active

UI元素状态伪类


例如 :enabled,:disabled,:checked等,这些主要是对一些表单元素操作。
比较常见的如"type="text"有enable和disabled两种状态,前者为可写状态后者为不可写状态。

CSS3的:nth选择器

权重如何计算

根据样式所在位置,对元素的影响也有关系:内联样式(标签内style形式) > style标签 > link标签
根据选择器的类型,id选择器 > 类、属性选择器和伪类选择器 > 元素和伪元素
一般来说我们的计算方式为,从0开始,一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1

参考资料:
你应该知道的一些事情-css权重
css选择器-基本选择器
css选择器-属性选择器
css选择器-伪类选择器

标签:30,搞清楚,attr,伪类,元素,value,选择器,属性
来源: https://www.cnblogs.com/homehtml/p/11967352.html