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

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>

自动完成元素具有输入类关闭顺序，如何将 css 设置为输入子级？

我试过这个：

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

但不工作..

Answer 1

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

E[foo~="bar"]
一个 E 元素，其 "foo" 属性值是空格分隔值的列表，其中一个正好等于 "bar"

埃·
E 元素的后代 F 元素

---

CSS 规则应如下所示：

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

内容如下：选择作为autocomplete元素的后代的任何input元素，该元素的"inputclass"属性值是空格分隔值的列表，其中一个值正好等于"closeorder"。

另请参阅此简短演示。

---

_{（使用!important很少是一个好主意。了解 CSS 的特殊性，并尽量避免!imporant。}

Answer 2

几个错误的组合。首先取出inputclass并使用class

修复拼写错误以在 HTML 中关闭顺序

最后使用这个 CSS

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

重要的不是必需的，您应该尽可能少地使用重要的黑客。

查看演示