Есть ли способ получить атрибут класса <div>для применения к различным элементам? - PullRequest
Новая
       2

Есть ли способ получить атрибут класса <div>для применения к различным элементам?

0 голосов
/ 02 апреля 2020

Мне интересно, есть ли способ стилизовать разные элементы с одним и тем же классом, используя тег div. Я знаю, что это работает: 

<head>
<style>
.intro { color: red }
</style>
</head>

<body><div class="intro">

<p>This should be red.</p>

</div></body>

И это также работает: 

<head>
<style>

h1.intro { color: blue }
p.intro { color: red }

</style>
</head>
<body>

<h1 class="intro">This should be blue.</h1>
<p class="intro">This should be red.</p>

</body>

Итак, учитывая это, вы думаете, что-то вроде этого будет работать: 

<head>
<style>

h1.intro { color: blue }
p.intro { color: red }

</style>
</head>
<body>

<div class="intro">

<h1>This should be blue.</h1>
<p>This should be red.</p>

</div>

</body>

Но не повезло. Есть ли способ сделать это? Или я должен сдаться и напечатать это долгий путь? Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

2 голосов
/ 02 апреля 2020

Это заставит ваш пример работать: 

<html>
    <head>
    <style>

    .intro h1 { color: blue }
    .intro p { color: red }

    </style>
    </head>
    <body>

    <div class="intro">

    <h1>This should be blue.</h1>
    <p>This should be red.</p>

    </div>

    </body>

</html>

с помощью ".intro" вы идентифицируете контейнер и затем указываете стиль внутреннего элемента.

0 голосов
/ 02 апреля 2020

Вы должны использовать 

.intro h1 { color: blue }
.intro p { color: red }

, поскольку элементы h1 и p являются дочерними элементами вашего .intro div: 

.intro h1 {
  color: blue
}

.intro p {
  color: red
}
<div class="intro">

  <h1>This should be blue.</h1>
  <p>This should be red.</p>

</div>

Или вы используете классы для самих элементов: 

.intro1 { color: blue }
.intro2 { color: red }
<div>

<h1 class="intro1" >This should be blue.</h1>
<p class="intro2" >This should be red.</p>

</div>
...