Question

我有一个按钮，点击显示包含演员的表格。我打电话给他们：

<button class="actors">Show actors</button>
<table class="actors">...</div>

然后我需要在我的CSS（以及jQuery）中访问它们，所以我使用这样的选择器：

button.actors {...}
table.actors {...}

区分具有相同类别的不同元素是一种好方法吗？或者我应该修改它看起来像它：

<button class="actors-button">Show actors</button>
<table class="actors-table">...</div>

和

.actors-button {...}
.actors-table {...}

我真正关心的是选择者的优先权。不会在选择器中使用标签名称会在将来使用时导致一些隐藏的问题（比如ID）吗？或者只是个人偏好的问题？

P.S。

请不要发布像'只是将按钮的类名更改为.show-actors的答案，并且没有问题'。这太容易了，我不想这样做;）

Answer 1

通常，在选择器中使用元素名称是唯一方式，以区分具有相同类的不同元素。（在特殊情况下，您可以使用其他上下文选择器，但这样做毫无意义且不够灵活。）

如果你问他们是否应该有不同的名字，那么这是一个意见问题，并且在很大程度上取决于使用类的背景和目的，所以它将是偏离主题的。

像button.actors这样的选择器比.actors-button这样的选择器更具体（相当简单，因为它更复杂）。选择器特异性可能会导致“隐藏问题”，但这对选择器来说总是一个问题。特别是，在问题中描述的两种方法中，两个选择器具有相同的特异性。

Answer 2

作为一项规则，我认为最好避免使用标记名称，但有一些罕见的例外情况。避免过于通用的选择器（如标记名称）的一个原因通常是它适用于“太多”元素。例如，如果页面上有一些第三方组件（jquery插件，polyfill，第三方ui组件等） - 它们也会受到选择器的影响。有时这种效果会是负面效果，因为它会覆盖该组件定义的样式。

规则的一个例外是CSS重置，例如 - 根据定义，您希望影响页面上的所有元素。这也是像Bootstrap和Foundation这样的CSS框架定义诸如“.button”或“.btn”等类的原因，因为它们可能只是为了相同的目的使用了“按钮”标记。

此外，一个类可以应用于不同的标签。因此，使用“按钮”类可以使锚点（“a”标签）看起来像一个按钮。

可以在CSS选择器中使用标签名称吗？

2 个答案: