Jquery CSS-外部宽度

我有下面的html，软件会自动添加第一个css样式g2f0

我想去掉这些自动生成的类的宽度属性，这样我就可以使用引导网格类了。我尝试使用如下特殊性，但bootrap网格类在断点处不起作用：

<div class="linelevel row">
    <div class="g2f0 reset-width col-sm-6 form-group">
       <label for="name">Name</label>
       <input id="name" type="text" value="" name="name">
    </div>
 </div>

.linelevel .reset-width {
    width: auto;
}

---

有人知道我可以在g2f0和col-sm-6之间使用一个类来删除g2f0类的宽度吗？

检查CSS文件的顺序。您需要在包含.g2f0类的文件之后导入引导css文件

---

如果您无法编辑订单，那么丑陋的解决方案是编辑booststrap sass/css并添加！对于使用DS.col-xx-xx或在新的其他导入文件中覆盖DS.col-xx-xx的用户很重要。但要小心。

如果您使用的是firefox，只需右键单击页面并使用inspect元素即可。然后找到find your div，查看哪个样式表引起了问题，转到样式表行并删除引起问题的宽度

或者，您也可以使用内联样式表设置引导的宽度，如下所示，这将覆盖所有外部样式表

<div class="g2f0 reset-width col-sm-6 form-group" style="width:...%;height:...%">
   <label for="name">Name</label>
   <input id="name" type="text" value="" name="name">
</div>

---

你想要利用的是CSS的特殊性

如果两个选择器应用于同一个元素，则具有更高特异性的选择器获胜

您的divide有多个类，div.g2f0仅计为一个类，而

div.g2f0.reset-width {
    width: auto;
}

计算为两个类。它具有更高的特异性，因此获胜

特异性计算器

另一个例子

现在，第一个CSS有3个类用于指定g2f0 divide，后面的一个有2个类。具有最大指定宽度的CSS规则表示将使用的宽度为500px。不管秩序如何

。。。您可以仔细排序CSS规则，如果特定性相同，则将使用最后应用的规则。但是，这样做的缺点是，当您在6个月后返回页面时，很难找到正在使用的CSS规则。一个错误更可能发生，这将花费很多时间去发现

浏览器中的inspect元素工具在正确使用特定性时会告诉您正在使用哪个CSS规则

另一种方法是使用ID属性

ID比CSS规则的类更具体

<div class="g2f0 col-sm-6 form-group" id="reset-width">
   <label for="name">Name</label>
   <input id="name" type="text" value="" name="name">
</div>

div#reset-width {
   width:auto
}

添加css3伪选择器第一个子项使其更具特异性

Jquery还支持CSS4伪选择器。。。jquery

$( "div" ).has( #name ).css( "width", "auto" );

---

将使用name的值设置ID所在div的css。。。到width:auto

问题在于，有两个类添加了width-g2f0和col-sm-6。您有两个选项-删除g2f0类的自动添加，或像Wayne向您展示的那样设置自定义宽度：

div.g2f0.reset-width {
    width: 200px; /*your custom width*/
}

---

我有点困惑。你说你想使用引导网格，然而，他们也希望在div上设置width:auto，这似乎是相反的goals@rory抱歉，我的意思是我想删除g2f0类的width属性。@adam78您尝试过我的答案吗？我会将问题的标题更改为包含自动生成的html@Farouk我不能这样做，因为这些类是由软件。如果你不能编辑订单，丑陋的解决方案是编辑booststrap sass/css并添加！对于使用DS.col-xx-xx或在新的其他导入文件中覆盖DS.col-xx-xx的用户很重要。但是要小心。但是div没有.col-sm-6的宽度。它将是自动的。@FAROUKBLALOU您只需在from.col-sm-*yes之后添加宽度，前提是.col-sm-6 width的样式仅使用一个类来指定。我能在html中找到的最具体的是div.g2f0.reset-width.col-sm-6.form-group@Wayne.g1、.g2等类是自动生成的，因此我无法通过硬编码覆盖它们，因为我不知道它们的名称。我所知道的只是它们显示为html中定义的第一个类。@adam78是唯一一个将两个类都重置为width和form组的除法吗？那么您的选择器将是div.reset-width.form-group，并且更具体。

div.g2f0.reset-width.col-sm-6 {
    width:500px;
}
div.g2f0.reset-width {
    width: auto;
}

<div class="g2f0 col-sm-6 form-group" id="reset-width">
   <label for="name">Name</label>
   <input id="name" type="text" value="" name="name">
</div>

div#reset-width {
   width:auto
}

div.form-group:first-child {
    width: auto;
}

$( "div" ).has( #name ).css( "width", "auto" );

div.g2f0.reset-width {
    width: 200px; /*your custom width*/
}

div.g2f0.reset-width{width: auto !important;}