Css знак: Что в CSS означает знак «>»? — Хабр Q&A

Leave a Comment / Css / By /

Содержание

Основы CSS-селекторов на примере котиков

Вам проще воспринимать информацию визуально? При попытке написать CSS-селектор для стилизации конкретных элементов вы так же озадачиваетесь, как и наш мохнатый друг над этим абзацем? Если всё это про вас — не расстраивайтесь, скоро мы это исправим. Если вы только начинаете изучать синтаксис CSS-селекторов, то наверняка вы испытываете трудности с запоминанием того, какой селектор за что отвечает, поэтому я написал для вас это руководство с котиками. Наслаждайтесь!

Выбираем родителей

Чтобы выбрать родительский элемент, достаточно использовать в качестве селектора класс, id или имя элемента. Добавьте после селектора блок объявлений, и этого будет достаточно! Вот пример разметки и стилей:

<div>
  <div></div>
  <div></div>
</div>
.parent {
  border: 10px solid cyan;
}

Вот как стили повлияют на DOM (голубым подсвечен элемент, выбранный нашим селектором):

Выбираем потомков

Потомки бывают двух видов.

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

Прямые потомки

Знак > между селекторами говорит браузеру сперва найти элемент по первому селектору, а затем найти всех прямых потомков этого элемента, соответствующих второму селектору. В следующем примере мы выбираем только тех потомков .child, которые лежат непосредственно внутри .parent:

<div>
  <div>
    <div></div>
  </div>
  <div></div>
</div>
.parent > .child {
  border: 10px solid cyan;
}

Эти селекторы выберут следующие элементы DOM:

Косвенные потомки

Селектор для выбора косвенных потомков менее специфичен, чем селектор для выбора прямых потомков. Он выберет все элементы .

child, вложенные в элемент .parent, независимо от того, насколько глубоко они находятся в DOM-дереве. Чтобы получить такой селектор, нужно разделить два селектора обычным пробелом. В этом примере мы выберем все дочерние .child, вложенные в .parent:

<div>
  <div>
    <div></div>
  </div>
  <div></div>
</div>
.parent .child {
  border: 10px solid cyan;
}

Вот как это будет работать:

Выбираем соседние элементы

Соседним называется элемент, следующий сразу за выбранным элементом, причём они оба располагаются на одном уровне DOM-дерева. Выбирать соседние элементы просто: для этого нужно объединить два селектора знаком +. Взгляните на пример:

<div>
  <div></div>
  <div></div>
</div>
<div>
  <div></div>
</div>
.parent + .sibling {
  border: 10px solid cyan;
}

Как это будет работать на DOM:

Применяем несколько селекторов

Иногда вам может потребоваться применить стили к множеству разных элементов. Как это сделать? Ответ прост: нужно записать селекторы через запятую:

<div>
  <div></div>
  <div></div>
</div>
.parent,
.child {
  border: 10px solid cyan;
}

Вот как это сработает на DOM:

Финишируем

Для дальнейшего изучения CSS-селекторов попробуйте ресурс CSS Diner (но, к сожалению, там нет котиков). Он последовательно научит вас использовать как простые, так и сложные селекторы на примере столовых приборов и вкусной еды.

Права

Спасибо всем любителям котиков с Flickr. Все котики распространяются под Creative Commons Attribution 2.0 Generic.

header-cat | parent-cat-one | kitten-one | kitten-two full-cat-one | full-cat-two | goofy-cat | sibling-cat

знак плюс/минус

«Знак плюс/минус«. Скопировать знак плюс/минус. Знак плюс/минус в Html, Css, Юникоде, Мнемонике..

