CSS для первого элемента внутри DIV

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 ... Кроме того, вам не нужно указать слово class при объявлении стиля CSS, просто нужно использовать следующее: span.ui-select-toggle

. обозначает имя класса ...

Answer 3

Вы targenting в Div элемент, иметь ребенка с классом ui-select-container охватывают прямые детей и ребенка типаui-select-toggle с классаclass.

Вы не хотите этого.

Пространство - это импортеры, если вы хотите нацелить сферу на класс с классом, вы должны написать их без пробела, пробел - child of и не забудьте указать цель для задания класса.

Try:

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%; 
} 

проверить это литий nk https://css-tricks.com/child-and-sibling-selectors/