[英]Apply css style to child element of parent class
i need to aply a css for a input if his parent is a special class (closeorder) In this html: 如果他的父母是一个特殊的类(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>
The autocomplete element has inputclass closeorder, how can i set css to the input child? 自动完成元素具有inputclass closeorder,如何将CSS设置为输入子级?
I tried with this: 我尝试了这个:
autocomplete.closeorder > input {
width: 88% !important;
}
but dont work.. 但是不工作..
For a complete list of CSS selectors take a look here . 有关CSS选择器的完整列表,请在此处查看 。
Basically, you seem to need these two selectors: 基本上,您似乎需要以下两个选择器:
E[foo~="bar"] E [FOO〜= “酒吧”]
an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar" 一个E元素,其“ foo”属性值是由空格分隔的值的列表,其中一个值等于“ bar”
EF EF
an F element descendant of an E element E元素的F元素后代
The CSS rule should look like this: CSS规则应如下所示:
autocomplete[inputclass~="closeoder"] input {
...
}
This reads: Select any input
element that is a descendant of an autocomplete
element whose "inputclass" attribute value is a list of whitespace-separated values, one of which is exactly equal to "closeorder". 内容如下:选择任何
input
元素,该input
元素是autocomplete
元素的后代,该input
元素的“ inputclass”属性值是由空格分隔的值的列表,其中之一与“ closeorder”正好相等。
See, also, this short demo . 另请参见此简短演示 。
(Using !important
is rarely a good idea. Learn about CSS specificity and try to avoid !imporant
as much as possible.) (使用
!important
很少是一个好主意。了解CSS的特殊性,并尽量避免使用!imporant
。)
A combination of a couple of errors. 几个错误的组合。 First remove
inputclass
and use class
首先删除
inputclass
并使用class
Fix the typo to closeorder in the HTML 将错字修正为HTML中的closeorder
and finally use this CSS 最后使用这个CSS
.closeorder input[type="text"]{
width: 88%;
}
The !important is not necessary and you should used the !important hack as least as possible. !important不是必需的,您应尽可能使用!important hack。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.