Универсальный селектор CSS
Универсальный селектор (*) выбирает все HTML-элементы на странице.
Пример
Это правило влияет на каждый элемент на странице.
Prompt
Веб-страница, использующая универсальный селектор CSS (*) в блоке
<style>.
Используйте *, чтобы каждый элемент на странице был выровнен по центру с синим текстом. Включите заголовок и несколько абзацев.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Universal Selector</title>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on this page is affected by the universal selector.</p>
<p>So is this one.</p>
</body>
</html>
Селектор группировки CSS
Селектор группировки выбирает все HTML-элементы, у которых одинаковый стиль.
Когда несколько селекторов имеют одинаковые объявления, их группировка делает код короче.
Чтобы сгруппировать селекторы, разделите их запятыми.
Пример
Здесь h1, h2 и p сгруппированы в одно правило.
Prompt
Веб-страница, использующая сгруппированный селектор CSS в блоке
<style>.
Сгруппируйте h1, h2 и p в одно правило (h1, h2, p), которое выравнивает их по центру с красным текстом. Включите по одному экземпляру каждого элемента, чтобы был виден общий стиль.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Grouping Selector</title>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading</h2>
<p>This is a paragraph. All three elements share the same style.</p>
</body>
</html>
До группировки
Один и тот же стиль, записанный отдельно для h1, h2 и p. Группировка устраняет это повторение.
styles.css
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Все простые селекторы CSS
Краткая сводка простых селекторов:
#id— например,#firstnameвыбирает элемент сid="firstname"..class— например,.introвыбирает все элементы с классомintro.*— выбирает все элементы.element— например,pвыбирает все элементы<p>.element,element,..— например,div, pвыбирает все элементы<div>и все элементы<p>.