H1 тег с классом наследует свойства h1

Недавно я практиковал некоторые основы CSS, и пока я был на селекторах классов, я обнаружил некоторые сомнения, которые меня путают.H1 тег с классом наследует свойства h1

Я объявил некоторые свойства стиля тега H1, и я также объявил некоторые свойства стиля тега H1 с классом. Когда я просмотрел результат в своем веб-браузере, я обнаружил, что мой тег H1 с классом наследует одно свойство моего тега H1. Это путаница. Как тег с классом наследует свойства одного и того же тега, но без класса. Если да, то как? И если я не хочу наследовать свойства другого тега, то как я могу это сделать?

<html> 
 
<head> 
 
<style> 
 
/*styling for h1 tag.*/ 
 
h1 
 
{ 
 
text-align:center; 
 
color:yellow; 
 
} 
 
h1.class1 
 
{ 
 
color:blue; 
 
font-size:30px; 
 
} 
 
h2.class1 
 
{ 
 
color:purple; 
 
font-size:25px; 
 
} 
 
h3.class1 
 
{ 
 
color:red; 
 
font-size:15px; 
 
} 
 
</style> 
 
<body> 
 
<h1>C.S.S. Class Selector with different tags.</h1> 
 
<hr> 
 
<p>In this example you will see different level of headings with different styles but with same class.</p> 
 
<h1 class="class1"> 
 
I am a H1 heading and I have class1 as a class. 
 
</h1> 
 
<h2 class="class1"> 
 
I am a H2 heading and I also have class1 as a class. 
 
</h2> 
 
<h3 class="class1"> 
 
I am a H3 heading and I also have class1 as a class. 
 
</h3> 
 
</body> 
 
</html>

источник

2015-11-19 Lalit Pal

Это нормальное поведение CSS. Однако вы можете переопределить свойства. –

Как? Пожалуйста, уточните это. –

Ваши стили h1 будут влиять на все h1. Единственное исключение было бы, если бы класс содержал стили, конфликтующие с стилями h1, и в этом случае они переопределили бы их. –

Н1 еще h1-тег, имеет ли он или нет класса.

Если есть класс, то это просто немного по-другому, чем те, без, так что в вашем случае, вам нужно написать CSS, как это, для h1 с классом:

h1.class1 
{ 
color:blue; 
font-size:30px; 
text-align:left; 
}

Или, вы можете написать:

h1.class1 
{ 
color:blue; 
font-size:30px; 
text-align:inherit; 
}

Чтобы сделать h1 с классом, плавайте так же, как и другой текст.

источник

2015-11-19 08:37:44 rblarsen

CSS является каскадным, что означает то, что вы объявляете первым, это то, что элемент наследует до тех пор, пока другое объявление дальше по строке не переопределит это. Например,

h1 { 
    text-align: center; 
    color: red; 
}

С этим все <h1> «s будет иметь цвет шрифта красный и будет централизованно выровнены. Если вы дали конкретный <h1> класс, вы можете переопределить выше, delcaring его следующим образом:

h1.class1 { 
    text-align: right; 
    color: blue; 
}

Это означает, что <h1> «s с классом class1 НЕ централизованно выровнены или красного цвета, они будут правы выровненный и синий.

Если бы вы были выйти из текста выравнивать из class1 декларации, в h1 «s, которые имеют class1 как класс, будет наследовать декларацию h1 элемента, так что они будут централизованно выровнены. Вы должны переопределить то, что было объявлено первым, чтобы оно имело эффект.

источник

2015-11-19 08:53:38

U необходимо перезаписать css с помощью класса h1 = "class1", потому что если u использует .h1, он примет тот же css для всех h1 в теге.

источник

2015-11-19 09:15:51

H1 тег с классом наследует свойства h1

ответ

Смежные вопросы