Css селекторы: Универсальные селекторы — CSS | MDN

 div ~ p { 
  background-color  : желтый; 
 } 

Он будет нацелен на теги Banana и Cherry

.

Надеюсь, вам понравился этот обзор CSS Combinators.

Понравилась моя статья? Кофе поддерживает мою мотивацию, купи мне одну! 😛

— Аникет Кудале

Селекторы CSS | Примеры CSS и HTML | Документация

Содержание

[ Скрывать ]

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

Чтобы научиться пользоваться Селектор Запросов() и QuerySelectorAll() способы запроса элементов DOM, которые соответствуют селектору CSS, см. статью Как использовать селектор CSS . В этой статье вы узнаете, как эффективно применять селекторы для выбора элементов, которые вы хотите стилизовать.

В этой статье вы узнаете, как эффективно применять селекторы для выбора элементов, которые вы хотите стилизовать. Вы познакомитесь с базовыми селекторами, селекторами-комбинаторами, селекторами атрибутов и псевдоселекторами. Знание CSS-селекторов будет полезно как фронтенд-разработчикам, веб-дизайнерам, так и всем разработчикам, использующим CSS и работающим с (X)HTML-документами.

Селекторы CSS используются для выбора элементов HTML, которые вы хотите стилизовать, и применить набор правил CSS. Существует несколько различных типов селекторов CSS.

• Основные селекторы выберите элементы на основе имени, идентификатора, класса или выберите все элементы на веб-странице.
• Селекторы атрибутов выберите элементы HTML, которые имеют определенный атрибут или атрибут с указанным значением.
• Селекторы групп выберите элементы, сгруппированные в списки, разделенные запятыми.
• Селекторы комбинаторов выбирать элементы на основе определенного отношения между ними. Элементы могут быть сопоставлены на основе того, как они расположены относительно друг друга в коде разметки или как они вложены в объектную модель документа.
• Псевдоселекторы выбирать элементы или часть элемента на основе определенного состояния. Псевдоклассы используются в селекторах CSS, чтобы разрешить форматирование на основе информации, не содержащейся в дереве документа.

Вы можете комбинировать селекторы CSS различными способами для достижения большей специфичности и гибкости.

Базовые селекторы CSS выбирают элементы HTML в соответствии с их идентификатором, классом, типом или выбирают все элементы на веб-странице.

Селектор типа или селектор элементов указывает, к каким элементам должно применяться правило, путем присвоения имени типу элемента, например

CSS

 h2 {
выравнивание текста: по центру;
цвет: темно-красный;
}
 

Пример HTML

  
Aspose.HTML для .NET
 
Aspose.HTML для .NET – это кроссплатформенная библиотека классов, которая позволяет вашим приложениям выполнять широкий спектр задач по работе с HTML.
 

Селектор ID выбирает определенный элемент, используя атрибут id

CSS

 #демо {
  цвет фона: #fcded4;
размер шрифта: 24pt;
}
 

Пример HTML

 
Этот абзац имеет специальный идентификатор!
Это обычный абзац.
 

Селектор класса сопоставляет элементы HTML с определенным атрибутом класса . Вы можете использовать class атрибут для всех элементов HTML, допустимых в разделе body HTML-документа, включая сам элемент . Чтобы выбрать элементы с определенным классом, напишите символ точки (.), а затем имя класса. Например, если мы хотим, чтобы все элементы с классом "main" имели разные цвет фона, цвет текста и размер шрифта, мы должны использовать следующее правило CSS:

CSS

 . main {
цвет фона: #d4e9фк;
красный цвет;
    размер шрифта: 16pt;
}
 

Пример HTML

  
Селектор класса CSS
 
Атрибут класса и его значение можно использовать для создания селектора CSS, который ссылается на выбранный веб-элемент.
Точка (.) используется для обозначения атрибута класса для создания селектора классов CSS.
 

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

CSS

 * {
    выравнивание текста: по центру;
    цвет: #0154a2;
}
 

Пример HTML

  
Универсальный селектор CSS
 
