一、选择器是什么？

在内嵌式和外联式CSS中，要想将 CSS 样式应用于特定的 HTML 元素，首先需要找到该目标元素，这时需要用CSS 中的选择器。**
选择器：选择要添加样式的 HTML 标签的一种方法、模式。

二、选择器有哪些？

首先学习 css2.1 版本的七种选择器：
基础选择器：标签选择器、id 选择器、类选择器、通配符选择器；
高级选择器：后代选择器、交集选择器、并集选择器。

基础选择器

（一）标签选择器

1.含义及示例：

通过标签名去选择标签元素；
书写方式：标签名；
选择范围：选中的是HTML文件中所有的同名标签。
注意：标签选择器可以选择所有的同名标签，会忽视 HTML 元素的嵌套关系，不管嵌套多深，都能被选中。
示例1其中<table> <td> 都是标签名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css"> table {
      width: 810px; height: 810px; } td {
      text-align: center; } </style>
</head>

示例2其中<p> 是标签名

p { width: 300px; font-size: 14px; }

2.特点：

优点:以选中所有的同名标签，设置所有同名标签的公共样式。
缺点:只能实现全选，不能对局部的标签添加特殊样式。

（二）id 选择器

1.含义及示例：

通过标签上的 id 属性去选择标签;
书写方式：#id 属性值;
选择范围：只能选中一个标签.
id 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。
★注意：如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的 id 名，分别选中设置。
示例

<DOCTYPE html>
<html>
    <head>
       <title>id选择器示例</title>
       <style> #name1{
      color: red; font-weight: bold; font-size: 24px; } </style>
    </head>
    <body>
       <p id="name1" >今天真开心</p>
       <p>学习使我快乐</p>
       <p>继续加油</p>
    </body>
</html>
</html>

2.特点：

缺点：id 选择器只能实现单选，不能帮我们完成多选的功能。所以实际应用中很少用。

（三）类选择器

1.含义及示例：

通过标签的 class 属性去选择标签；
书写方式：.class属性值
选择范围：是页面中所有 class 属性值相同的标签；（id唯一，属性值却可以相同）
★ class 命名规则：必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写；
★class 属性值可以与其他的class相同；
多个不同的标签，不区分标签类型，只要 class 属性值相同，都可以被同一个类选择器选中；即：一个选择器可以选中多个标签，只要这个class属性在多个标签中都有；（如示例1）
一个标签的 class 属性可以有多个属性值，值之间用空格分隔，每个属性值组成的选择器，都可以选中这一个标签，每个选择器后面的样式都会添加给同个标签；即：多个选择器也可以选中一个标签,只要多个class属性都在这个标签里。（如示例2）
示例1


<DOCTYPE html>
<html>
    <head>
       <title>类选择器示例</title>
       <style> .v1 {
      color: blueviolet; } .v2 {
      font-size: 26px; } .v3 {
      font-weight: bold; } </style>
    </head>
    <body>
       <p class="v1" >今天真开心</p>
       <p class="v1 v2 v3">学习使我快乐</p>
       <p class="v1" >继续加油</p>
    </body>
</html>

示例2

<DOCTYPE html>
<html>
    <head>
       <title>类选择器示例</title>
       <style> .v1 {
      color: blueviolet; } .v2 {
      font-size: 26px; } .v3 {
      font-weight: bold; } </style>
    </head>
    <body>
       <p>今天真开心</p>
       <p class="v1 v2 v3">学习使我快乐</p>
       <p>继续加油</p>
    </body>
</html>

2.类选择器的特殊应用

★原子类：在css中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可。
比如：上示例1 中的v1 就是原子类

3.特点：

优点：通过一个类选择器进行多选，选中多个标签，添加公共样式；一个标签可以被多个类选择器选中，可以将所有样式进行分离，分别提取公共样式和单独样式，节省代码量。
★ 实际工作中，通常我们有一个使用规律“类上样式(CSS)，id 上行为(JavaScript)”
（解释：设置样式时，常用类选择器，设置交互行为的时用id选择器）

（四）通配符选择器

1.含义及示例：

通过一个特殊符号选择页面内所有的标签；
书写方式：*
选择范围：包含 <html>标签在内的所有标签。
示例


<DOCTYPE html>
<html>
    <head>
       <title>通配符选择器示例</title>
       <style> * {
      color: blueviolet; } </style>
    </head>
    <body>
       <p>今天真开心</p>
       <p>学习使我快乐</p>
       <p>继续加油</p>
    </body>
</html>

2.特点：

优点：可以实现全选，简化书写。
缺点：通配符选择效率低，设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。
★ 注意：实际上线的网站不允许使用*去清除默认内外边距；
不过普通的案例，代码量较少时，为了节省书写，可以使用通配符。

★下篇继续：CSS基础（2）——选择器②高级选择器…

【15】CSS基础（2）——选择器①基础选择器

一、选择器是什么？

二、选择器有哪些？

基础选择器

（一）标签选择器

1.含义及示例：

2.特点：

（二）id 选择器

1.含义及示例：

2.特点：

（三）类选择器

1.含义及示例：

2.类选择器的特殊应用

3.特点：

（四）通配符选择器

1.含义及示例：

2.特点：