是否可以给予一个CSS类优先级超过另一个?

j2cgzkjk  于 2023-03-24  发布在  其他
关注(0)|答案(8)|浏览(184)

假设我有一个div,它使用了两个css类,这两个类都使用了text-align,但是一个是居中的,另一个是右对齐的。
有没有可能指定一些东西,给予一个类优先于另一个类?

xurqigkl

xurqigkl1#

1.指定一个更具体的选择器,例如在它前面加上ID前缀,或者在类前面加上节点名前缀
1.在其他类之后分配它
1.如果两个类在不同的文件中,则先导入优先级文件
1.!重要
!important是一种懒惰的方式,但你真的应该使用#1来避免important-ception。一旦你添加了一个!important,你就不能用它来使其他规则变得更重要。

kmbjn2e3

kmbjn2e32#

如果您想明确地说明这一点,您可以通过为包含这两个类的元素提供一个规则来指定这两个类的组合如何一起工作。您可以显式地为foobar类给予与bar相同的样式,如下所示。这是因为.foo.bar.foo更具体,对于同时具有两个类的元素,因此此规则将优先于.foo规则。

.foo { text-align: center }
.bar, .foo.bar { text-align: right }

如果你不想这么明确,你可以把bar的规则放在foo的规则之后,因为给定了相同特异性的选择器,后面的规则优先于前面的规则:

.foo { text-align: center }
.bar { text-align: right }

你可以在CSS规范关于级联的章节中了解更多关于规则之间的优先级是如何确定的;这是CSS的“C”,为了充分利用CSS,理解它是很重要的。

58wvjzkj

58wvjzkj3#

您应该使用CSS特殊性来覆盖前面的声明http://htmldog.com/guides/cssadvanced/specificity/

p = 1 point
.column = 10 points
#wrap = 100 points

所以:p.column { text-align: right; }可以被以下方式覆盖:body p.column { text-align: left; }

pzfprimi

pzfprimi4#

正如“meder omuraliev”所回答的,你可以使用一个更具体的选择器。我想提供一个通用的方法,如何为任何类型的选择器指定更高的优先级,即使用属性presdeo。
例如:

html body .foo { font-family: Arial !important;}
html body .bar[attr]{ font-family: Arial !important;}

要覆盖它,您可以像这样使用:

html body .foo:not([NONE_EXISTS_ATTR]){ font-family: Consolas !important;}
html body .bar[attr]:not([NONE_EXISTS_ATTR]){ font-family: Consolas !important;}
eni9jsuy

eni9jsuy5#

要添加到其他答案中,您不需要添加与您最初想要增加特异性无关的选择器,可以通过多次重复相同的选择器来实现相同的目的:
.foo.foo优先于.foo.foo.foo.foo优先于前面的。
这比添加不相关的选择器要好,因为你只选择了你真正想选择的东西。否则,当你添加的不相关的东西发生变化时,你可能会得到意想不到的行为。

tjvv9vkg

tjvv9vkg6#

.bar { text-align: right !important;}
2exbekwf

2exbekwf7#

使用!重要

示例:

p {
  background-color: red !important;
}
uqdfh47h

uqdfh47h8#

最后一个选项是用JS删除类吗?

function removeCssClasses(src, list)
{
    // get all objects containing src class
    var objs = document.getElementsByClassName(src);
    for(var i=0;i<objs.length;i++)
    {
        var cls = objs[i].classList;
        var j = cls.length;
        while (j--) {
            // is particular object class in remove list, but ignore src class
            if (cls[j] == src) continue;
            var pos = list.indexOf(cls[j]);
            if(pos > -1)
            {
                objs[i].classList.remove(cls[j]);
            }
        }
    }
}

document.body.onload = function() {
    removeCssClasses("yourNewClass", ["Unwanted1", "Unwanted2"]);
    removeCssClasses("yourNewClass2", ["Unwanted3"]);
}

相关问题