《HTML5 精要剖析》- 1.5.3 开始发展应用程序/运用选择器组织CSS

到目前为止，前一篇文章“1.5.2 开始发展应用程序/调整加法运算器的 CSS 设定”中的加法运算程序，已经顺利的调整为我们要求的外观了，这个程序基本上算是已经完成基本的设计与开发了，不过它的CSS 还有进一步调整的必要，这一节就来谈这一部分。

设定CSS 最简单的方式，便是直接于所要设定的标签里面指定 style ?属性，我们在前述的讨论里面已经看到相关的范例，但在实际的开发上，为了方便维护并不太会这么作，除了针对某个特定的标签设定，大致上这些CSS 模式均是直接抽取出来统一管理，就如同撰写 JavaScript ?会配置在 当中的意思是一样的，这种作法有很多好处，我们先看实践，有了相关的经验，后续再讨论这种作法的优点。

同样的，依然以加法运算程序进行说明，在前面几篇文章的讨论过程中，针对两个文字方块作的CSS 设定几乎是相同的，如下式：

+

在这种情形下，重复设定让应用程序难以维护，一旦其中某些设定需要更动，相关的标签便须逐一调整其 style 模式，由于这只是教学用的范例，因此影响不大，实际上线运行的案例，通常会需要大量的CSS 设定，如此一来将导致大量的维护成本，为了改善这种状况，现在我们来调整CSS 的设定方式。首先在 里面配置以下的标签：

将原来设定于文字方块 style 属性里面的模式提取出来，配置于此组标签中，结果如下：

input
{
    width:60px;
    margin-right:10px;
    text-align:right;
}

其中的内容读者已经能够理解，现在请特别注意开始与结束的部分，由于这组模式将套用于 ，因此指定了input 这个名称，然后将所有的模式内容配置于大括弧即可。现在将HTML 中的两组 内容里面的style 属性整个移除，HTML 的部分看起来像这个样子，其中的 标签变干净了：

    +

    ＝

重新浏览网页，我们可以看到以下的效果：

如你所见，除了style 属性，只需撰写一次模式即达到相同的设定效果，不过仔细检视之后，会发现第二个文字方块与加号（+）连在一起了，然后与右边的= 按钮距离变大了，这是因为模式被指定套用至 标签，所有的 标签均会设影响，因此接下来，我们要进一步针对其中差异的部分进行设定，而在此之前，先谈谈选择器。

学习CSS 除了了解模式设定，另外一个重点便是选择器的运用，前者决定所要呈现的外观模式，后者让设计者能够指定这些模式所要套用的标签，回头看上述的设定，其中的input 便是一种选择器，表示大括弧中的模式会选择 HTML 中所有的 标签进行套用，如果将 改为 ，则这一组样将会套用至 标签，其它类推。

标签名称是最简单的选择器，但就如同上述讨论的，这并不够，即使相同的标签，也有部分不同的设定，以文字方块为例，左边a 文字方块为了增加与加法符号+ 的空隔必需将其 margin-right 模式项目值设定为 10px ，但是右边的b 文字方块则是必须设定margin-left ，否则将出现述的效果，增加的是= 按钮，为了针对特定模式设定的差异需求，我们需要另外一种id 属性识别选择器，这一种选择器以# 为前缀连接所要设定的标签id 属性，调整之后如下：

input
{
    width:60px;
    text-align:right;
}
#a
{
    margin-right:10px;
}
#b
{
    margin-left:10px;
}

Input 选择器中的 margin-right 移至#a 表示套用至id 属性为a 的标签，而#b 则设定 margin-left 属性。现在，CSS 会根据不同的选择器，找到所选择的标签进行套用，文字方块套用了 input 选择器中的模式， id 属性为 a 的文字方块，套用了 margin-right:10px 这一组属性，而 id 属性 b 的文字方块则再套用 margin-left:10px 属性，因此我们再一次得到相同的外观模式效果。好了，现在我们知道如何透过选择器切割CSS 的模式设定，这有很多的好处：

• 方便进行CSS 的模式设定管理。
• 独立于HTML 标签，可以在不影响网页内容定义下，更动外观设定。
• 透过选择器设定，减少重复的 CSS 模式项目设定。

假设现在我想要将文字方块的背景与文字颜色一并作调整，可以经过以下的设定：

input
{
    width:60px;
    text-align:right;
    background:black ;
    color:silver ;
}

其中加入了 两组模式， background 表示背景颜色，而color 表示文字的颜色，因此我们得到了以下的结果：

如你所见，这些设定再一次改变了input 标签的外观。选择器的功能相当强大，这里面有相当多的细节，于后续的课程中进一步作讨论，而下一篇，我们将回到JavaScript ，结合这里所讨论的选择器，针对网页内容进行程序化控制。

原文:大专栏  《HTML5 精要剖析》- 1.5.3 开始发展应用程序/运用选择器组织CSS

原文地址：https://www.cnblogs.com/petewell/p/11509971.html