Question

方案：我有一个宽度重要属性的类。我得到了一些动态id的div，如product1，product2，product3等等。

问题：我想覆盖Id上类所定义的width属性。我尝试使用[id^=product]{}，但元素选择器的类选择器优先级较低，因此无法覆盖它。父元素不能在div上创建，所以继承的css也行不通。有没有我可以用来覆盖类属性的选择器（我知道我需要使用重要的覆盖，但优先级是这里的问题）

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

您可以通过在第二个规则中添加两个类选择器来平衡特异性来解决这个问题：

.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以具有最高优先级的某些字符串开头

2 个答案: