Несколько классов в CSS Selector

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

.class1 .class2 .class3 {
}

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

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

Ответ 1

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

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

Изменить: Если разметка была следующей,

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

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

Примечание: < IE7 может иметь проблемы с вышеуказанным...

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

Ответ 2

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

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

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

<!-- 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 s, выполненное с помощью некоторой плавающей обманки, к которой я не подключусь.

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

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

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

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

.mobi .sidebar {
    display: none;
}

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

Ответ 3

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

Ответ 5

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

Пример (ы):

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

p.pastoral.marine {color: green}

Это правило соответствует, когда class= "пасторальный синий аква морской", но не соответствует для class= "пасторального синего".

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