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

StackOverflow https://stackoverflow.com/questions/1628485

  •  06-07-2019
  •  | 
  •  

Вопрос

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

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

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

Спасибо.

Это было полезно?

Решение

> означает "является дочерним элементом".Итак body > *:not(.toolbar) Матчи *:not(.toolbar) это дитя body.

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

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

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

Другие советы

  • > означает прямого ребенка
  • * является универсальным селектором (все)
  • :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/ для получения дополнительной информации.

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

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

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

    То есть. 

    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 селекторы для получения дополнительной информации.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top