[英]css selector for first element inside a div
I am new to CSS and have to style a <span>
which is this situation: 我是CSS新手,必须设置<span>
样式,这是这种情况:
<div class="ui-select-container ui-select-bootstrap dropdown ng-valid ng-touched ng-dirty ng-valid-parse">
<div class="ui-select-match">
<span class="btn btn-default form-control ui-select-toggle"></span>
</div>
</div>
How to target the <span>
to change its width? 如何针对<span>
更改其宽度? I tried this: 我尝试了这个:
div .ui-select-container > span .class ui-select-toggle{
width: 60%;
}
Please let me know where I am going wrong. 请让我知道我要去哪里了。
Try this 尝试这个
div > .ui-select-match > span {
width:60%;
display:block;
}
hope will help 希望会有所帮助
Try the following CSS: 尝试以下CSS:
.ui-select-container.ui-select-bootstrap.dropdown.ng-valid.ng-touched.ng-dirty.ng-valid-parse > .ui-select-match > span.ui-select-toggle {
width: 60%;
}
Here's a fiddle: https://jsfiddle.net/7geurhvL/1/ 这是一个小提琴: https : //jsfiddle.net/7geurhvL/1/
It looks as though you were targeting the wrong child selector for the span
... In addition, you don't need to specify the word class
when declaring a CSS style, just need to use the following: span.ui-select-toggle
好像您为span
指定了错误的子选择器...此外,在声明CSS样式时无需指定word class
,只需使用以下命令: span.ui-select-toggle
The .
的.
denotes the classname... 表示类名...
You are targenting a div element that have a child with class ui-select-container
a direct children span and a child of type ui-select-toggle
with class class
. 您targenting有带班儿童的div元素ui-select-container
的直接孩子跨越和类型的子ui-select-toggle
带班 class
。
You don't want this. 你不要这个
Space are importants if you want to target a span with a class you must write them without any space, a space mean child of
and don't forget the point to target a class. 如果要使用某个类来定位跨度,则空格很重要,您必须在编写这些空格时不带任何空格,空格是的child of
并且不要忘记指向类的重点。
Try: 尝试:
div.ui-select-container span.ui-select-toggle{
width: 60%;
}
or alternatively: 或者:
div.ui-select-container > div.ui-select-match > span.ui-select-toggle{
width: 60%;
}
More details here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors 此处有更多详细信息: https : //developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors
Use like this it will work 这样使用就可以了
.ui-select-container .ui-select-toggle {
width: 60%;
}
check this link https://css-tricks.com/child-and-sibling-selectors/ 检查此链接https://css-tricks.com/child-and-sibling-selectors/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.