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样式时，您不需要指定单词class，只需要使用以下内容：span.ui-select-toggle

.表示类名...

Answer 3

您正在考虑一个div元素，该元素的子级为ui-select-container的子级为直接子级，类型 ui-select-toggle的子级为 class 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/en-US/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/

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

4 个答案: