Jump to content
  • 0

Прошу помочь обьяснить!


mr.Dassler
 Share

Question

У меня есть id-селектор и внутри него я создал правило {color: #fc0; font-family: Georgia, Times, serif;}

Так же у меня есть p {font-family:Arial;} и h2 {color:red;} . Внутри id селектора у меня есть теги( p и h2) но на них действует правило которое не id селектора

вот не могу монять у id же больше приоритет над селекторами тегов.Почему что находится в id параграф и заголовок не изменяются.

id я применил к <div> параграф и заголовок у меня в нем.

Edited by mr.Dassler
Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

#selector p {font-family:Arial;}
#selector h2 {color:red;}

Если, например, #selector h2 - отсутствует(h2), то на заголовок будет действовать общее правило (если оно есть)

h2 {}

А почему действует общие правило?? если у селектора id больше приоритет над селекторами тегов.

Link to comment
Share on other sites

  • 0

Есть такая штука как наследование. Согласно ему на p действует два правила:

color: #fc0; - унаследовано от родителя ID.

font-family: Georgia, Times, serif; - унаследовано от родителя ID.

плюс собственное правило работает font-family: Arial, которое имеет выше приоритет, чем унаследованное. Поэтому внутри абзаца текст будет оранжевый Arial.

Link to comment
Share on other sites

  • 0

Есть такая штука как наследование. Согласно ему на p действует два правила:

color: #fc0; - унаследовано от родителя ID.

font-family: Georgia, Times, serif; - унаследовано от родителя ID.

плюс собственное правило работает font-family: Arial, которое имеет выше приоритет, чем унаследованное. Поэтому внутри абзаца текст будет оранжевый Arial.

Да собственно вот это и не могу понять Влад, почему у собственного правила больше приоритет если у id селектора больше значимость над селектором тегов.

Link to comment
Share on other sites

  • 0

Есть такая штука как наследование. Согласно ему на p действует два правила:

color: #fc0; - унаследовано от родителя ID.

font-family: Georgia, Times, serif; - унаследовано от родителя ID.

плюс собственное правило работает font-family: Arial, которое имеет выше приоритет, чем унаследованное. Поэтому внутри абзаца текст будет оранжевый Arial.

Да собственно вот это и не могу понять Влад, почему у собственного правила больше приоритет если у id селектора больше значимость над селектором тегов.

Это кто так сказал? В КСС нету системы приоритетов. То, что по коду идет ниже, то и приоритетнее. Собственные свойства потомка имеют больший приоритет, чем унаследованные свойства родителя.

Link to comment
Share on other sites

  • 0

Каскадирование начинает работать когда есть конфликт между правилами, здесь никакого конфликта нет. Если бы вы определили для P несколько разных цветов разными способами, тогда имеет значение идентификатор там или нет.

Link to comment
Share on other sites

  • 0

Вот это я и не могу понять находящиеся внутри id-селектора должно иметь больше преимущество над селекторам тега то есть (100 для id и 1 для тега) объясните на вот этом примере почему так происходит

h2 {color:red; }

p {font-family: Arial;}

#wrapper {color: #fc0; font-family: Georgia;}

<div id="wrapper" >

<h2>Check the Elevator Before Beginning</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam</p>

</div>

<h2>Check the Elevator BeforeBeginning</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>

к id применилось только цвет для параграфа а все остальное от селекторов тегов.

Edited by mr.Dassler
Link to comment
Share on other sites

  • 0

Ещё раз повторю, что каскадирование здесь не применимо, оно работает в том случае, когда два и более правила применяются к одному элементу. Например:

#wrapper h2 {color: red;}
h2 {color: green; }

Если же написать так, то правила не конфликтуют, любой текст внутри #wrapper будет красным, но для h2 есть дополнительное правило, поэтому текст будет зелёный.

#wrapper {color: red;}
h2 {color: green; }

Link to comment
Share on other sites

  • 0

Нет здесь вообще никакого приоритета, это два разных правила и применяться они будут в зависимости от ситуации. Вполне возможна ситуация, когда #wrapper и h2 даже не пересекаются меж собой.

Link to comment
Share on other sites

  • 0

Влад объясни тогда какие тут правила работают и почему именно, а то я ни как не могу понять

h2 {color:red; }

p {font-family: Arial;}

#wrapper {color: #fc0; font-family: Georgia;}

Edited by mr.Dassler
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy