css - HTML 和 CSS3 选择器

Question

我的问题与之前提出的另一个问题有关——CSS 语义；直接或通过顺序选择元素

使用 CSS3 选择器将 CSS 与 HTML 文档紧密结合。由于选择器语义，您的 CSS 变得依赖于 HTML 文档中定义的结构。在我看来，这似乎是非常短视的。

如果我理解正确，那么这意味着如果 HTML 文档发生更改，那么您的样式将不再适用。此外，如果您想在其他地方重用该样式表，则不能。

有经验的人可以解释一下他们如何处理这些新语义并提供一个真实的例子吗？

Answer 1

正确的 CSS 选择器将您的演示文稿绑定到您的 html 页面的语义。

如果您的语义发生变化，那么 CSS 选择器对于您的页面无效并且变得未绑定。

这是一件好事。

Answer 2

您可以使用（例如）LESS来指定可重用的 CSS。使用 LESS，您可以定义类

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

并在任何其他 css 中使用它们

#yourId a {
   color: #111;
   .bordered;
}

并且可以做更多:)。

这不是圣杯，但它使开发更容易。您可以定义几乎所有未来网站都可以使用的类和变量。

我认为没有通用的方法，因为每个网站都有自己的颜色和样式（边框样式、字体……）。因此，您将始终需要更改大部分 CSS 代码。

Answer 3

也许我没有正确传达我的问题。英语不是我的母语，“意外”确实会发生。

我的感觉是在使用 HTML5/CSS3 时应该避免使用 id 或 class 属性。据说有更好的方式来开展您的业务。然后，我想指出，使用 CSS 选择器会使您的代码变得脆弱且难以维护。<p>当您从 更改为时，也许我或您从未想过要更改样式<span>。

无论哪种方式，我发现了一些我真的很想尝试（并分享）的有趣方法。

使用 ARIA，您可以为元素分配角色或用途。换句话说，你给它上下文。例如，页面顶部的标题与其他地方（例如<article>. 给出上下文正是我们试图通过使用 CSS 选择器 egpdog（在 的上下文中的狗<p>）来做的事情。

这里有一个链接供有兴趣查看它的人使用 - ARIA Landmark Roles

Answer 4

这个问题没有一个确切的答案。由于许多“专业人士”采用不同的方法，因此很难一概而论。此外，选择器的使用可能真的取决于具体情况。

我总是保留模板（例如 html 和 css），然后我会重用很多......当然，当重用东西时你需要修复一些东西，但我认为我从来没有被你的问题“拧”过 1 或 2 = ) 但我也尝试保持选择器相对简单和灵活（作为对提供的 previos 问题链接的评论 - 这是相当极端的）。