Скопировать ссылку


  • Что такое знак плюс/минус

    Знак «плюс/минус» — это сдвоенный знак, где в одном знаке соединились два знака плюс и минус
    ±

    Что такое плюс/минус определение:

    Знак плюс/минус (±) — математический символ, который ставится перед некоторым выражением и означает, что значение этого выражения может быть как положительным, так и отрицательным. Часто используется, например, для указания:

    пределов изменения каких-либо параметров;

    инструментальной точности измерения физической величины;

    ожидаемого разброса значений статистически измеренного параметра;

    интервала значений результата в приближённых математических вычислениях.

    Второй знак плюс/минус

    Существует ещё один знак «плюс/минус«, где минус стоит выше плюса:
    ∓

    Где используется знак плюс/минус

    Одно из тех мест, где используется знак «плюс/минус» — это калькулятор. Когда требуется поменять знак числа на табло на противоположный.

    Если знак положительный и вы нажимаете знак «плюс/минус«, то число получится отрицательным.

    Если знак отрицательный, нажимаете знак «плюс/минус«, то число получится положительным.

    Скопировать ссылку


  • Скопировать обычный знак плюс/минус:

    ± Для того, чтобы скопировать знак плюс/минус, нажмите кнопку ; «Скопировать знак плюс/минус. «

    Скопировать ссылку


    Скопировать знак плюс/минус в Юникоде :

    U+00B1 Для того, чтобы скопировать знак плюс/минус в Юникоде нажмите кнопку ; «
    Скопировать знак плюс/минус в Юникоде    «

    Скопировать ссылку


    Скопировать знак плюс/минус в html &#177;

    ± Для того, чтобы скопировать знак плюс/минус в html нажмите кнопку ; «Скопировать знак плюс/минус в html«

    Скопировать ссылку


    Скопировать знак плюс/минус в Мнемонике &plusmn;

    ± Для того, чтобы скопировать знак плюс/минус в Мнемонике нажмите кнопку ; «Скопировать знак плюс/минус в Мнемонике«

    Скопировать знак плюс/минус CSS-код \00B1

    \00B1 Для того, чтобы скопировать знак плюс/минус в CSS нажмите кнопку ; «Скопировать знак плюс/минус CSS-код«
    Как использовать такой знак плюс/минус — см. здесь

    Скопировать ссылку


  • Набрать знак плюс/минус на клавиатуре.

    Я реально задолбался пытаясь набрать с клавиатуры знак плюс/минус!

    Но на самом деле просто нужно знать порядок нажатия сочетания клавиш — это сочетание работает везде!

    Сочетание клавиш для написания знака плюс/минус

    alt + 0 + 1 + 7 + 7

    Технология нажатия Сочетания клавиш для вывода знака плюс/минус

    Как бы странно этоне звучало, но нужно знать технологию нажатия данного сочетания калиш для вывода знака плюс/минус!

    Правильное нажатие сочетаний клавиш для знака плюс/минус

    Нажимаем кнопку «alt» и не отпускаем!

    Поочередно, т.е. друг за другом нажимаем — 0

    1

    7

    7

    После того, как вы нажали все цифры — вот только тогда отпускаем «alt»!

    Скопировать ссылку


  • Набираем знак плюс/минус на клавиатуре в блокноте

    Для примера наберем знак плюс/минус на клавиатуре в блокноте, для этого вам понадобится:

    Открываем блокнот

    И набираем соответствующим образом сочетание клавиш для знака плюс/минус с клавиатуры, смотрим результат:

    Вывод : с клавиатуры в блокноте можно набрать знак плюс/минус!

    Скопировать ссылку


  • Набираем знак плюс/минус на клавиатуре в word.

    В следующем примере рассмотрим как набрать знак плюс/минус на клавиатуре в word, для этого вам понадобится:

    Открываем программу word

    Абсолютно аналогично набираем сочетание клавиш для знака плюс/минус с клавиатуры, смотрим результат:

    Вывод : с клавиатуры в word можно набрать знак плюс/минус!

    Скопировать ссылку


  • Набираем знак плюс/минус на калькуляторе.

    На сайте есть собственный калькулятор — который был навеян калькулятором из Windows 10.

    Поэтому у этих двух калькуляторов — знак плюс\минус находится в одном месте!

    Итак!

    Если мы посмотрим на левый нижний угол калькулятора. то увидим данный знак плюс минус на калькуляторе.

    Нажав на него вы получите либо плюс любо минус в зависимости от знака числа!

    Вывод : на калькуляторе можно набрать знак плюс/минус!

    Скопировать ссылку


    • Где знак плюс/минус в таблице символов.

      Для того, чтобы найти знак « плюс/минус в таблице символов» вам понадобится:

      Открываем таблицу символов

      Давайте посмотрим на мою таблицу символов!

      Где а данной таблице символов знак «плюс/минус»

      Знак «плюс/минус» находится на позиции: 6 строка 12 столбец.

      Скопировать ссылку

    1. Ищем знак плюс/минус в таблице символов.

      Если вдруг… по какой-то причине у вас нет такого знака «плюс/минус» в том положении, что я описал выше пунктом — не беда вы можете его (знак) найти с помощью поискав таблице символов!

      Для поиска знака плюс/минус вам понадобится:

      Открываем таблицу символов

      Нажимаем кнопку дополнительные параметры.

      набор символов — Юникод.

      Группировка — все.

      В строке поиск вводим :

      Plus-Minus

      Нажимаем искать!

      Вот вам результат нахождения кнопки «плюс/минус» в таблице символов.

      Скопировать ссылку

    2. Как скопировать знак плюс/минус в таблице символов.

      После того, как в нашли знак «знак плюс/минус» в таблице символов — вам требуется сокпировать его!

      Для этого вам понадобится:

      Нажимаем кнопку выбрать.

      Знак плюс/минус появится в строке для копирования.

      Нажимаем скопировать!

    • Теги :
    знак плюс минус скопировать
    знак плюс минус символ скопировать
    знак плюс минус
    знаки 1 1 плюс минус
    знак плюс минус значение
    найди знаки плюс и минус
    знаки 1 1 плюс минус равно
    знаки плюс минус 1 класс
    со знаками плюс минус
    знак плюс минус на клавиатуре
    знак плюс минус между цифрами
    как поставить знак плюс минус
    знаки плюс минус картинки
    знак плюс минус символ
    математические знаки плюс минус
    эксель знак плюс минус
    используя знаки плюс и минус запишите
    знаки плюс минус распечатать
    знак плюс минус скопировать
    плюс-минус в круге символ

    Что означает селектор CSS «>» (знак больше)?

    спросил

    Изменено 1 год, 11 месяцев назад

    Просмотрено 252к раз

    Например:

     
     div > p. some_class {
  /* Некоторые объявления */
}

    Что именно означает > означает знак?

    • css
    • css-selectors

    > — дочерний комбинатор, иногда ошибочно называемый комбинатором прямого потомка. 1

    Это означает, что селектор div > p.some_class соответствует только абзацам .some_class , которые вложены непосредственно внутри a div , а не абзацам, которые вложены дальше. Это означает, что каждый элемент, соответствующий div > p.some_class обязательно также соответствует div p.some_class с комбинатором-потомком (пробелом), поэтому их часто путают.

    Иллюстрация сравнения дочернего комбинатора с комбинатором-потомком:

     div > p.some_class {
    фон: желтый;
}
div p.some_class {
    красный цвет;
} 
     <дел>
    
    Текст здесь
     
    <цитата>
        
    Дополнительный текст здесь

    Каким элементам соответствуют какие селекторы?

    1. Соответствует как div > p.some_class , так и div p.some_class
      Этот p.some_class расположен непосредственно внутри div , поэтому между обоими элементами устанавливается связь parent-child. . Поскольку «дочерний элемент» является типом «потомка», любой дочерний элемент по определению также является потомком. Поэтому применяются оба правила.

    2. Соответствует только div p.some_class
      Этот p.some_class содержится в блок-кавычке внутри div , а не в самом div . Хотя этот p.some_class является потомком div , он не дочерний; это внук. Следовательно, применяется только правило с комбинатором-потомком в его селекторе.

    1 Многие люди идут еще дальше, называя это «прямым дочерним элементом» или «непосредственным дочерним элементом», но это совершенно не нужно (и невероятно раздражает меня), потому что дочерний элемент в любом случае является непосредственным по определению , поэтому они означают одно и то же. Нет такого понятия, как «косвенный ребенок».

    15

    > (знак больше) — это комбинатор CSS.

    Комбинатор — это то, что объясняет взаимосвязь между селекторами.

    Селектор CSS может содержать более одного простого селектора. Между простыми селекторами мы можем включить комбинатор.

    В CSS3 есть четыре разных комбинатора:

    1. селектор потомков (пробел)
    2. дочерний селектор (>)
    3. селектор соседнего брата (+)
    4. общий родственный селектор (~)

    Примечание: < недопустимо в селекторах CSS.

    Например: 

     

