Что означает .class-name как селектор CSS?

Question

Итак, если у меня есть CSS-класс с именем «class-name», что означает следующее?

.class-name {
  margin: 0;
}

И почему, если у меня был следующий HTML

<div id="some-id">
    <ul>
        <li class="class-name">
    ...

Селектор

#some-id .class-name ul li

не существует?

Answer 1

.class_name означает выбор элементов этого класса.

#some-id .class-name ul li означает «выбрать элементы li, которые находятся в элементах ul, которые находятся в элементах, с классом« имя_класса », которые находятся внутри внутреннего html элемента с именем« some-id »»

Answer 2

Первый означает, что вы, вероятно, думаете, что это означает: любой элемент HTML с классом class-name будет иметь поле шириной 0 (для каждой стороны, то есть сверху, снизу, слева и справа).

Второй вопрос немного более тонкий. Этот селектор

#some-id .class-name ul li

Применяется только к li, найденному под ul, найденному под элементом с классом class-name, найденному под элементом с идентификатором some-id.

Вы должны использовать такой селектор, чтобы применить его к HTML, который вы указали выше:

#some-id ul li.class-name

Обратите внимание, что в этом селекторе нет пробела между li и .class-name. Указание li.class-name означает «li с именем класса class-name», тогда как li .class-name (с пробелом) будет означать «элемент с классом class-name найден ниже * 1026» * an li ".

Answer 3

#some-id ul li.class-name 

- это то, что вам нужно ..

#some-id .class-name ul li

предназначено для li потомков ul потомков имени класса под # some-id

Answer 4

.class-name указывает элемент, имеющий класс class-name.Селектор #some-id .class-name ul li указывает li, который является потомком ul, который является потомком некоторого элемента с классом class-name, который является потомком #some-id.Чтобы указать конкретный тип элемента, который имеет класс class-name, вы должны сделать tag.class-name - например, div.author-credit.

Answer 5

Поскольку class-name находится на li, а не в качестве элемента, обертывающего li.

Для пояснения:

<div id="some-id">
   <div class="class-name">
     <ul>
       <li>

Будет соответствовать строке селектора, которую вы упомянули.

Answer 6

У вас селектор не в порядке, чтобы выбрать li, которые являются классами "class-name":

#some-id ul li.class-name  

Answer 7

Этот селектор ожидает ul и li для элемента с .class-name. Ваша структура HTML соответствует следующему селектору

#some-id ul li.class-name

Answer 8

Просто пропустите использование селекторов в большинстве случаев. Это делает CSS легче писать, читать и использовать. также ваш программист. Да, вы можете использовать их для применения CSS, но классы для идентификатора предназначены для сценариев, чтобы находить элементы и заменять их или другие программы для извлечения информации из них и т. Д.

Вы можете действительно все испортить, сейчас или в будущем, используя идентификаторы для CSS.