Question

css 选择器问题

如图一是html 图二是css 提问 为什么 要写成 .dots span.actived 才能显示样式 直接用.actived来编辑样式就不起作用





Answer 1

这是优先级问题，如果前面已经用了 .dots span 来定义span的样式，那么后面如果只用 .actived 来给span叠加样式，在优先级上就会吃亏，会被css忽视。只有用 .dots span.actived 才能在优先级上与前面平起平坐甚至是碾压
css对优先级的计算是建立在不同选择器的权重上面的（比如说ID选择器的权重就比类选择器高），多个选择器并存的情况下会把它们的权重值相加后再来比较优先级（所以 .dots span.actived 这是三个选择器并存，而 .actived 只有一个选择器，谁优先一目了然啦！）。这个我就不详细说了，自己查。

追问

对对对，以前课上讲过的，没想起来。

Answer 2

这两种方式是等效的，唯一的不同是：
.dots span的生效范围是当前DIV下的三个<span></span>标签对，
而.actived只控制了一个<span></span>标签对。
也就是不同的原因在于.actived没有全部配置到3个<span></span>标签对，在三对span标签中都加入.actived控制就效果一样了。

Answer 3

也许是因为你的css里有其它的.actived样式覆盖了你当前的样式，前面加上选择条件就把这条css的优先级抬高了，如果想不加前面的条件，在css样式的后面加上!important;比如：
.actived{
box-shadow: 0 0 0 2px rgba(7,17,27,0.4)!important;
background-color:#fff!important;
}
还有你的rgba最后面那个0/4不就是0吗，0代表opacity是0，样式直接变成无颜色了，你至少得给个0.1吧

Answer 4

例如： .ui.item {....}和 .ui .item {....}还有 .ui > .item {....}
第一个匹配： <div class="ul item"></div>；无法匹配：<div class="ul"></div> 和 <div class="item"></div>；
第二个匹配：<div class="ul"><div class="item"></div></div> 中间的 div；
第三个匹配：<div class="ul"><div class="item"></div></div> 中间的 div；无法匹配：<div class="ul"><div class="abc"><div class="item"></div></div></div>。
三个的区别是：
规则 .ul.item 匹配 class 属性同时含有 ul 和 item 的元素；
规则 .ul .item 匹配 class 属性包含 ul 的元素中 *任意的* class 属性包含 item 的元素（二者是祖先元素与后代元素的关系）；
规则 .ul > .item 匹配 class 属性包含 ul 的元素的子元素中 class 属性包含 item 的元素（二者是父元素与子元素的关系，在相邻的层

追问

看不懂啊，我就想知道为啥.actived不能引用样式