<голова>
<стиль>
дел > р {
    цвет фона: желтый;
}


<тело>
<дел>
  
    Абзац 1 в разд.
    
  
    Абзац 2 в разд.
    
  
    Абзац 3 в div.

    Абзац 4. Не в разделе.

    Абзац 5. Не в разделе.

    Вывод:

    Дополнительная информация о комбинаторах CSS

    3

    Как упоминают другие, это дочерний селектор. Вот соответствующая ссылка.

    http://www.w3.org/TR/CSS2/selector.html#child-selectors

    2

    Он соответствует элементам p с классом some_class , которые непосредственно являются под раздел .

    Все теги p с классом some_class , которые являются прямыми потомками тега div .

    0

    (дочерний селектор) был введен в css2. div p{ } выбирает все элементы p, являющиеся потомками элементов div, тогда как div > p выбирает только дочерние элементы p, а не внуки, праправнуки и т. д.

     <стиль>
  div p{ color:red } /* соответствует обоим p*/
  div > p{ color:blue } /* соответствует только первому p*/

<дел>
   
    тег para, дочерний элемент и потомок p.
    
   <ул>
       
  • 
            
    пункт внутри списка. 
    
       
    •

    Для получения дополнительной информации о CSS Ce[lectors и их использовании, проверьте мой блог, селекторы css и селекторы css3

    HTML

     <дел>
    
    текст лорем (он будет красного цвета)
    
    <дел>
        
    текст лорема (он НЕ будет красного цвета)

    текст лорем (он будет красного цвета)