Несколько классов в CSS Selector - PullRequest
Новая
       3

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

50 голосов
/ 05 декабря 2010

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

.class1 .class2 .class3 {
}

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

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

Ответы [ 5 ]

72 голосов
/ 05 декабря 2010

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

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

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

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

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

Это сработало бы и отобразило бы текст красным.

Примечание:

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

8 голосов
/ 05 декабря 2010

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

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

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

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

4 голосов
/ 05 декабря 2010 
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/

3 голосов
/ 05 декабря 2010

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

.blackOnWhite .title {
    color:black;
}

.whiteOnWhite .title {
    color:white;
}
0 голосов
/ 05 декабря 2010

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

Пример (ы):

Напримерследующее правило соответствует любому элементу P, атрибуту «class» которого был присвоен список значений, разделенных пробелом, который включает «pastoral» и «marine»:

p.pastoral.marine {color: green}

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...