html > body .home 博客登录 > div #wrapper > div #page > div .cats
我在 CSS 的上述 dom 位置选择无序列表(即 ul > li.class-name class-name-number)时遇到问题。我正在使用 wordpress 主题。
基本上我可以建议使用正确的选择器来影响这个标签吗？如果有帮助，我可以提供简化的 html 结构。
我已经尝试了一些选择器:
(有时)#page(# 或 .)cats(有时)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;
}
这是测试风格。当它正常工作时，我将对其进行更改。
根据要求
进一步: 我认为这一定是某种继承问题，所以我将尝试刀耕火种的方法。
谢谢!
最佳答案
如果这是您的选择器，则存在一些问题。
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 规则。或许这对您有帮助？
关于CSS 选择器问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2988772/