html - 将CSS样式应用于父类的子元素

Question

如果他的 parent 是一个特殊的类(class)(closeorder)，我需要为输入应用一个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，如何给 input child 设置 css？

我试过这个:

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

但是不工作..

Answer 1

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

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

英法
E 元素的 F 元素后代

---

CSS 规则应如下所示:

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

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

另请参阅此 short demo .

---

<子>(使用 !important 很少是个好主意。了解 CSS specificity 并尽量避免使用 !important。)