css选择器

基本选择器

选择器就是用来选中对应的标签的，然后给选中的标签加上对应的样式

标签选择器（标签名）

要求：四个标签都设置为红色

<!-- 四个标签都设置为红色 -->
<p>我是p标签</p>
<p>我也是p标签</p>
<div>我是div</div>
<div>我也是div</div>

**作用：**根据指定的标签名，来设置指定的标签的样式

结构：

 <style>
	标签名 {
		属性名1: 属性值1;
		属性名2: 属性值2;
		....
	}
</style>

特点：

• 标签选择器不能单独选中某一个标签，会选择这一类标签
• 标签选择器不管嵌套关系多深，都能选择到

类选择器（.）

要求：满足下面的要求

/*原始的标签*/
<p>寒冰射手</p>
<p>麦林炮手</p>
<p>暗影猎手</p>
<div>英勇投弹手</div>

/*添加好类之后的标签*/
<p class="aXi">寒冰射手</p>
<p class="xPao">麦林炮手</p>
<p class="vn">暗影猎手</p>
<div class="kuQi">英勇投弹手</div>

每一个标签都有class（类）属性，class属性的属性值就是类名

**作用：**根据指定的类名，来设置指定的标签的样式

结构：

<style>
	.类名 {
		属性名1: 属性值1;
		属性名2: 属性值2;
		....
	}
</style>

步骤（相当于穿衣服）：

1. 声明自定义类名.自定义类名 {属性1:值1;属性2: 值2;}（先做一种衣服）
2. 给对应的元素添加class类名属性 class=“自定义的类名” （把这种衣服给标签穿上）

注意：

• 类名的命名规则：由数字、字母、下划线组成，不能以数字开头！！
• 一个标签上可以有多个类名，每个类名之间必须以空格隔开（一个人同时可以穿多种衣服）
• 一个类选择器，可以选择多个标签（一种衣服可以有多个人穿→撞衫）

**记忆：**标签与类选择器的关系：多对多

ID选择器(#)

要求：都设置不同的颜色，不用类选择器

/*原始的标签*/
<p>戏命师</p>
<p>探险家</p>
<div>奥巴马</div>

/*添加好id之后的标签*/
<p id="jin">戏命师</p>
<p id="ez">探险家</p>
<div id="luXian">奥巴马</div>

每个标签都有id属性，id属性的属性值叫做id名

**作用：**根据指定的id，来设置指定的标签的样式

结构：

<style>
	#id名 {
		属性名1: 属性值1;
		属性名2: 属性值2;
		....
	}
</style>

步骤（相当于结婚领证）：

1. 声明id #自定义id名字 {属性1:值1;属性2:值2;}
2. 给对应的元素添加属性 id=“自定义id”

注意点：

• id属性相当于标签的身份证号码，在一个页面中，id属性值是唯一的，不可重复的。
• 一个标签上只能有一个id属性值
• 一个id选择器只能选中一个标签
• id的命名规则和类名一样

**记忆：**标签与id选择器的关系：一对一

----------

特别注解

class类名和id值的区别

• class类名相当于姓名，可以重复，一个标签可以有多个class类名
• id值相当于身份证号码，不可重复，一个标签只能有一个id值

class选择器和id选择器的区别

• class选择器以.开头

• id选择器以#开头

• 使用最多的是class选择器

• id一般情况是配合js使用的，所以除非特殊情况，否则不要用id去设置样式。

• 实际开发要注意的冗余代码的抽取，可以将一些公共的代码抽取到一个类选择器

  小demo：

  /*---------------冗余代码（重复的代码）------------------*/
  p {
      font-size: 60px;
      color: red;
  }
  div {
      font-size: 60px;
      color: red;
  }
  /*---------------抽取出公共类------------------*/
  .common {
      font-size: 60px;
      color: red;
  }
  

通配符选择器（*）

需求：把页面内所有的元素都设置一个颜色为red

<!-- 把页面内所有的元素都设置一个颜色为red -->


