CSS - 有人可以解释这些其他类是什么吗？答案

【问题标题】：CSS - Can someone explain what these other classes are?CSS - 有人可以解释这些其他类是什么吗？
【发布时间】：2015-09-30 23:23:49
【问题描述】：

我正在上新课，我刚开始，所以我不太了解。它关于这段代码中的一段代码，我真的不知道它是什么意思？

   table.postForm > tbody input[type="text"], 
input[type="password"], 
table.postForm > tbody textarea {
        color: #888 !important;
        background-color: #333 !important;
        border-color: #303030 !important;
}

td.replyhl{
    color: #555 !important;
    background-color: #333 !important;
    border-color: #303030 !important;
}

.reply, 
hr{
    border-color: #303030 !important;
}

.reply{
    color: #555 !important;
    background-color: #303030 !important;
}

.replytitle, 
.filetitle{
    color: #8B3A3A !important;
}

我不明白的是，这些由昏迷组成的课程是做什么的？？

table.postForm > tbody input[type="text"], 
input[type="password"], 
table.postForm > tbody textarea {
        color: #888 !important;
        background-color: #333 !important;
        border-color: #303030 !important;
}

还有这部分

.replytitle, 
.filetitle{
    color: #8B3A3A !important;
}

【问题讨论】：

标签： css html class

【解决方案1】：

逗号只是对一堆选择器进行分组，前面的样式适用于所有这些选择器。

所以 .foo 、 .bar 、 .baz { loadinga styles } 意味着 loada 样式被应用到任何具有 foo、bar 或 baz 类的东西上。

请注意，您说“所有这些类都由逗号组合在一起”，但它们不仅仅是类，它们是选择器，因此“.foo”是一个选择器，表示任何具有“foo”类的东西，但“# foo" 表示 ID 为 "foo" 和 "table.postForm > tbody input[type="text"]" 的元素有点毛茸茸，但我认为我或多或少将其读作“具有类型的输入元素属性设置为文本，它是 tbody 的子级，它是具有 postForm 类的 table 的直接子级。

但要回答您的问题，逗号仅表示“所有这些逗号分隔的事物都应用了这些样式”。

【讨论】：

【解决方案2】：

专门回答你的问题

table.postForm > tbody input[type="text"], 
input[type="password"], 
table.postForm > tbody textarea {
        color: #888 !important;
        background-color: #333 !important;
        border-color: #303030 !important;
}

将样式应用于：

一个。所有 tbody 标记中的 text 类型的所有输入标记，它是 postForm 类的所有表的子项

b.所有密码类型的输入标签

c。所有 tbody 标记中的所有文本区域，它们是 postForm 类的所有表的子项。

另一方面，

.replytitle, 
.filetitle{
    color: #8B3A3A !important;
}

将样式应用于所有回复标题或文件标题类的元素。

为了更广泛的解释，

一个。 > 表示“的孩子”

b. [] 让你指定属性

c。您可以将相同的样式应用到不同的选择器，方法是用逗号分隔它们。

【讨论】：

【解决方案3】：

这里是类与 id 的简要分类。

https://css-tricks.com/the-difference-between-id-and-class/

至于 ">" 如果这个类的子类有 > 后面的选择器。仅选择以下内容并使用此特定子项执行此样式，如下所示。

.class that also has child with following > input {
style: this
}

【讨论】：