Что значит> в CSS?

Question

В файле IUI css они используют следующие селекторы:

body > *:not(.toolbar)
body > *[selected="true"] 

Что означают>, *: not () и * []?

Спасибо.

Answer 1

> означает " является дочерним элементом ". Таким образом, body > *:not(.toolbar) соответствует *:not(.toolbar), что является потомком body.

*:not(.toolbar) соответствует любому элементу, который не имеет класса .toolbar.

*[selected="true"] соответствует любому элементу с атрибутом selected, равным true.

Имейте в виду, что последние два (*:not() и *[] являются частью спецификации CSS3 , и вы, как правило, не можете положиться на них для кросс-браузерной совместимости CSS. , полностью поддерживается в WebKit, который используется iPhone (и, следовательно, iUI).

Answer 2

• > означает прямого ребенка
• * - это универсальный селектор (все)
• :not() означает все, что не указано в скобках
• *[] означает все, что совпадает с тем, что в скобках

В вашем случае:

body > *:not(.toolbar)   // means any element immediately under the body tag that isn't of class .toolbar
body > *[selected="true"]    // means any element immediately under the body tag where the selected attribute is "true"

> и * определены в спецификации CSS 2.1. Псевдокласс :not и селектор [] определены в спецификации CSS 3.

Подробнее см. http://www.w3.org/TR/CSS21/selector.html и http://www.w3.org/TR/css3-selectors/.

Answer 3

означает дочерний элемент

.cont > div {
    color: #fff;
}

Это будет:

<div class="cont">
    <!-- NOTE: THIS NOTE IS TO TELL YOU WHICH IT AFFECTS 
         It only affects the below div. Not the p.
         so "jabberwocky" text would be white, but "lorem ipsum" text in the p, would be the default font color. -->
    <div>jabberwocky</div>
    <p>lorem ipsum</p>
</div>

Answer 4

• > - дочерний селектор

  т.е.

  div > p > b {
   font-size:100px;
  }
  

  Это выберет все b теги внутри p тегов внутри div тегов.

• :not(..) - не селектор

  Соответствует любому элементу на странице, который не соответствует критериям в круглых скобках оператора not. т.е.

  div:not(.toolbar)
  

  Будет соответствовать любому div, у которого нет панели инструментов класса

• [attr='val'] - селектор атрибута

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

  input[checkec='true'] {
    background-color:red;
  }
  

Для получения дополнительной информации вы должны использовать селекторы Google CSS 2.1.