Универсальный селектор выбирает все элементы. Звездочка будет нацелена на каждый элемент на странице.
  

 

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

Селектор CSS	Пример	Описание
[атрибут]	[перевести]	Выбирает все элементы с именем атрибута translate .
[атрибут=значение]	[перевести=нет]	Выбирает все элементы с translate="no" . Представляет элементы с именем атрибута translate , значение которого равно , а не .
[атрибут~=значение]	[название~=цветок]	Выбирает все элементы с атрибутом title , содержащим слово flower .
[атрибут|=значение]	[язык|=де]	Выбирает все элементы со значением атрибута lang , равным «de» или начинающимся с «de-» . Он часто используется для совпадения субкода языка. 9= «#»]	Выбирает каждый элемент , чье значение атрибута href имеет префикс, начинается с «#» (внутренние ссылки).
[атрибут$=значение]	а[href$=».html»]	Выбирает каждый элемент , чье значение атрибута href имеет суффикс (после него) значение, заканчивается на «.html» .
[атрибут**=*значение]	а[href*=“как”]	Выбирает каждый элемент , чье значение атрибута href содержит «aspose» в любом месте URL-адреса.

Рассмотрим в качестве примера один из селекторов атрибутов CSS:

CSS

 h4[class*="1"] {
    цвет фона: #b4e8fd;
}
 

Пример HTML

  
Селектор атрибутов CSS
 
 
Селектор атрибутов CSS
 
 
Селектор атрибутов CSS
 
 

При желании вы можете стилизовать множество селекторов. Просто разделите селекторы запятой, как показано в следующем примере:

CSS

 h2, h3, h4 {
    цвет: #36С;
    семейство шрифтов: Helvetica;
}
 

Пример HTML

  
Селектор группы CSS (,)
 
 
Заданный стиль будет применяться к элементам h2, h3 и h4.
 
 
Порядок в списке не имеет значения.
 
 

Комбинирующие селекторы выбирают элементы на основе взаимосвязи между ними. В CSS есть четыре различных комбинатора: селектор потомков (пробел), селектор дочерних элементов (>), селектор смежных элементов (+) и общий селектор элементов (~):

CSS-селектор	Пример	Описание
элемент элемент	раздел стр	Комбинатор " " (пробел) выбирает все элементы , которые являются потомками первого элемента .
элемент>элемент	дел > диапазон	Комбинатор > выбирает все элементы , где родительским является элемент .
элемент+элемент	дел + р	Выбирает первые элемент, который размещается сразу после элементов. Комбинатор + соответствует второму элементу только в том случае, если он сразу после следует за первым элементом.
элемент~элемент	дел ~ стр	Комбинатор ~ выбирает братьев и сестер. Это означает, что он выбирает каждый элемент , которому предшествует элемент .

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

CSS

 div > p {
цвет фона: #d4e9fc;
}
 

Пример HTML

 

    
Селектор дочерних элементов CSS (>). Пункт 1 находится в разделе.
    <раздел>
        
Абзац 2 находится в div, но внутри элемента section. Это не прямой потомок элемента div, который соответствует первому селектору. Поэтому фонового цвета нет!
    
    


Абзац 3 вообще не находится в div. 
 

Псевдоселекторы позволяют форматировать элементы на основе информации, отличной от положения элемента в дереве документа. Селекторам псевдокласса и псевдоэлемента предшествует двоеточие : и :: .

Псевдокласс используется для определения особого состояния элемента. Например, его можно использовать для стилизации элемента, когда пользователь наводит на него курсор, или для стилизации посещенных и непосещенных ссылок. Псевдоэлемент CSS используется для стилизации определенных частей элемента. Например, p::first-letter можно использовать для изменения первой буквы абзаца.

Рассмотрим в качестве примера один из селекторов псевдоэлементов CSS:

CSS

 p::first-letter {
размер шрифта: 130%;
красный цвет;
семейство шрифтов: arial;
}
 

Пример HTML

Селекторы псевдоэлементов
Псевдоэлемент CSS используется для стилизации определенных частей элемента.