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

-1

У меня возникли проблемы с правилами выбора CSS. Я уже проверил here для конкретных правил. Я попытался использовать firebug и проверил элемент с помощью google chrome и скопировал путь к CSS. Но я не могу заставить CSS работать. Я использую bootstrap. Также я впервые создаю сайт, поэтому любая критика замечательна (если только она не является отрицательной). Вот мой код для страницы, которую я пытаюсь изменить. Правила приоритета CSS-селектора

#page-content-wrapper > div > div > center > h1 > font { 
 
color: red; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
<meta name="description" content=""> 
 
<meta name="author" content=""> 
 

 
<title>Pediaclinic</title> 
 

 
<!-- Bootstrap Core CSS --> 
 
<link id="myCSS1" href="css/bootstrap.min.css" rel="stylesheet"> 
 
<!-- Custom CSS --> 
 
<link id="myCSS2" href="css/simple-sidebar.css" rel="stylesheet"> 
 
</head> 
 

 

 

 
<!-- webpage begins --> 
 

 

 
<body background="background2.jpg"> 
 

 
<body> 
 

 
    <div id="wrapper"> 
 

 
     <!-- Sidebar --> 
 
     <div id="sidebar-wrapper"> 
 
      <ul class="sidebar-nav"> 
 

 
       <li> 
 
        <a href="C:\Users\G\Desktop\website.files\Home.html">Home</a> 
 
       </li> 
 
       <li> 
 

 
        <li> 
 
        <a href="javascript:; " data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> More Info <i class="fa fa-fw fa-caret-down"></i></a> 
 
        <ul id="demo" class="collapse"> 
 
         <li> 
 
          <a href="C:\Users\G\Desktop\website.files\About Us.html">About Us</a> 
 
         </li> 
 
         <li> 
 
          <a href="C:\Users\G\Desktop\website.files\Staff.html">Staff</a> 
 
         </li> 
 
         <li> 
 
          <a href="C:\Users\G\Desktop\website.files\PDFs.html">PDFs</a> 
 
         </li> 
 
        </ul> 
 

 
       </li> 
 
       <li> 
 
        <a href="C:\Users\G\Desktop\website.files\New Patients.html">New Patients</a> 
 
       </li> 
 
       <li> 
 
        <a href="C:\Users\G\Desktop\website.files\Contact Us.html">Contact Us</a> 
 
       </li> 
 
       <li> 
 
        <a href="C:\Users\G\Desktop\website.files\Location.html">Location</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <!-- /#sidebar-wrapper --> 
 
     <!-- Page Content ===========================================================================================================--> 
 
     <div id="page-content-wrapper">     
 
      <div class="container-fluid"> 
 
       <div class="row"> 
 
       <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Show Menu</a> 
 
       <P>&nbsp;</P>   
 
       <P>&nbsp;</P> 
 
       <P>&nbsp;</P> 
 
       <P>&nbsp;</P> 
 
       <P>&nbsp;</P> 
 

 
       <center class="heading"><h1><font>***Home***</font></h1></center> 
 
       <P>&nbsp;</P>   
 
       <P>&nbsp;</P> 
 
       <P>&nbsp;</P> 
 
       <P>&nbsp;</P> 
 
       <P>&nbsp;</P> 
 

 

 

 
       <p> </p> 
 
       <div class="container"> 
 
        <div class="jumbotron"> 
 
        <h2>Basic Info</h2> 
 
        <ul><p class="section-paragraph"> The purpose of the website is to give you general knowlege 
 
        </p></ul> 
 
       </div> 
 

 

 

 

 

 

 
       <footer> 
 
        <div class="container" > 
 
         <div class="row"> 
 
          <div class="col-lg-12"> 
 
           <p>Copyright 2015&copy; This website was made by G</p> 
 
          </div> 
 
         </div> 
 
         <!-- /.row --> 
 
        </div> 
 
        <!-- /.container --> 
 
       </footer> 
 
      </div> 
 
     </div> 
 

 

 
    </div> 
 
</div>

В основном коде вы должны увидеть Главная жирным шрифтом и курсивом (она находится под начинается веб-страницы). Это то, что я пытаюсь изменить с помощью CSS.

источник

2015-08-10 bob dude

Если это просто простой html, вы должны предоставить скрипку –

Вы никогда не задавали вопрос. – zzzzBov

Вы можете иметь только один тег body в любом документе HTML 5. – connexo

Элемент теги <font> и <center> устарели и больше не должны использоваться.

Если вырезать все посторонний и устаревший код, который мы остались с этой основной структурой

<div id="page-content-wrapper"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <h1 class="heading">Home</h1> 
    </div> 
    </div> 
</div>

В этом случае селектор:

#page-content-wrapper > div > div > h1.heading { 
text-align: center; /* center the text */ 
font-style: italic; /* make it italic */ 
color: red; /* color it red */ 
}

должен быть адекватной если нет других факторы, о которых мы не знаем.

Нет необходимости применять любые другие «жирные шрифты», поскольку пометки заголовков выделены полужирным шрифтом.

Codepen Demo

Примечание: этот селектор нас очень специфичны и что-то более общие (и менее специфичен) может более целесообразно в зависимости от того, является ли стиль для повторного использования на других заголовков/элементов другие части страницы.

источник

2015-08-10 15:44:06

Это полезная информация, спасибо. –

Слишком много всего.

Слишком много ненужных/устаревших элементов. Вам не нужны <center> и <font> элементов.

Слишком большая специфика. # page-content-wrapper h1 {...} должно быть достаточно.

источник

2015-08-10 15:27:41 Dima

Я согласен с вашим мнением, но вы не можете подробно объяснить, что нужно изменить и почему. – connexo

@connexo Вы правы, я часто думаю, что я объясняю себя четко, а другие нет. Теперь нет необходимости редактировать мой ответ, ваш очень подробный. – Dima

Ответы, подобные этим, являются результативными. Постарайтесь быть конкретными. –

Некоторых советы:

Не используйте font элемент
Если вы хотите изменить Дерзкое и италийское использование стиля этого CSS правило
```
element.style { 
    font-style: normal; 
    font-weight: normal; 
} 
```
Для CSS специфичности, наиболее мощным заявлением является ключевое слово !important в вашем стиле, например
```
element.style { 
    font-style: normal !important; 
    font-weight: normal !important; 
} 
```

EDIT Как MDN says

Всегда искать способ, чтобы использовать специфику, прежде чем даже с учетом важно!

только использовать! Важный на странице конкретного CSS, отменяющий на веб-узле или иностранных css (например, из ExtJs или YUI).

Никогда не используйте! Важно, когда вы пишете плагин/mashup.

Никогда не используйте! Важно на сайте css.

Таким образом, вы должны смотреть на это селекторов, в порядке возрастания

Универсальные селекторы (например, *)
селекторы типа (например, h1)
Селектор классов (например, пример)
Селекторы атрибутов (например, [type = "radio"])
Псевдоклассы (например,,: Парить)
ID селекторы (например, #example)
Инлайн типа (например, стиль = "начертание шрифта: жирный")

источник

2015-08-10 15:30:17

Использование '! Important' очень плохой практики и убивает каскадный характер CSS. Подробнее здесь: http://stackoverflow.com/a/3706876/1035147 - Я бы не рекомендовал, чтобы кто-либо использовал '! Important' – Doidgey

! Важную декларацию следует избегать, если без нее невозможно обойтись. – Dima

Вы правы, я отредактирую свой ответ –

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

ответ

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