Группировка CSS-селекторов

Последнее обновление 8 мая 2019 11:07:26 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Если несколько CSS-селекторов имеют одинаковые CSS-объявления, они могут быть сгруппированы вместе.

синтаксис:

 селектор1, селектор2, селектор3, .................................. селекторN {свойство: значение; ..........}

Где selector1, ......... selectorN - это разные селекторы. Обратите внимание, что здесь селекторы разделены с помощью "," комбинаторов.

Пример группировки CSS-селекторов

Код CSS:

h1,h2,h3 {
color: darkred; /* color of h1 h2 h3 should be darkred */ 
font-variant: small-caps; /* h1 h2 h3 should be in small caps */
}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of Grouping of CSS selectors</title>
<link rel='stylesheet' href='CSS-grouping-of-selectors-simple-example.css' type='text/css'>
</head>
<body>
<h1>Example of CSS.</h1>
<h2>Example of CSS selector.</h2> 
<h3>Example of grouping of CSS selectors.</h3> 
</body>
</html>

Посмотрите этот простой пример группировки CSS-селекторов в отдельном окне браузера.

Расширенный пример группировки CSS-селекторов

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

Код CSS:

#w3r p, h1 h2 h3  {
color: darkred; /* color of p within w3r id and h1 h2 h3 should be darkred */
font-variant: small-caps; /*p within w3r id and h1 h2 h3 should be in small caps */
}

HTML код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced Example of Grouping of CSS selectors</title>
<link rel='stylesheet' href='CSS-grouping-of-selectors-advanced-example.css' type='text/css'>
</head>
<body>
<h1>Example of CSS.</h1>. 
<h2>Example of CSS selector.</h2>
<h3>Example of grouping of CSS selectors.</h3>
<div id="w3r">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit.</p>
</div>
</body>
</html>

Результат:

Пример CSS.

Пример селектора CSS.

Пример группировки CSS-селекторов.

Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Донецк урна элит.

Посмотрите этот расширенный пример группировки CSS-селекторов в отдельном окне браузера.

Предыдущая: CSS селекторы
Далее: CSS универсальные селекторы