CSS 选择器/

选择器

在前一篇文章中提到了选择器，但是在本指南中，我们将更详细地介绍选择器类型以及它们的工作方式。

• Simple selectors:根据元素类型、类或id匹配一个或多个元素。
• Attribute selectors:根据一个或多个元素的属性/属性值匹配它们。
• Pseudo-classes**:匹配一个或多个处于特定状态的元素**，例如鼠标指针悬停的元素、当前禁用或选中的复选框，或者DOM树中其父元素的第一个子元素。
• Pseudo-elements:匹配内容的一个或多个部分，这些部分位于与元素相关的特定位置，例如每个段落的第一个单词，或者生成的内容刚好出现在元素之前。
• Combinations:这些并不是选择器本身，而是将两个或多个选择器以非常特定的方式组合在一起的方法。例如，您可以只选择div的直接后代段落，或者直接位于标题之后的段落。
• Multiple selectors:同样，这些不是单独的选择器;其思想是，您可以将多个选择器放在同一个CSS规则上，用逗号分隔，从而将一组声明应用于这些选择器选择的所有元素。

CSS值和单位

有许多类型的CSS 属性值 需要考虑，从数值到颜色到执行特定操作的函数(如嵌入背景图像或旋转元素)。其中一些依赖于特定的单元来指定它们所代表的确切值——您希望您的框宽为30像素，还是30厘米，或30 ems?在本指南中，我们将研究更常见的值，如长度、颜色和简单函数，以及不太常见的单位，如度，甚至是无单位的数值。

CSS中有许多值类型，有些非常常见，有些则很少遇到。在本文中，我们不会详尽地介绍它们;在您继续学习CSS的过程中，您可能会发现其中最有用的部分。在本文中，我们将讨论以下CSS值:

• 数值:长度值，用于指定元素宽度、边框厚度或字体大小，无单元整数用于指定相对线宽或运行动画的次数。
• 百分比:还可以用来指定大小或长度——例如，相对于父容器的宽度或高度，或者默认的字体大小。这些通常是为了方便响应式设计(例如创建“液体布局”，它可以自动调整以适应不同的屏幕大小)。
• 颜色:用于指定背景颜色、文本颜色等。
• 函数:用于指定背景图像或背景图像梯度。

在CSS主题的其余部分中，您还将看到使用这种单元的例子，以及您所看到的几乎所有其他CSS资源!你很快就会习惯的。
注意:你可以在CSS参考中找到CSS单元和值类型的概述以及CSS单元的详尽覆盖;单元是由尖括号包围的条目，例如。

数值

您将在CSS单元的许多地方看到使用数字。本节讨论最常见的数值类。
长度/大小
在CSS中，您将始终使用长度/大小单位(参见作为参考)来进行布局、排版等等。让我们看一个简单的例子-首先HTML:

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

所以在这段代码中，我们做了以下工作:

• **将每个段落的边距、填充和边框宽度分别设置为5像素、10像素和2像素。**边距/填充的单个值意味着所有四个边都设置为相同的值。边框宽度设置为边框简写值的一部分。

• 将三个不同段落的宽度设置为越来越大的像素值，这意味着盒子越往下越宽。

• 将三个不同段落的字体大小设置为越来越大的像素值，这意味着文本越往下越大。字体大小是指每个字形的高度。

像素(px)被称为绝对单位，因为无论其他任何相关设置如何，它们的大小总是相同的。其他绝对单位如下:

• q, mm, cm, in:四分之一毫米，毫米，厘米，或英寸。
• pt, pc:点(1/72英寸)或picas(12点)。

你可能不会经常使用这些，除了像素。

还有相对单位，相对于当前元素的字体大小或视口大小:

• em: 1em与当前元素的字体大小相同。在应用CSS样式之前，web浏览器为web页面提供的默认基本字体大小为16个像素，这意味着1em的计算值默认为一个元素的16个像素。但是要注意——字体大小是由它们的父元素继承的，所以如果在父元素上设置了不同的字体大小，那么与em等价的像素就会变得复杂。现在不要太担心这个问题——我们将在后面的文章和模块中更详细地讨论继承和字体大小。em是web开发中最常用的相对单元。

• ex,ch:分别是小写x的高度和数字0的宽度。它们不像em那样常用或得到良好的支持。

• rem: rem (root em)的工作方式与em完全相同，只是它总是等于默认的基本字体大小;继承的字体大小没有影响，所以这听起来比em更好，尽管rems在较老版本的Internet Explorer中不能工作(有关调试CSS中跨浏览器支持的更多信息，请参阅)。

