Question

如果他的父母是一个特殊的类（密切订单），我需要为一个输入提供一个css 在这个html中：

<autocomplete id="items" placeholder="Buscar trabajos" pause="400" selectedobject="selectedObject" 
   url="http://localhost:801/categories/query/New Company/" 
   titlefield="type,code,name,price" descriptionfield="Categoria, Codigo, Nombre, Precio" 
   inputclass="form-control form-control-small selector closeoder" 
   class="ng-isolate-scope">
      <div class="input-group autocomplete-holder">
         <form ng-submit="submit()" class="ng-pristine ng-valid">
            <button data-toggle="tooltip" title="Añadir seleccion" class="btn btn-tr btn-link animated pulse- btn" style="color:#81BB31; font-size:20px;">
               <span class="input-group-addon glyphicon glyphicon-plus"></span>
            </button>
         </form>
         <input id="search_value" ng-model="searchStr" type="text" 
            placeholder="Buscar trabajos" class="selector ng-pristine ng-valid">
      </div>
</autocomplete>

autocomplete元素有inputclass closeorder，如何将css设置为输入子元素？

我试过这个：

autocomplete.closeorder > input {
    width: 88% !important;
}

但是不行..

Answer 1

有关CSS选择器的完整列表，请查看 here 基本上，您似乎需要这两个选择器：

<强> E [FOO〜=＆＃34;杆＆＃34;]
一个E元素＆＃34; foo＆＃34;属性值是以空格分隔的值的列表，其中一个值恰好等于＆＃34; bar＆＃34;

E F
E元素的F元素后代

CSS规则应如下所示：

autocomplete[inputclass~="closeoder"] input {
    ...
}

这是：选择任何input元素，该元素是autocomplete元素的后代，其＆＃34;输入类＆＃34;属性值是以空格分隔的值的列表，其中一个值恰好等于＆＃34; closeorder＆＃34;。

另请参阅此 short demo 。

<子> （使用!important很少是一个好主意。了解 CSS specificity 并尝试尽可能避免!imporant。）

Answer 2

一些错误的组合。首先删除inputclass并使用class

在HTML

中修复拼写错误

最后使用这个CSS

.closeorder input[type="text"]{
    width: 88%;
}

！important不是必需的，你应该尽可能使用！important hack。

请参阅DEMO

将css样式应用于父类的子元素

2 个答案: