Question

这是基本的，可能是错误的。

某些类内部有多个名称，例如在Bootstrap中：

 <nav class='navbar navbar-default navbar-expand-lg sticky-top'>

我正在试图理解这个主题：

使用一个类的名称可以让您使用此名称在CSS中设置属性，如果是这样，为什么某些类会获得多个名称-像上面这样？
如果一个类有多个名称，如何设置其CSS属性，用哪个名称命名？
如果您有一个类，而又有一个内部类，并且您首先将属性设置为顶部（这会影响内部），然后深入并为内部设置其他属性，它将覆盖外部吗？ / p>

例如：

<div class="=collapse navbar-collapse navbarSupportedContent">
          <ul class="navbar-nav ml-auto">
               <li class="nav-item">

我将如何编辑nav-item类的文字颜色？您如何在CSS中进行深入研究？

所以这不起作用：

 .nav-item{
    text-align: right;
     color: aqua

}

所有这些名称看起来一团糟，与C++或其他语言的编码不同。

Answer 1

通常，不同的类为它们定义的标签处理不同的样式。

可以从我的第一句话中暗示原因。它们用于在要应用的对象上指定不同的样式，并用于分隔样式以在对象的不同表现形式上重复使用
这取决于您要实现的目标和要修改的目标。看一下浏览器的开发人员工具。在这里，您可以检查每个类的功能以及它们在当前标签上应用的样式。如果要修改某些内容，则必须找出哪个类在做什么。在您的情况下，我们谈论的是Bootstrap，您可以在其主页上找到不同类的用途和用途。
如果您有多个类别，但一个类别确实覆盖了另一个类别，则有特定的规则。这不取决于class=属性中的类顺序，而是由CSS样式中的选择器顺序控制，例如


    .navbar-default{ color: white; }
    .navbar{ color: red; }

即使color类位于第一个列出的HTML标记中，上述CSS也会将文本navbar设置为红色而不是白色。最新/最后定义的CSS很重要。还有更多的规则可以基于CSS选择器定义样式的优先级。我建议您花一些时间阅读here，因为您需要积累一些CSS如何工作的基本知识。

Answer 2

使用一个类的名称可以让您使用此名称在CSS中设置属性，如果是这样，为什么有些类会获得多个名称-像上面的这样？

这是由引导程序团队设计的。您可能需要navbar的css属性，但不希望导航栏在大型媒体断点（navbar-expand-lg）上扩展。相反，您可能希望导航栏在中间断点处扩展，因此可以执行class="navbar navbar-expand-md"。这些多个类使开发人员可以根据需要应用不同的类（进而使用不同的CSS属性）。

如果一个类具有多个名称，您如何设置其CSS属性，用哪个名称表示？

您可以将自定义样式应用于任何类名称。（提供的引导程序类或您自己的自定义类）

如果您有一个类，而又有一个内部类，并且您首先将属性设置为顶部（影响内部），然后深入研究并为内部设置不同的属性，它将覆盖外部吗？

如果我正确理解了您的问题，则您是在询问父元素是否具有样式，子元素是否具有冲突的样式，子元素会否覆盖父样式。是的，子元素上的样式将覆盖继承的属性。

您的nav-item类可能没有覆盖引导程序的nav-item的原因有两个。如果在自定义样式之后加载引导样式，则引导类具有优先权。另一个原因可能是bootstrap类具有更具体的选择器，例如.navbar-nav > .nav-item，在这种情况下，它会优先于较不具体的选择器。这是优于CSS优先级的stackoverflow answer。

Answer 3

考虑分组类的概念。例如，您可以一次更改多个类的颜色，以匹配“ navbar”之类的模式。或将事件侦听器应用于一组对象，例如为动画或对交互式JS动作进行编程。
大多数现代浏览器呈现引擎都支持在参数中显示设置类名称的这些属性。在正在开发Web项目的Web框架上查找文档。
来自Mozilla Developers Network's CSS documentations：

Specificity是应用于给定CSS声明的权重，它由匹配选择器中每种选择器类型的数量决定。当多个声明具有相同的特异性时，将在CSS中找到的最后一个声明应用于该元素。特异性仅在多个声明针对同一元素时适用。根据CSS规则，直接定位的元素将始终优先于元素从其祖先继承的规则。

Answer 4

使用一个类的名称可以让您使用此名称在CSS中设置属性，如果是这样，为什么某些类会获得多个名称-像上面的这样？

它为样式提供了更精细的控制，并允许某些类用于多个不同的元素。例如，可能有一个名为“ red-text”的类，该类会更改可以添加段落，div，列表项等的字体颜色。没有多个类，CSS将需要包含几个几乎相同的类，除了另一个将字体颜色设置为红色的行（例如“ p.normal-paragraph”和“ normal-paragraph-red”）。

如果一个类有多个名称，您如何设置其CSS属性，用哪个名称表示？

您可以使用任何一个类来设置其CSS属性，但是有几点值得注意：

您选择的类可能会被您不想修改的其他元素使用，因此请注意这一点。
CSS规则将按顺序应用，因此，如果您为一个类制定规则（例如“ font-size：16px”），但是元素在样式表的下方还有另一个类，则该类具有不同的规则属性（“ font-size：11px”），您的新规则将被忽略。

如果您有一个类，而又有一个内部类，并且您首先将属性设置为顶部（影响内部），然后深入研究并为内部设置不同的属性，它将覆盖外部吗？

是的。元素将从其父项继承样式，但是如果在更特定的级别更改了属性（在本例中为子元素），它将使用该样式。特异性是CSS的一个重要方面（这就是使它们“级联”的原因），选择器越具体，总是越好选择器。

设置具有多个名称的类的属性

4 个答案: