CSS Selector Выпуск

HTML> тело .home блог авторизованы> DIV #wrapper> DIV #page> DIV .catsCSS Selector Выпуск

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

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

Я пытался несколько селекторов вдоль линий: (. # Или)

(иногда) #page кошек (иногда) уль ли (иногда с именем классом)

EDIT : Я пробовал селектор, предложенный в документах 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; 
}

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

По просьбе

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

Спасибо!

источник

2010-06-07 YsoL8

Я не очень понимаю вашу ситуацию, но в качестве первой меры, удалите '>' чтобы сделать селектор менее строгим. –

Опубликовать структуру html и фактический селектор, с которым вы столкнулись. –

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

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 см. documentation on W3.org, или если вы ищете более простые вещи W3Schools tutorial on CSS.

Update после добавленного 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 вы публикуемую. (See my demo). Возможно, у вас есть другие правила, которые также влияют на результат. Попробуйте добавить правило border к правилу, чтобы убедиться, что он действительно соответствует правильному элементу.

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

источник

2010-06-07 10:54:25

В селекторах в исходных файлах нет пробелов. Предоставленный селектор был создан плагином веб-разработчика firefox и в противном случае начисляется – YsoL8

А, я вижу, что я неправильно понял эту часть вопроса. Ответ был обновлен. –

Я пробовал несколько вариантов на этих селекторах, но никто не работал! Я знаю, что это правильная таблица стилей, и я успешно ее редактировал до этого момента. – YsoL8

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

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

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

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

источник

2010-06-07 11:34:01 pixeltocode

CSS Selector Выпуск

ответ

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