Не удается заставить работать селекторы CSS3

0

Я пытаюсь изучить новые селектора CSS3 и поэтому попробовал следующий код:

<body class="frontpage">
    <section name="top">
        <header class="head" name="top">
            <div id="my-name">
                <h1 id="title">
                    Josh Dempsey
                </h1>
            </div>
        </header>   
    </section>
</body>

С помощью CSS:

body[class*="f"]>section[name$="op"]>header[class|top]>div[id*="my"]>h1[id=title]{color:white;}

Я ожидаю, что мое имя будет напечатано белым, а не черным/авто.

Мой другой CSS в случае, если кто-то может найти что-нибудь из него:

body[class*="fro"]{background-color:#f8efe1;height:auto;width:auto;direction:ltr;z-     index:1;}
section[name*="t"]{position:absolute;top:0px;left:0px;width:100%;height:100px;}
header[class$="ad"]{background-color:#272727;height:100%;width:100%;}
h1[class="title-of-site"]{color:white;font-family:'Open Sans',sans-serif;font-  weight:300;margin:0}
header[class$="op"]>div[name*=image_holder]  {position:absolute;top:5px;left:10%;bottom:5px;height:40px;width:40px;background-color:
transparent;}

Я проверил все это на W3.org и успешно проверил его. Поэтому я в шоке от этого. Благодарю.

Теги:
css-selectors

3 ответа

4
Лучший ответ

В селекторе было несколько синтаксических проблем (в основном, цитаты вокруг значений).

Причина, по которой селектор не работал, был у вас header[class|top] указывающий на неправильный атрибут, поскольку заголовок имел class="head". Вам нужно изменить это, чтобы назвать и поставить равные после вертикальной линии.

header[name|="top"]

Это полный селектор, работающий ниже:

body[class*="f"] > section[name$="op"] > header[name|="top"] > div[id*="my"] > h1[id="title"]
{
    color:white;
}
Поделиться
  • 0
    Отсутствующие или непоследовательные кавычки вокруг значений не являются проблемой, но это помогает быть последовательным.
  • 0
    Последовательность - король! Если вы привыкнете использовать правильный синтаксис сейчас как новичок, ваша жизнь станет намного легче позже, когда вы перейдете на более строгие языки
Показать ещё 1 комментарий
2

Замените header[class|top] на header[class|name="top"].

Поделиться
  • 0
    Это все еще не так. См. W3.org/TR/selectors/#attrnmsp, что действительно означает этот синтаксис.
1

Вы можете попробовать заменить "класс" на "id" на h1. Кроме того, измените h1[class="title-of-site"] на h1[id="title"].

См. Этот ДЕМО.

Поделиться
  • 0
    Спасибо! Работает шарм.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню