有手就行！必看！学习css基础篇NO.2

CSS的选择器

css选择器是什么？

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
在css中，通过模式匹配规则来决定给文档树中的元素应用什么样的样式。这些模式规则就被称为选择器。一个选择器可能只是一个单一的元素名称，也可能是包含复杂上下文的模式规则集合。如果一个元素满足一个选择器中的所有条件，我们就称这个选择器选中了该元素。

选择器的分类

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

简单选择器

1.标签选择器
一个完整的HTML页面是由很多不同的标签组成。标签选择器：指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。

例如:

html {background-color: black;}

p {font-size: 30px; backgroud-color: gray;}

h2 {background-color: red;}

以上css代码会对整个文档添加黑色背景；
将所有p元素字体大小设置为30像素同时添加灰色背景；
】对文档中所有h2元素添加红色背景。

2.ID选择器
1> ID 选择器允许以一种独立于文档元素的方式来指定样式。
2> ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次。
3> id 选择器以 “#” 来定义。

例如：在css中，下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为黄色。

  #red{color：red；}

   #yellow{color：yellow；}

3.类选择器
类选择器使用类名来选择元素，前提是要在HTML中，给元素定义一个class的属性，class=“类名”，然后使用"."进行标识，后面紧跟类名。

在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。请看下面的 HTML 代码：

<h1 class="important">
This heading is very important
</h1>

 <p class="impportant">
This paragraph is very important.
</p>

在上面的代码中，两个元素的 class 都指定为 important：第一个标题（ h1 元素），第二个段落（p 元素）。

4.通配符选择器
通配符使用星号*表示，意思是“所有的”。
在CSS中，同样使用 * 代表所有的标签或元素，它叫做通配符选择器。

比如：* { color : red; } 这里就把所有元素的字体设置为红色。

**会匹配所有的元素，因此针对所有元素的设置可以使用*来完成，用的最多的例子如下：
*{margin:0px; padding:0px;}
这里是设置所有元素的外边距margin和内边距padding都为0。

复杂选择器

1.群组选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。
例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：

<p class="important warning">
This paragraph is very important warning.
 </p>

注：这两个词的顺序无关紧要，写成 warning important 也可以。
假设希望 h2 元素和段落都有红色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:red;}

将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:red;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。

可以将任意多个选择器分组在一起，对此没有任何限制。
例如，如果您想把很多元素显示为红色，可以使用类似如下的规则：

body, h2, p, table, th, td, pre, strong, em {color:red;}

2.后代选择器
1>后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

2>在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符。

3>每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。

举例：只对 h1 元素中的 em 元素应用样式，可以这样写：

 h1 em {colopr:red;}

3.子代选择器
1>子代选择器（Child selectors）只能选择作为某元素子元素的元素。

2>不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。

3>子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。
例如：选择只作为 h1 元素子元素的 strong 元素，可以这样编写：

  h1 > strong {color:red;}

选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素.

下一章节>css中伪类选择器和伪元素

每周更新