**作用：** 会将页面上所有的标签都设置这个样式

```html
<style>
	* {
		属性名: 属性值;
	}
</style>

注意:

• 通配符会去页面上找到所以标签，并且一个个的标签设置样式，所以比较消耗性能，一般不会使用（只会在一些小页面中用于清除浏览器默认的margin和padding时才会使用到）

复合选择器

并集选择器（,）

并集选择器也叫做分组选择器

需求：把div和p的设置红色（节省代码的方式）

<!-- 把div和p的设置红色（节省代码的方式） -->
<div>复仇之矛</div>
<p>惩戒之箭</p>
<p>虚空之女</p>
<span>瘟疫之源</span>

并集选择器可以把多个选择器写在一起，节省代码

作用 : 找到选择器1和选择器2…选中的标签，给他们都设置样式

代码 :

<style>
	选择器1,选择器2 {
		属性名1: 属性值1;
	}
</style>

注意 :

• 并集选择器可以同时写多个的选择器 ，选择器之间需要以逗号隔开

交集选择器（紧挨着）

<!-- 只让德邦总管变红（不能改变html结构） -->
<div class="red">德邦总管</div>
<p>德玛西亚之力</p>
<p class ="red">德玛西亚皇子</p>

作用：（既又原则）选择页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

例如：p.box {}  既是p标签 又有box类名

代码：

/*既能被选择器1选中，又能被选择器2选中的标签*/
选择器1选择器2 {
	属性名1: 属性值1;
}

注意：

• 交集选择器可以同时写多个选择器，并且选择器与选择器之间紧挨着的！！
• 如果交集选择器中有标签选择器，标签选择器必须写在最前面

后代选择器（空格）

<!-- 只让蛮族之王变绿（不能改变html结构） -->
<div class="father"> 
    <p>蛮族之王</p>
</div>
<p>寒冰射手</p>

作用 :

先通过选择器1找到一堆标签，在这一堆标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签设置样式。

代码 :

选择器1 选择器2 {
	属性名1: 属性值1;
	....
}

步骤：

1. 通过选择器1找到一堆标签
2. 找到这一对标签的所有的后代标签
3. 在这些后代标签中，找到满足选择器2的标签，给这些标签加上样式

子代选择器（>）

<!-- 只让小虚空之女变红（不能改变html结构） -->
<div class="father">
    <p>虚空之女</p>
    <div>
        <p>虚空掠夺者</p>
    </div>
</div>
<p>虚空行者</p>

**作用 ：**通过选择器1找一堆标签，在这一堆标签的子代（儿子）中，找到满足选择器2的标签设置样式

代码 :

选择器1 > 选择器2 {
	属性名1: 属性值1;
	....
}

• 步骤：
  1. 通过选择器1找到一堆标签
  2. 找到这一对标签的所有的子代标签
  3. 在这些子代标签中，找到满足选择器2的标签，给这些标签加上样式

练习

<!-- 主导航栏 -->
<div class="nav">    
  <ul>
    <li><a href="#">公司首页</a></li>
	<li><a href="#">公司简介</a></li>
	<li><a href="#">公司产品</a></li>
	<li>
         <a href="#">联系我们</a>
		 <ul>
		    <li><a href="#">公司邮箱</a></li>
		    <li><a href="#">公司电话</a></li>
		 </ul>
	</li>
  </ul>
</div>
<!-- 侧导航栏 -->
<div class="sitenav">    
  <div class="left">左侧侧导航栏</div>
  <div class="right"><a href="#">登录</a></div>
</div>

在不修改以上代码的前提下，完成以下任务：

1. 链接登录的颜色为红色，同时主导航栏里面的所有的链接改为粉色（简单）
2. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑（中等）
3. 主导航栏里面的一级菜单链接文字颜色为绿色（难）

答案：

.right a {
	color: red;
}
.nav a {
	color: pink;
}
.nav,.sitenav {
	font-size: 14px;
	font-family: '微软雅黑';
}
.nav>ul>li>a {
	color: green;
}