Как использовать селектор: not () в CSS3 - манекены

В некоторых случаях легче выбрать объекты в CSS3 в соответствии с характеристиками, которые они не имеют имеют - для сделайте это, вы можете использовать: not (селектор). Например, вы можете изменить форматирование каждого объекта, который не находится в теге

В этом случае вы можете создать список тегов с помощью селектора запятой и надеяться, что ваш список будет завершен, или вы можете просто использовать селектор: not (). Например: not (p) выбирает каждый объект, который не является тегом

. Вы также можете создавать сложные варианты, используя селектор: not (): Селектор: not (div> p), например, выбирает тег

, который не имеет тега в качестве родителя.

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

1. Создать ExternalCSS. HTML и ExternalCSS. CSS и скопировать их в новую папку.

2. Откройте ExternalCSS. HTML.

3. Введите следующий код после существующего тега

   в файл и сохраните изменения на диске.

   Текст в DIV.
   Текст с родителем DIV.
   Текст после DIV.
   Больше текста после DIV.
   

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

   был автоматически отформатирован, как и тег

   

4. Откройте ExternalCSS. CSS.

5. Введите следующий код после существующих стилей и сохраните изменения на диске.

   div> p {text-align: right;} ВСТАВИТЬ ИЗОБРАЖЕНИЕ ДЛЯ 2. 2 ЗДЕСЬ
   

6. Перезагрузить страницу тестирования.

   Обратите внимание, что единственным тегом

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

   

7. Введите следующий код после существующих стилей и сохраните изменения на диске.

   div p {text-decoration: line-through; background-color: # ff7f7f;}
   

8. Перезагрузите тестовую страницу.

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

   

9. Введите следующий код после существующих стилей и сохраните изменения на диске.

   div + p {font-family: monospace; font-style: italic;}
   

10. Загрузите тестовую страницу.

    Возникает только строка, которая появляется непосредственно после нее: шрифт изменен на моноширинный шрифт (обычно зарезервирован для кода) и выделен курсивом.

    

11. Введите следующий код после существующих стилей и сохраните изменения на диске.

    div ~ p {font-weight: bolder; размер шрифта: 30 пикселей; margin: 0px; color: # 7f007f;}
    

12. Перезагрузите тестовую страницу.

    

Обратите внимание, что теги

, которые появляются после тега, затронуты. Теперь шрифт становится полужирным шрифтом и больше. Цвет шрифта также изменился. Особенно важно в этой части примера, что установка поля на 0px избавляет от пробела между строками.