Question

我可以通过写

来使我的CSS风格具体化

HTML：

<div class="a">
  <div class="b">
    <div class="foo">
<div class="a2">
  <div class="b2">
    <div class="foo">
<div class="a3">
  <div class="b3">
    <div class="foo">
<!--many more-->

和css：

.a .b .foo { /*my style*/ }

或

HTML：

<div class="a">
  <div class="b">
    <div class="foo specific-foo">
<div class="a2">
  <div class="b2">
    <div class="foo">
<div class="a3">
  <div class="b3">
    <div class="foo">
<!--many more-->

的CSS：

.specific-foo { /*my style*/ }

是否有更好的建议？

- 更新

不能使用id，因为我使用JSF，它会为id生成前缀数字。

Answer 1

.specific-c仅针对此元素特定，因此您不应该为其提供新类。

以嵌套方式对其进行格式化。

正如W3C所述：

在考虑语义时使用class。

.container，.navbar，.btn-info是好名字。它们 可重复使用 和 描述性 。

.title-in-news-section不是。

如果.specific-c情况在某个地方出现的时间超过预期，请给它自己的类或将其划分为几个通用类。

Bootstrap就是一个很好的例子。 All their class names是语义和通用的，是什么使它们如此强大和易于使用。

Answer 2

如上所述，第二种方法更可取 - 第一种方法也会错误地适用于c：

<div class="a">
<div class="foo"> 
<div class="b">
<div class="bar">
<div class="c">

你也可以做Shaun Loftin建议的事情，并修改第一个案例：

.a > .b > .c

以这种方式修改，.a > .b > .c更可取，因为这样，您不需要额外的css类（specific-c）。一般来说，课程越少越好。

Answer 3

这很大程度上取决于个人偏好。

就我个人而言，我会像我需要的那样坚持具体。例如：

<div class="a">
    <div class="b">
        <div class="c">
        </div>
    </div>
</div>

如果我想设置.c样式并将字体颜色设置为红色，我只需声明

.c {
    color: red;
}

然而，在这一行的后面可能会有一种覆盖它的风格，例如：

.a .c {
    color: green;
}

在这种情况下，我需要覆盖.a .c {}声明。我可以通过多种方式做到这一点，但以下就足够了：

.b > .c {
    color: red;
}

如果我希望将来再次覆盖它，我可以使用.a > .b > .c {}

为了它而写一个真正特定的类声明是没有意义的，因为除非你更具体，否则你将无法覆盖它，或者使用可怕的!important - 避免使用!important，除非它绝对至关重要或您有正当理由。

小提琴：https://jsfiddle.net/67pnbnxf/1/

Answer 4

使用CSS ID，ID是特定的到一个div 和类多个。

<强> HTML：

.a {} .b{} #c{}

<强> CSS：

您可以阅读有关ID选择器here的更多信息。

修改

考虑到无法使用ID，还有其他CSS选择器需要考虑：

使用.a > .b > .c selecetor专门识别父母和子女的关系。

在下面的示例中，您选择的是c的子项c，它是a的子项，为您的CSS提供更具体的定义并使您的代码具有唯一性。

{{1}}

否则使用类是可以接受的并且仍然有效，但是当您在课后开始编写课程时会很难...

Answer 5

使用ID来拥有唯一的选择器。

如果这不是一个选项，那么指定选择器如

.a > .b > .c

是否建议哪个更好？ - 不，这取决于您的需求和结构

使CSS类特定的最佳方法是什么？

5 个答案: