CSS选择器问题

HTML>体。家里博客登录> DIV #wrapper指定> DIV #page> DIV .catsCSS选择器问题

我有选择无序列表（即UL>里。类名问题class-name-number）位于CSS中的上述dom位置。我正在使用wordpress主题。

基本上我可以有正确的选择使用的建议，以影响这个标签？如果能够提供帮助，我可以提供简化的html结构。

我已经尝试了一些选择的线沿线的：（＃或）

（有时）#page猫（有时）UL李（有时类名）

编辑：我尝试了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

更具体的规则我真的不理解你的处境，但作为第一项措施，删除'>'使选择器不那么严格。 – 2010-06-07 10:43:15

发布您遇到麻烦的html结构和实际选择器。 – 2010-06-07 10:45:08

如果这是您的选择器，它有几个问题。

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

我会做一些假设。由于您没有提供实际的代码。

我假定您正尝试匹配<body class="home blog logged-in">的第一部分（html > body .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 {}

如果你没有必要在只有div#cats匹配.page-item和.category-item明确（例如，它们没有出现在网页上的其他地方出现），没有必要添加前缀选择器div#cats。

更新2：

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

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

来源

2010-06-07 10:54:25

源文件中的选择器中没有空白。提供的选择器是由firefox web开发人员插件生成的，并且以其他方式产生 – YsoL8 2010-06-07 11:00:00

啊，我看到我误解了那部分问题。答案已更新。 – 2010-06-07 11:04:23

我在这些选择器上尝试了一些变体，但都没有奏效！我知道这是正确的样式表，并且我已经成功地编辑它至此。 – YsoL8 2010-06-07 11:16:07

使用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选择器问题

回答

相关问题