CSS Селекторы – CSS и HTML примеры
Для получения дополнительной информации о том, как использовать CSS селекторы для навигации по HTML-документу, обратитесь к статьям главы Статьи с практическими рекомендациями. Статьи в этой главе отвечают на популярные вопросы и содержат примеры C#, предоставляющие необходимую информацию об использовании библиотеки классов Aspose.HTML для решения конкретных задач.
Чтобы узнать, как использовать QuerySelector() и QuerySelectorAll() для запроса элементов DOM, соответствующих селектору CSS, см. статью Как использовать селектор CSS. В этой статье вы узнаете, как эффективно применять селекторы для выбора элементов, которые вы хотите стилизовать.
В этой статье вы узнаете, как эффективно применять селекторы для выбора элементов, которые вы хотите стилизовать. Вы познакомитесь с базовыми селекторами, селекторами-комбинаторами, селекторами атрибутов и псевдоселекторами. Знание CSS-селекторов будет полезно как фронтенд-разработчикам, веб-дизайнерам, так и всем разработчикам, использующим CSS и работающим с (X)HTML-документами.
CSS Селекторы
- Основные селекторы – Basic Selectors выбирают элементы на основе имени, идентификатора, класса или выбирают все элементы на веб-странице.
- Селекторы атрибутов – Attribute Selectors выбирают элементы HTML, которые имеют определенный атрибут или атрибут с указанным значением.
- Селекторы групп – Group Selectors выбирают элементы, сгруппированные в списки, разделенные запятыми.
- Селекторы комбинаторов – Combinator Selectors выбирают элементы на основе определенного отношения между ними. Элементы могут быть сопоставлены на основе того, как они расположены относительно друг друга в коде разметки или как они вложены в объектную модель документа.
- Псевдоселекторы – Pseudo Selectors выбирают элементы или часть элемента на основе определенного состояния. Псевдоклассы используются в селекторах CSS, чтобы разрешить форматирование на основе информации, не содержащейся в дереве документа.
CSS Селекторы используются для выбора HTML-элементов, которым вы хотите придать стиль, и применить набор правил CSS. Существует несколько различных типов селекторов CSS. Вы можете комбинировать селекторы CSS разными способами, чтобы добиться большей специфичности и гибкости.
Основные Селекторы – Basic Selectors
Базовые селекторы CSS выбирают элементы HTML в соответствии с их идентификатором, классом, типом или выбирают все элементы на веб-странице.
Type Селектор или Селектор Элементов CSS
Селектор типа или селектор элементов указывает, к каким элементам должно применяться правило, путем присвоения имени типу элемента, например <h1>. Другими словами, селектор элементов выбирает элементы HTML на основе имени элемента.
CSS
1h1 {
2 text-align: center;
3 color: DarkRed;
4}HTML Example
1<h1>Aspose.HTML for .NET</h1>
2<p>Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.</p>
ID Селектор
Селектор ID выбирает определенный элемент, используя атрибут id элемента HTML. Элемент будет выбран, если его атрибут id точно соответствует значению, указанному в селекторе ID.
CSS
1#demo {
2 background-color: #fcded4;
3 font-size: 24pt;
4}HTML Example
1<p id="demo">This paragraph has a special ID on it!</p>
2<p>This is just a regular paragraph.</p>
Class Селектор
Селектор классов сопоставляет HTML-элементы с определенным атрибутом class. Вы можете использовать атрибут class для всех элементов HTML, допустимых в разделе body документа HTML, включая сам элемент <body>. Чтобы выбрать элементы с определенным классом, напишите символ точки (.), а затем имя класса. Например, если мы хотим, чтобы все элементы с классом «main» имели разные цвет фона, цвет текста и размер шрифта, мы должны использовать следующее правило CSS:
CSS
1.main {
2 background-color: #d4e9fc;
3 color: red;
4 font-size: 16pt;
5}HTML Example
1<h1>CSS Class Selector</h1>
2<p>The class attribute and its value can be used to create a CSS selector that refers to the selected web element.</p>
3<p class="main">The dot (.) is used to indicate the class attribute to create the CSS Class selector.</p>
Универсальный Селектор
Универсальный селектор используется для выбора всех элементов на веб-страницах. Например, если мы хотим, чтобы каждый элемент имел выравнивание по центру и синий цвет текста, мы должны использовать следующее правило CSS:
CSS
1* {
2 text-align: center;
3 color: #0154a2;
4}HTML Example
1<h1>CSS Universal Selector</h1>
2<p>The Universal Selector selects all elements. The star symbol will target every single element on the page.</p>
Селекторы Атрибутов – Attribute Selectors
Селекторы атрибутов CSS обеспечивают простой и эффективный способ применения стилей к элементам HTML на основе наличия определенного атрибута или значения атрибута. Это отличный способ стилизовать HTML-элементы, группируя их на основе определенных атрибутов, и селектор атрибутов выберет те элементы с похожими атрибутами. Вы можете создать селектор атрибутов, поместив атрибут в квадратные скобки:
| CSS Selector | Example | Description |
|---|---|---|
| [attribute] | [translate] | Selects all elements with an attribute name of translate. |
| [attribute=value] | [translate=no] | Selects all elements with translate="no". Represents elements with an attribute name of translate whose value is exactly no. |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word flower. |
| [attribute|=value] | [lang|=de] | Selects all elements with a lang attribute value equal to “de” or starting with “de-”. It is often used for language subcode matches. |
| [attribute^=value] | a[href^="#"] | Selects every <a> element whose href attribute value is prefixed, begins with "#" (internal links). |
| [attribute$=value] | a[href$=".html"] | Selects every <a> element whose href attribute value is suffixed (followed) by value, ends with ".html". |
| [attribute**=*value] | a[href*=“aspose”] | Selects every <a> element whose href attribute value contains the “aspose” anywhere in the URL. |
Давайте рассмотрим один из селекторов атрибутов CSS в качестве примера:
CSS
1h3[class*="1"] {
2 background-color: #b4e8fd;
3}HTML Example
1<h3 class="test-1">CSS Attribute Selector</h3>
2<h3>CSS Attribute Selector</h3>
3<h3 class="12">CSS Attribute Selector</h3>
Селекторы Групп – Group Selectors
Вы можете стилизовать многие селекторы, если хотите. Просто разделите селекторы запятой, как показано в следующем примере:
CSS
1h1, h2, h3 {
2 color: #36C;
3 font-family: helvetica;
4}Пример HTML
1<h1>CSS Group Selector (,)</h1>
2<h2>The defined style will apply to h1, h2 and h3 elements.</h2>
3<h3>The order of the list doesn't matter.</h3>
Селекторы Комбинаторов – Combinator Selectors
Комбинированные селекторы выбирают элементы на основе отношений между ними. В CSS есть четыре разных комбинатора: селектор потомков (пробел), селектор дочерних элементов (>), селектор соседнего родственного элемента (+) и общий селектор родственного элемента (~):
| CSS Selector | Example | Description |
|---|---|---|
| element element | div p | The " " (space) Combinator selects all <p> elements that are descendants of the first <div> element. |
| element>element | div > span | The > Combinator selects all <span> elements where the parent is a <div> element. |
| element+element | div + p | Selects the first <p> element that is placed immediately after <div> elements. The + combinator matches the second element only if it immediately follows the first element. |
| element~element | div ~ p | The ~ Combinator selects siblings. This means that it selects every <p> element that is preceded by a <div> element. |
Давайте рассмотрим один из селекторов комбинаторов CSS в качестве примера. Селектор дочерних элементов (>) выбирает все элементы, которые являются дочерними элементами указанного элемента. Элементы, соответствующие второму селектору, должны быть прямыми дочерними элементами элементов, соответствующих первому селектору:
CSS
1div > p {
2 background-color: #d4e9fc;
3}Пример HTML
1<div>
2 <p>CSS Child Selector (>). Paragraph 1 is in a div.
3 <section>
4 <p>Paragraph 2 is in a div but inside a section element. It is not a direct child of the div element that matches the first selector. Therefore, there is no background color!</p>
5 </section>
6 </p>
7</div>
8<p>Paragraph 3 is not in the div at all.</p>
Псевдоселекторы – Pseudo Selectors
Псевдоселекторы позволяют форматировать элементы на основе информации, отличной от позиции элемента в дереве документа. Селекторам псевдокласса и псевдоэлемента предшествует двоеточие : и ::.
Псевдокласс используется для определения особого состояния элемента. Например, его можно использовать для стилизации элемента, когда пользователь наводит на него курсор, или для стилизации по-разному посещенных и непосещенных ссылок. Псевдоэлемент CSS используется для стилизации определенных частей элемента. Например, p::first-letter можно использовать для изменения первой буквы абзаца.
Рассмотрим в качестве примера один из селекторов псевдоэлементов CSS:
CSS
1p::first-letter {
2 font-size: 130%;
3 color: red;
4 font-family: arial;
5}Пример HTML
1<p>Pseudo-Element Selectors</p>
2<p>A CSS Pseudo-Element is used to style specified parts of an element.</p>
3<p>For example, p::first-letter can be used to change the first letter of a paragraph.</p>
Aspose.HTML предлагает бесплатные Веб-приложения HTML, которые представляют собой онлайн-коллекцию конвертеров, слияний, загрузчики, инструменты SEO, генераторы HTML-кода, инструменты URL и многое другое. Приложения работают в любой операционной системе с веб-браузером и не требуют установки дополнительного программного обеспечения. Легко конвертируйте, объединяйте, кодируйте, генерируйте HTML-код, извлекайте данные из Интернета или анализируйте веб-страницы с точки зрения SEO, где бы вы ни находились. Используйте нашу коллекцию веб-приложений HTML, чтобы выполнять повседневные задачи и сделать свой рабочий процесс безупречным!