div中第一个元素的css选择器

Question

我是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>

如何针对<span>更改其宽度？ 我尝试了这个：

div .ui-select-container > span .class ui-select-toggle{
  width: 60%;
}

请让我知道我要去哪里了。

Answer 1

尝试这个

    div > .ui-select-match > span {
     width:60%;
     display:block;
}

希望会有所帮助

Answer 2

尝试以下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%;
}

这是一个小提琴： https : //jsfiddle.net/7geurhvL/1/

好像您为span指定了错误的子选择器...此外，在声明CSS样式时无需指定word class ，只需使用以下命令： span.ui-select-toggle

的. 表示类名...

Answer 3

您targenting有带班儿童的div元素ui-select-container的直接孩子跨越和类型的子ui-select-toggle带班 class 。

你不要这个

如果要使用某个类来定位跨度，则空格很重要，您必须在编写这些空格时不带任何空格，空格是的child of并且不要忘记指向类的重点。

尝试：

div.ui-select-container span.ui-select-toggle{
  width: 60%;
}

或者：

div.ui-select-container > div.ui-select-match > span.ui-select-toggle{
  width: 60%;
}

此处有更多详细信息： https : //developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Getting_started/Selectors

Answer 4

这样使用就可以了

  .ui-select-container .ui-select-toggle {
   width: 60%;
 }

检查此链接https://css-tricks.com/child-and-sibling-selectors/