Проблема с селектором CSS - PullRequest
Новая
       6

Проблема с селектором CSS

0 голосов
/ 07 июня 2010

html> body .home блог вошел в систему> div #wrapper> div #page> div .cats

У меня проблема с выбором неупорядоченных списков (то есть ul> li. class-name имя-класса-номера ) в указанном домене в CSS.Я работаю с темой WordPress.

В принципе, могу ли я предложить правильный выбор селектора, чтобы повлиять на этот тег?Я могу предоставить упрощенную структуру html, если это поможет.

Я пробовал несколько селекторов в соответствии с:

(иногда) #page (# или.) Кошек (иногда) ul li (иногда с именем класса )

РЕДАКТИРОВАТЬ: я пробовал селекторы, предложенные в документах WordPress.

структура HTML: 

<body class='*dynamic*'>
<div id="wrapper">
<div id="page">


<div id="header" role="banner">
        <h1><a href=""></a>Header</h1>
        <div class="description">Site info</div>
</div>

<div id="cats">
<ul>
<li class="page_item dynamically generated class"></li>
</ul>

<ul>
<li class="category_item dynamically generated class"></li>
</ul>
</div>

Это две структуры списка, с которыми у меня проблемы 

div#cats ul {
    font-size:24px;
}

Это стиль тестирования.Когда он заработает, я его поменяю.

В соответствии с просьбой

ДАЛЕЕ: Я думаю, что это должно быть какой-то проблемой наследования, поэтому я попытаюсь использовать подход слэша и записи.

Спасибо!

Ответы [ 2 ]

3 голосов
/ 07 июня 2010

Если это ваш селектор, есть несколько проблем с ним. 

html > body .home blog logged-in > div #wrapper > div #page > div .cats

Я сделаю несколько предположений.Поскольку вы не предоставили действительный код.

Я предполагаю, что первая часть (html > body .home blog logged-in) вы пытаетесь сопоставить <body class="home blog logged-in">.Правильный селектор для совпадения будет точно таким: body.home.blog.logged-in, но в случае, если вы просто хотите сопоставить любой из классов, вам нужен селектор для каждого из них.Если они применяют один и тот же стиль, вы можете иметь их в виде списка через запятую, например: 

body.home, body.blog, body.logged-in { ... }

Следующая часть (body > div #wrapper) Я предполагаю, что вы хотите сопоставить <body><div id="wrapper">.Правильный селектор для этого body > div#wrapper.Текущий селектор ищет <body><div><anytag id="wrapper">.

То же самое относится и к остальной части вашего селектора.Я предполагаю, что у вас просто есть посторонние пустые места, из-за которых селектор не совпадает.Для получения дополнительной информации о селекторах CSS см. Документацию на W3.org , или, если вам нужны более простые сведения, учебник W3Schools по CSS .

Обновление после добавления HTML:

Нет необходимости иметь такой конкретный селектор.Вы можете сопоставить списки с помощью селектора: 

/* Match both lists */
div#cats ul {}

/* Match first list */
div#cats ul:first-child {}

/* Match last list (CSS3) */
div#cats ul:last-child {}

/* Match items */
div#cats li.page-item {}
div#cats li.category-item {}
/* NOTE! Underscores are not legal characters in classes and ids */

/* Match generated class */
div#cats li.dynamically-generated-class {}

/* Match generated class filtered by two classes */
div#cats li.page-item.dynamically-generated-class {}
div#cats li.category-item.dynamically-generated-class {}

Если вам не нужно сопоставлять .page-item и .category-item, в частности, только с div#cats (например, их нет в других местах на странице), нет необходимости ставить префикс перед селектором div#cats.

Update 2 :

Размещенный вами селектор CSS правильный для HTML, который вы разместили.( Смотрите мое демо ).Возможно, у вас есть другие правила, которые также влияют на результат.Попробуйте добавить border к правилу, чтобы увидеть, действительно ли оно соответствует правильному элементу.

Firebug - очень полезный инструмент отладки для Firefox, который позволяет увидеть все правила CSS, которые применяются к элементу.Возможно, это может вам помочь?

0 голосов
/ 07 июня 2010

используйте Firebug, чтобы проверить, применяется ли стиль div#cats ul. я предполагаю, что он перезаписывается другим правилом (возможно, другой таблицей стилей) Вы можете попробовать использовать! важный, как так 

div#cats ul {font-size: 24px !important;}

или вы можете попробовать более конкретное правило, например 

div#cats ul li {font-size: 24px !important;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...