html - 为什么将 tag 和 id 作为没有空格或 V 形的选择器？

Question

我是一名软件开发人员，更关注领域模型和后端。我正在看一些前端代码（像这样的css）：

ul#flex-container {
    list-style-type: none;
    margin: 0;
    padding:0;
    display: flex;
}

HTML 如下所示：

  <div id="container">
    <ul id="flex-container">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    </div>

我理解后代选择器和父选择器的概念。但是，为什么有：

ul#flex-container 

我问的原因是因为：

flex-container 

自行工作。我知道这是有原因的，但我找不到答案。

标签： htmlcssflexbox

Answer 1

有几个可能的原因。

• 它增加了特异性
• 虽然 ID 在页面中必须是唯一的，但它在网站中不一定是唯一的。使用相同样式表的另一个网页可能会在不应应用这些样式的不同类型元素上使用 ID。
• 该类型是作为提示阅读代码的人提供的，以便他们知道它应用于什么类型的元素。