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

我是CSS新手，必须设计一个

，这就是这种情况：

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

请告诉我哪里出了问题。

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

这是一把小提琴：

看起来您为

span

选择了错误的子选择器。。。此外，在声明CSS样式时，不需要指定单词

class

，只需使用以下命令：

span.ui选择切换

表示类名…

试试这个

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

---

希望将有助于

您针对的是一个div元素，该元素有一个子元素class

ui-select-container

直接子元素span和一个子元素type

ui-select-toggle

withclass

class

你不会想要这个的

空间是很重要的如果你想用一个类来定位一个跨度，你必须在没有任何空间的情况下编写它们，一个空格意味着

的子类，并且不要忘记定位一个类的点

尝试：

或者：

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

更多详情请点击此处：
像这样使用它会起作用

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

检查此链接

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

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