• vw, vh:**分别是视口宽度的1/100和视口高度的1/100。**同样，它们也不像新兴市场那样受到广泛支持。

使用相对单位是非常有用的-您可以相对于您的字体或视图大小调整HTML元素的大小，这意味着如果一个视力受损的用户将整个网站的文本大小翻倍，那么布局将保持正确。

无单位值
有时你会在CSS中遇到无单元的数值——这并不总是一个错误，事实上，在某些情况下这是完全允许的。例如，如果您想完全删除元素的空白或填充，您可以使用无单元0 - 0 = 0，无论之前设置了什么单元!

margin: 0;

数量的动画
CSS动画允许对页面上的HTML元素进行动画。让我们展示一个简单的例子，当鼠标悬停在段落上时，它会导致段落旋转。这个例子的HTML非常简单:

<p>Hello</p>

有一个更复杂的css

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

在这里您可以看到许多有趣的单元，这些单元我们在本文中没有明确讨论(s， s， s， s…)，但是我们在这里感兴趣的是一行animation-iteration-count: 5;-控制动画被触发时(在本例中，当段落被鼠标悬停时)发生的次数，并且是一个简单的无单位整数(在计算机中称为整数)。

百分比
您还可以使用百分数来指定可以由特定数值指定的大部分内容。例如，这允许我们创建宽度总是移动到其父容器宽度的一定百分比的盒子。可以将其与宽度设置为某个单位值(如px或em)的盒子进行比较，这些单位值始终保持相同的长度，即使它们的父容器的宽度发生了变化。

<div>
  <div class="boxes">Fixed width layout with pixels</div>
  <div class="boxes">Liquid layout with percentages</div>
</div>

css中，

