04 【CSS选择器 】

5.CSS选择器

5.1CSS选择器的作用

选择器就是根据不同的需求把不同的标签选出来，这就是选择器的作用，简单来说，就是：选择标签用的。

h1 {
   
	color: red;
	font-size: 25px;
}

以上 CSS 做了两件事：

• 找到所有的 h1 标签。（选对人）
• 设置这些标签的样式：颜色为红色、字体大小为 25 像素。（做对事）

5.2选择器的分类

在 CSS 中，可以根据选择器的类型把选择器分为：基础选择器 和 复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。

• 基础选择器是由 单个 选择器组成的
• 基础选择器又包括：标签选择器、类选择器、id 选择器、通配符选择器
• 复合选择器可以更准确、更高效的选择目标元素（标签）
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
• 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

5.3标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

语法：

标签名 {
   
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	...
}

作用：

标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。

优点：

能快速为页面中同类型的标签统一设置样式。

缺点：

不能设计差异化样式，只能选择全部的当前标签。

5.4类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用 类选择器 。

CSS 语法：

.类名 {
   
	属性1: 属性值1;
	...
}

例如：将所有拥有 red 类的 HTML 元素均设置为红色。

.red {
   
	color: red;
}

HTML 语法：

<div class="red">变红色</div>

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个 . 号显示。

注意：

• 类选择器使用 .（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）
• 可以理解为给这个标签起了一个别名来表示
• 长名称或词组可以使用中横线 - 来为类命名
• 不能使用已有的关键字作为类名
• 不要使用纯数字、中文等命名，尽量使用英文字母来表示
• 命名要有意义，尽量使别人一眼就知道这个类名的目的（可读性第一，长度第二，推荐使用英语，如果是使用拼音请使用全拼）
• 命名规范：见附件（Web前端开发规范手册.pdf）

类选择器——多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。

• 在标签 class 属性中写多个类名
• 多个类名中间必须用 空格 分开
• 这个标签就可以分别具有这些类名的样式

    <style type="text/css">
        /* 一个标签可以运用多个类选择器，之间用空格隔开 */
        .red {
     
            color: red;
        }

        .font35 {
     
            font-size: 35px;
        }
    </style>
    <div class="red font35">dselegent</div>

多类名开发中使用场景

• 可以把一些标签元素相同的样式（共同的部分）放到一个类里面
• 这些标签都可以调用这个公共的类，然后再调用自己独有的类
• 从而节省 CSS 代码，统一修改也非常方便（模块化、可重用化）

    <style type="text/css">
        /* 类选择器最大的优势在于：复用 */
        .box {
     
            width: 100px;
            height: 100px;
        }

        .red {
     
            background-color: red;
        }

        .green {
     
            background-color: green;
        }
    </style>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>

多类名选择器在后期布局比较复杂的情况下，是使用得较多的。

5.5id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 # 来定义。

语法：

#id名 {
   
	属性1: 属性值1;
	...
}

**例如：**将 id 为 nav 元素中的内容设置为红色。

#nav {
   
	color: red;
}

**注意：**id 属性只能在每个 HTML 文档中出现一次。

**口诀：**样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用。

id 选择器和类选择器的区别：

• 类选择器 (class) 好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
• id 选择器好比人的身份证号码，全中国是唯一的，不可重复（同一个 id 选择器只能调用一次）
• id 选择器和类选择器最大的不同在于使用次数上
• 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

    <style type="text/css">
        #pink {
     
            color: pink;
        }
    </style>
    <div id="pink">dselegent</div>

再次强调：同一 id 只能定义一次，同一 id 选择器也只能调用一次！（对于 CSS 修改样式来说，最好使用类选择器，id 选择器主要与后面的 JS 搭配使用）。

5.6通配符选择器

在 CSS 中，通配符选择器使用 * 定义，它表示选取页面中所有元素（标签）。

语法：

* {
   
	属性1: 属性值1;
	...
}

• 通配符选择器不需要调用，自动就给所有的元素使用样式
• 特殊情况才使用，后面讲解使用场景

* {
   
	margin: 0;
	padding: 0;
}

5.7基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如：p	不能差异化选择	较多	p {color: red;}
类选择器	可以选出 1 个或者 多个 标签	可以根据需求选择	非常多	.nav {color: red;}
id 选择器	一次只能选择 1 个标签	ID 属性只能在每个 HTML 文档中出现一次，也只能调用一次	一般和 js 搭配	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* {color: red;}

• 每个基础选择器都有使用场景，都需要掌握
• 如果是修改样式，类选择器是使用最多的

5.8关系选择器

• 父元素：直接包含子元素的元素叫做父元素

• 子元素：直接被父元素包含的元素是子元素

• 祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素

• 后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素

• 兄弟元素：拥有相同父元素的元素是兄弟元素

5.8.1后代选择器

后代选择器 又称为 包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：

元素1 元素2 {
    样式声明 }

上述语法表示选择 元素 1 里面的所有元素 2 （后代元素）。

例如：

ul li {
    样式声明 } 		/* 选择 ul 里面所有的 li 标签元素 */

• 元素1 和 元素2 中间用 空格 隔开
• 元素1 是父级，元素2 是子级，最终选择的是 元素2，即：元素1 是不会生效样式的
• 元素2 可以是儿子，也可以是孙子等，只要是 元素1 的后代即可
• 元素1 和 元素2 可以是任意基础选择器

    <style>
        /* 把 ol 里面的小 li 选出来改为 pink */
        ol li {
     
            color: pink;
        }

        /* 把 ol 里面的小 a 选出来改为 red */
        ol a {
     
            color: red;
        }

        /* 把 ul 里面的小 li 选出来改为 green */
        ul li {
     
            color: green;
        }

        /* 把 nav 类中的 li 里面的 a 选出来改为 yellow */
        .nav li a {
     
            color: yellow;
        }
    </style>
    
    <ol>
        <li>我是 ol 的孩子</li>
        <li>我是 ol 的孩子</li>
        <li>我是 ol 的孩子</li>
        <li><a href="#">我是 ol 的孙子</a></li>
    </ol>
    <ul>
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li><a href=