Несколько классов в селекторе CSS

Я вижу селектор, как это,

.class1 .class2 .class3 {
}

что это значит?

я использовал несколько селекторов классов без пробелов. Пространство означает потомок, но это не имеет смысла для классов.

49
css css-selectors

5 ответов

допустим, есть страница со следующей разметкой,

<div class="class1">
  <div class="class2">
    <div class="class3">
      Some page element(s).
    </div>
  </div>
</div>

в CSS вы предоставили бы стиль всех элементов под класс_3, которые находятся под класс2, которые находятся под класс1.

то есть, скажем, это был стиль,

.class1 .class2 .class3{
  color:red;
}

он будет отображать текст как красный, что эквивалентно следующему,

div.class1 div.class2 div.class3 {
  color:red;
}

наконец, следующее ничего не сделает,

.class1.class2.class3{
  color:red;
}

Edit: если разметка вместо этого была следующее,

<div class="class1 class2 class3">
      Some page element(s).
</div>

он будет работать и отображать текст красным цветом.

Примечание:

http://www.thunderguy.com/semicolon/2005/05/16/multiple-class-selectors-in-internet-explorer/ http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html

70

другие ответы предоставляют вам объяснение, которое вам нужно; я скинусь с практическим случаем использования, чтобы удовлетворить чье-либо любопытство.

общий реальный случай использования для нескольких селекторов классов, разделенных комбинаторами потомков, - это когда сайт имеет другой класс тела для определенных страниц или определенных устройств.

например, рассмотрим эту разметку простого веб-сайта. Помимо верхнего и нижнего колонтитулов, он также имеет столбец содержимого и два боковые панели:

<!-- DTD, html, head... -->
<body>
    <div id="wrap">
        <div id="header">
          <h1>My Site</h1>
        </div>

        <div id="content">
          <!-- ... -->
        </div>

        <div id="side1" class="sidebar"><!-- ... --></div>
        <div id="side2" class="sidebar"><!-- ... --></div>

        <div id="footer">
          <p>Copyright LOLOLOL</p>
        </div>
    </div>
</body>
</html>

настройка по умолчанию может быть организовать #content между .sidebar, сделано с плавающей обман я не здесь.

на мобильном устройстве, помимо изменения размера всего этого для небольшого разрешения, возможно, дизайнер хочет покончить с боковыми панелями, чтобы вернуть некоторое горизонтальное состояние экрана. Помимо медиа-запросов, есть также гораздо более простая возможность использовать серверный код для обнаружения мобильных браузеров и тегов body С класс соответственно, вот так (ASP.NET c# пример):

<% if (((HttpCapabilitiesBase) Request.Browser).IsMobileDevice) { %>
<body class="mobi">
<% } else { %>
<body>
<% } %>

вот где ваш пример пригодится. Дизайнер просто использует следующее правило, чтобы скрыть боковые панели с мобильных устройств:

/* This would appear just beneath the .sidebar { ... } rule */

.mobi .sidebar {
    display: none;
}

конечно, тот же код обнаружения браузера может быть использован, чтобы скрыть разметку боковой панели в целом, размер бритья страницы и все, что джаз, но опять же, это просто еще один способ приблизиться к этому. Я просто даю быстрый практический пример того, как несколько селекторов классов в иерархия может использоваться в CSS.

8
div{
    padding: 5px;
    border: 1px solid #f00
}
.class1 .class2 .class3 {
   background-color: #000;
}

изменит фон самого внутреннего div:

<div class="class1">
  <div class="class2">
     <div class="class3">
     </div>
  </div>
</div>

http://jsfiddle.net/C7QZM/

другими словами, это означает применить стиль для class3, который является ребенком class2, который является ребенком class1.

если вы игнорируете пробелы правило стиля будет применяться следующим образом:

.class1.class2.class3{
   background-color: #000;
}
<div class="class1 class2 class3">
</div>

http://jsfiddle.net/C7QZM/1/

4

это все еще означает потомок, и это имеет смысл для классов, если у вас есть вложенные иерархии. Например:

.blackOnWhite .title {
    color:black;
}

.whiteOnWhite .title {
    color:white;
}
3

чтобы соответствовать подмножеству значений" class", каждому значению должно предшествовать".", в любом порядке.

пример(ы):

например, следующее правило соответствует любому элементу P, "класс" атрибуту был присвоен список разделенные пробелами значения, включающие "пасторальный" и "морской":

п.пастырское.морской { цвет: зеленый }

это правило соответствует, когда class= " pastoral blue aqua marine", но не соответствует для класса= "пасторальный синий".

http://www.w3.org/TR/2004/CR-CSS21-20040225/selector.html#class-html

0