CSS ID 以某个具有最高优先级的字符串开头

Question

场景：我有一个 class，宽度很重要属性。我得到了一些 div 的动态 ID，例如 product1、product2、product3 等等..

问题：我想覆盖由 ID 上的 class 定义的宽度属性。我尝试使用 [id^=product]{} ，但元素选择器的优先级低于 class 选择器，因此它无法覆盖它。无法在 div 上创建父元素，因此继承 css 也将不起作用。有没有我可以用来覆盖 class 属性的选择器（我知道我需要使用 important 来覆盖但优先级是这里的问题）

添加 JSFiddle：http://jsfiddle.net/h7vten2v/1/

.someClass.modal{
    width:100px !important;
    border:1px solid #4c4c4c;
}
[id^=prod]{
      width:50px !important;
}

<div id="product1" class="modal someClass">Test</div>
<div id="product2" class="modal someClass">Test</div>
<div id="product3" class="modal someClass">Test</div>
<div id="product4" class="modal someClass">Test</div>

Answer 1

一个属性选择器同样特定于一个class选择器。但是这里有两个 class 选择器，这比只有一个属性选择器更具体。由于两个规则都有重要的 width 声明，因此 !important 根本不会改变优先顺序——第一条规则将仅通过特异性覆盖第二条规则。

您可以通过将两个 class 选择器添加到第二条规则来平衡特异性来解决此问题：

.someClass.modal{
    width:100px !important;
    border:1px solid #4c4c4c;
}
.someClass.modal[id^=prod]{
      width:50px !important;
}

<div id="product1" class="modal someClass">Test</div>
<div id="product2" class="modal someClass">Test</div>
<div id="product3" class="modal someClass">Test</div>
<div id="product4" class="modal someClass">Test</div>

Answer 2

这样试试：

.someClass.modal{
    width:100px !important;
    border:1px solid #4c4c4c;
}
div.someClass[id^=prod]{
      width:50px !important;
}

CSS ID 以某个具有最高优先级的字符串开头

CSS ID starting with some string having highest priority

html

css

css-selectors

css-specificity