用 class 覆盖 li 样式

发布于 2024-12-07 16:33:13 字数 450 浏览 0 评论 0原文

在我的网站中，我创建了这个 html/css

li
{
    float: left;
    ...
}

.myclass
{
    float: right;
    ...
}

<ul>
    <li>test 1</li>
    <li class="myclass">test 2</li>
</ul>

两个列表元素具有相同的样式，但第二个不使用该类来覆盖左侧浮动。为什么？

编辑： 似乎如果我使用

li.myclass
{
    float: right;
    ...
}

它就可以了，但我也在 div 中使用 myclass，因为它是一个常见的样式类。在不使用 li. 的情况下如何解决该问题？

原文

in my site I created this html/css

li
{
    float: left;
    ...
}

.myclass
{
    float: right;
    ...
}

<ul>
    <li>test 1</li>
    <li class="myclass">test 2</li>
</ul>

The two list elements have the same style but the second doesn't use the class to override the left float. Why?

EDIT:
it seems that if I use

li.myclass
{
    float: right;
    ...
}

it works but I'm using myclass also in divs because it's a common style class. How can I fix the problem without use li.?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叹沉浮 2024-12-14 16:33:13

正如您的帖子所述，如果您使用更“特定”的选择器（例如 li.myclass），则可以覆盖 float 属性。因此，您可以在逗号分隔的列表中列出两个选择器。

.myclass, li.myclass {
    float: right;
}

或者您可以使用 !important 覆盖该属性。

.myclass {
    float: right !important;
}

此外，它还影响属性在 CSS 中显示的位置。文件中位于较低位置的属性可以覆盖上面的属性。

As your post says, you're able to overwrite the float-property if you use a more "specific" selector, such as li.myclass. So you could list the two selectors in a comma-seperated list.

.myclass, li.myclass {
    float: right;
}

Or you can use !important to overwrite the property.

.myclass {
    float: right !important;
}

Also, it plays a role at which position in your CSS the property shows up. Properties that are located lower in the file can overwrite properties which are above.

回复收藏 0 原文