Question

html＆gt; body .home blog登录＆gt; div #wrapper＆gt; div #page＆gt; div .cats

我在CSS中的上述dom位置选择无序列表（即ul＆gt; li。 class-name class-name-number ）时遇到问题。我正在使用wordpress主题。

基本上，我是否可以建议使用正确的选择器来影响此标记？如果有帮助，我可以提供简化的html结构。

我尝试了许多选择器：

（有时候）#page（＃或。）猫（有时候）ul li（有时带着类名）

编辑：我已经尝试过wordpress docs中建议的选择器。

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;
}

这是测试风格。当它工作时，我会改变它。

根据要求

进一步：我认为这必然是某种继承问题，所以我将尝试一种斜线和刻录方法。

谢谢！

Answer 1

如果这是您的选择器，则会出现一些问题。

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。

添加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。

更新2 ：

您发布的CSS选择器对于您发布的html是正确的。（See my demo）。也许您还有其他影响结果的规则。尝试在规则中添加border，以查看它是否与正确的元素匹配。

Firebug是一个非常有用的Firefox调试工具，让你看到所有应用于元素的css规则。也许这可以帮到你？

Answer 2

使用Firebug检查是否正在应用div#cats ul样式。我的猜测是它被另一个规则（可能是另一个样式表）覆盖。你可以尝试使用！重要如此

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

或者您可以尝试更具体的规则，例如

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

CSS选择器问题

2 个答案: