Question

想象一下，我有一个div，其中有以下子div和孙子div：

<div class='1'>
    <div class='2'>
        <div class='3'>
            <div class='4'>
                <p class=''>Username</p>
                <p class=''>Description</p>
                <p class=''>Views</p>
            </div>
        </div>
    </div>
</div>

假设我想给第一个<p>元素一个类名，这样我就只能将一些CSS应用于第一个<p>元素。

我应该给它一个通用的类名，例如'username'，然后使用类似这样的后代选择器选择该用户名：

.1 .2 .3 .4 .username {
    color: black;
}

或者我应该给它一个非常具体的类名，例如'profile-page-username'，然后使用这样的类选择器选择它：

.profile-page-username {
    color: black;
}

如果我正确理解，如果我使用第一种方法，我可以将'username'的类名称赋予任意数量的元素，并且仍对每个元素应用不同的CSS规则，因为我不是选择所有具有'username'的元素，但仅选择具有'username'的元素，该元素是上述元素的子元素。

我想知道一种方法是否比另一种更好/更常用/更常规。

Answer 1

在您的示例中，我将创建一个特定的类名。

您的问题属于关于CSS作用域的讨论。以您的示例为例，您似乎有一个特定的p，该p远低于要向其应用样式的子元素的行。每当我发现自己将元素定位到需要开始进行.1 .2 .3 .4的位置时，通常都会为该元素创建一个单独的类。您仍然可以像下面这样在CSS中将通用样式应用于p，因此它将应用于所有其他p。

p {
  color: black;
}

.specificP {
  color: green;
}

<div class='1'>
    <div class='2'>
        <div class='3'>
            <div class='4'>
                <p class='specificP'>Username</p>
                <p class=''>Description</p>
                <p class=''>Views</p>
            </div>
        </div>
    </div>
</div>

为什么？

主要是为了提高可读性和可维护性。在特定的类名上按ctrl -f相比遍历一棵子元素树以查找样式的应用要容易得多。

Answer 2

如果您要在整个网站上对用户名使用相同的样式，则应特别指定。像这样

HTML文件

<div class='1'>
  <div class='2'>
    <p class='profile-page-username'>Username</p>
      <div class='3'>
        <div class='4'>
            <p class='profile-page-username'>Username</p>
        </div>
    </div>
</div>

CSS文件

// for the first p attribute
.profile-page-username{
  color: red;  // all elements with this class will have the same styling
}

但是，如果您想在不同位置使用不同的样式，则应使用前者。像这样

HTML文件

<div class='1'>
  <div class='2'>
    <p class='username'>Username</p>
      <div class='3'>
        <div class='4'>
            <p class='username'>Username</p>
        </div>
    </div>
</div>

CSS文件

// for the first p attribute
.1 > .2 > .username{
  color: red;
}

// for the second p attribute
.1 > .2 > .3 > .4 > .username{
  color: blue;
}

Answer 3

如果只想将CSS应用于一个元素，则不应使用类。改用个人ID，例如：

<p id="yourID"> username </p>
<p id="yourSecondID"> username </p>
etc...

如果要将一些CSS应用于多个HTML元素，通常使用类。
您的CSS如下所示：

#yourID{
    //Some css
}
#yourSecondID{
    //Some more css
}
etc...

我应该给div一个非常特定的类名，然后使用类选择器选择它还是非常通用的名称，然后使用后代选择器选择它？

3 个答案: