CSS селектор не работает

Я использую разборчивый, но h1 p не работает. то, что случилось с селектором типаCSS селектор не работает

<!doctype html> 
<html> 
    <head> 
      <style> 
     h1 p{ 
       color:blue; 
      } 


      </style> 
    </head> 
    <body> <h1>My first html5 & CSS3 page</h1> 

    <p>The versions of SID and CRUD distributed with SQL Essential Training do not work with PHP warnings enabled. This was fixed before MySQL Essential Training was recorded. The 1.3 version here is the fixed version. (If you have the files from MySQL Essential Training,you already have this.) </p>

источник

2014-01-29 Zu007

CSS потомки нужен дочерний элемент (p), чтобы быть внутри родительский элемент (h1).

Как:

<h1> <p>I'm inside h1</p> </h1>

Это не тот случай, так что это не будет работать. Вам нужен следующий селектор + или ~, которые выбирают один следующий тег или все следующие теги.

Так, например:

h1 + p {color:blue;}

будет делать следующее:

<h1>Example header</h1> 
<p>This paragraph is blue.</p> 
<p>This paragraph is the default color</p>

И:

h1 ~ p {color:blue;}

Сделает:

<h1>Example header</h1> 
<p>This paragraph is blue.</p> 
<p>This paragraph is also blue.</p>

В случае, если у вас есть несколько абзацев после заголовка, я предлагаю использовать последний.

Если вы хотите только цвет абзацы после <h1>, но не после следующего <h2>, вы можете сделать это:

h1 ~ p {color:blue;} 
h1 ~ h2 ~ p {color:inherit;}

Это приведет к следующему:

<h1>Example level 1 header</h1> 
<p>This paragraph is blue.</p> 
<p>This paragraph is also blue.</p> 
<h2>Example level 2 header</h2> 
<p>This paragraph is placed after the level 2 header, so it's not blue anymore.</p>

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

Here's a demo. Вы можете удалить вторую строку CSS, если не хотите, чтобы абзацы после того, как заголовок уровня 2 был синим.

источник

2014-01-29 16:37:37 Joeytje50

Это не дочерний элемент.Вы можете использовать General Sibling Selector для этого случая:

CSS

h1 ~ p{ 
    color:blue; 
}

HTML

<h1>My first html5 & CSS3 page</h1> 
<p>The versions of SID and CRUD ...</p>

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

CSS

.parent p{ 
    color:blue; 
}

HTML

<h1>My first html5 & CSS3 page</h1> 
<div class="parent"> 
    <p>The versions of SID and CRUD ...</p> 
</div>

источник

2014-01-29 16:40:59 Ezequiel

Привет, да, пожалуйста, отредактируйте его, чтобы я знал, что должен нормально делать :) спасибо! – Ezequiel

Просто сохраните необходимые детали. +1 сохранить ответ – DaniP

CSS селектор не работает

ответ

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