gpt4 book ai didi

CSS 选择器问题

转载 作者:太空宇宙 更新时间:2023-11-04 00:32:08 25 4
gpt4 key购买 nike

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com