div .boxes {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

.boxes:nth-child(1) {
  background-color: red;
  width: 650px;
}

.boxes:nth-child(2) {
  background-color: blue;
  width: 75%;
}

这里我们给了div一些边距、高度、字体大小、边框和颜色。然后我们给第一个div和第二个div不同的背景颜色，这样我们就可以很容易地把它们区分开来。我们还将第一个div的宽度设置为650px，第二个div的宽度设置为75%。这是第一个div的效果总是有相同的宽度,即使视窗的大小(它将开始消失比屏幕屏幕当窗口窄),而第二个div的宽度不断改变窗口大小改变时,它将一直保持其父母一样宽75%。在本例中，div的父元素是元素，默认情况下它是viewport宽度的100%。

我们还将字体大小设置为百分比值:200%。这工作有点不同,你所想的那样,但它确实有意义,同样,这一新的分级是相对于父字体大小,因为它是新兴市场。在这种情况下,父字体大小是16 px -页面默认,因此,将200%的计算值,或32 px。这实际上工作在一个非常类似的方式em - 200%基本上相当于2em。

这两种不同的框布局类型通常被称为液体布局(随着浏览器窗口大小的变化而变化)和固定宽度布局(无论如何保持不变)。两者都有不同的用途，例如:

• 可以使用液态布局来确保标准文档始终适合屏幕，并且在不同移动设备屏幕大小的情况下看起来都没问题。
• 固定宽度的布局可以用来保持在线地图的大小相同;然后，浏览器的viewport可以在地图上滚动，在任何时候只查看一定数量的地图。您一次可以看到的数量取决于您的viewport有多大。
  在本课程后面的CSS布局和响应式设计模块(TBD)中，您将学习更多关于web布局的知识

颜色

关键词/16进制表示法/RGB表示/HSL表示等等+透明度。
函数：
在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，而开发人员和计算机只需付出最少的努力。函数通常与JavaScript、Python或c++等语言相关联，但它们也作为属性值存在于CSS中。我们已经在color部分看到了一些函数，比如rgb()、hsl()等等:

级联和继承

CSS有两个不同但相关的系统来解决选择器冲突的情况(不同的选择器选择相同的元素;以及嵌套在其他元素中的元素(应用于父元素的一些样式可以由子元素继承;一些不喜欢。)本文对这两种系统都进行了足够详细的介绍，对您有所帮助，但不会过多。

在本文中，我们不会详尽地介绍它们;在您继续学习CSS的过程中，您可能会发现其中最有用的部分。在本文中，我们将讨论以下CSS值:

• 数值:长度值，用于指定元素宽度、边框厚度或字体大小，无单元整数用于指定相对线宽或运行动画的次数。
• 百分比:还可以用来指定大小或长度——例如，相对于父容器的宽度或高度，或者默认的字体大小。这些通常是为了方便响应式设计(例如创建“液体布局”，它可以自动调整以适应不同的屏幕大小)。
• 颜色:用于指定背景颜色、文本颜色等。
• 函数:用于指定背景图像或背景图像梯度。

联级

CSS是层叠样式表的缩写，这表明层叠的概念很重要。在最基本的层次上，它表明CSS规则的顺序很重要，但它比这更复杂。选择器在级联中胜出取决于三个因素(这些因素按权重顺序列出——较早的因素将否决较晚的因素):

• 重要性
• 特异性
• 订单来源

<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>

#winning {
  background-color: red;
  border: 1px solid black;
}

.better {
  background-color: gray;
  border: none !important;
}

p {
  background-color: blue;
  color: white;
  padding: 5px;
}

专一性

特异性基本上是衡量一个选择器的特异性有多强——它可以匹配多少个元素。如上图所示，元素选择器的特异性较低。类选择器具有更高的特异性，因此将战胜元素选择器。ID选择器具有更高的特异性，因此将战胜类选择器。战胜ID选择器的一个可靠方法是使用!
一个选择器的特异性是用四个不同的值(或组件)来测量的，这些值可以被认为是千、百、十和一——四列中有四个个位数:
数千:如果声明在样式属性(即内联样式)中，则在本列中得分1。这样的声明没有选择器，所以它们的特异性总是简单的1000。
数百:在本列中，对于包含在总体选择器中的每个ID选择器，得分为1。
几十:在这个列中，对于包含在整个选择器中的每个类选择器、属性选择器或伪类，得分为1。
几个:在本列中，对于包含在整个选择器中的每个元素选择器或伪元素，都要获得一个。

例如：

关于规则混合的说明

在考虑所有这些级联理论以及将什么样式应用于其他样式时，您应该记住的一件事是，所有这些都发生在属性级别——属性覆盖其他属性，但是您不会得到整个规则覆盖其他规则。当多个CSS规则匹配同一元素时，它们都应用于该元素。只有在此之后，才会评估任何相互冲突的属性，以确定哪种样式会赢得其他样式的支持。

继承

CSS继承是我们需要研究的最后一个部分，以获得所有的信息，并了解应用于元素的样式。其思想是，应用于元素的一些属性值将被该元素的子元素继承，而有些则不会。

• 例如，继承font-family和color是有意义的，因为这样可以通过将font-family应用于元素轻松设置站点范围的基本字体;然后，您可以在需要的地方覆盖单个元素上的字体。必须在每个元素上分别设置基本字体，这真的很烦人。

• 另一个例子是，不继承margin、padding、border和background-image是有意义的。想象一下，如果您在容器元素上设置这些属性，并让每个子元素继承它们，然后必须在每个单独的元素上取消所有这些属性的设置，将会出现什么样的样式/布局混乱!

哪些属性是默认继承的，哪些不是，这在很大程度上取决于常识。但是，如果您想确定，您可以参考CSS参考—每个单独的属性页都包含一个汇总表，其中包含关于该元素的各种详细信息，包括它是否继承。

控制继承

• 继承
  将应用于选定元素的属性值设置为与其父元素的属性值相同。
• 最初的
  将应用于选定元素的属性值设置为与浏览器默认样式表中该元素的值相同。如果浏览器的默认样式表没有设置值，而属性是自然继承的，则将属性值设置为inherit。
• 设置
  将属性重置为其自然值，这意味着如果属性是自然继承的，则它的行为类似于inherit，否则它的行为类似于initial。
• 回复
  将属性还原为如果当前原点没有应用任何样式的值。换句话说，属性的值设置为用户样式表的属性值(如果设置了)，否则属性的值将从用户代理的默认样式表中获取。

盒模型

CSS框模型是Web布局的基础——每个元素都表示为一个矩形框，框的内容、填充、边框和边距彼此围绕，就像洋葱层一样。当浏览器呈现web页面时，它计算出每个框的内容应用了什么样式，周围的洋葱层有多大，以及这些框之间的位置关系。在了解如何创建CSS布局之前，您需要了解box模型。

CSS调试

在本模块的最后一篇文章中，我们将介绍调试CSS的基础知识，包括探索应用于页面的CSS，以及其他可以帮助您发现CSS代码中的错误的工具。