CSS/CSS3选择器总结

基础选择器

标签选择器

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

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

类选择器

• 类选择器使用“.”（英文点号）进行标识，后面紧跟类名.
• 语法：

• 类名选择器

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

• 标签

<p class='类名'></p>

我们可以给标签指定多个类名，从而达到更多的选择目的。各个类名中间用空格隔开。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

id选择器

id选择器使用#进行标识，后面紧跟id名

• 其基本语法格式如下：

• id选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

• 标签

<p id="id名"></p>

• 元素的id值是唯一的，只能对应于文档中某一个具体的元素。
• 用法基本和类选择器相同。

• W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

• 类选择器（class） 好比人的名字，  是可以多次重复使用的， 比如  张伟  王伟  李伟  李娜
• id选择器     好比人的身份证号码，  全中国是唯一的， 不得重复。 只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上。

pink老师 总结他们

• 类选择器我们在修改样式中，用的最多。
• id选择器一般用于页面唯一性的元素身上，经常和我们后面学习的javascript 搭配使用。

通配符选择器

• 概念
  通配符选择器用*号表示，  *   就是 选择所有的标签      他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
• 其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

• 注意：

会匹配页面所有的元素，降低页面响应速度，不建议随便使用

复合选择器

目标

• 理解

• 理解css复合选择器分别的应用场景

• 应用

• 使用后代选择器给元素添加样式
• 使用并集选择器给元素添加样式
• 使用伪类选择器

为什么要学习css复合选择器

CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。

• 目的是为了可以选择更准确更精细的目标元素标签。
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

后代选择器（重点）

• 概念：
  后代选择器又称为包含选择器
• 作用：
  用来选择元素或元素组的子孙后代
• 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

父级 子级{属性:属性值;属性:属性值;}

• 语法：

.class h3{color:red;font-size:16px;}

• 当标签发生嵌套时，内层标签就成为外层标签的后代。
• 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

子元素选择器

• 作用：
  子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
• 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
• 语法：

.class>h3{color:red;font-size:14px;}

pink老师一句话说出他们

白话：

比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

交集选择器

• 条件
  交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

• 语法：

• 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

记忆技巧：

交集选择器 是 并且的意思。  即...又...的意思

比如：   p.one   选择的是： 类名为 .one  的 段落标签。

用的相对来说比较少，不太建议使用。

并集选择器（重点）

• 应用：

• 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。

• 并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。
• 语法：

• 任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。
• 记忆技巧：
  并集选择器通常用于集体声明  ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。

比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
通常用于集体声明。

链接伪类选择器（重点）

• a:link      / 未访问的链接 /
• a:visited   / 已访问的链接 /
• a:hover     / 鼠标移动到链接上 /
• a:active    / 选定的链接 /
• 注意：写的时候，他们的顺序尽量不要颠倒  按照  lvha 的顺序。否则可能引起错误。

a {   /* a是标签选择器  所有的链接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
            color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

七、CSS3 属性选择器(上)

1. 什么是 CSS3

• 在 CSS2 的基础上拓展、新增的样式

2. CSS3 发展现状

• 移动端支持优于 PC 端
• CSS3 目前还草案，在不断改进中
• CSS3 相对 H5，应用非常广泛

3. 属性选择器列表
4. 属性选择器代码演示

button {
  cursor: pointer;
}
button[disabled] {
  cursor: default
}

八、CSS3 属性选择器(下)

1. 代码演示

input[type=search] {
  color: skyblue;
}
span[class^=black] {
  color: lightgreen;
}
span[class$=black] {
  color: lightsalmon;
}
span[class*=black] {
  color: lightseagreen;
}

九、结构伪类选择器

1. 属性列表
   
2. 代码演示

ul li:first-child {
  background-color: lightseagreen;
}
ul li:last-child {
  background-color: lightcoral;
}
ul li:nth-child(3) {
  background-color: aqua;
}

十、nth-child 参数详解

1. nth-child 详解

• 注意：本质上就是选中第几个子元素
• n 可以是数字、关键字、公式
• n 如果是数字，就是选中第几个
• 常见的关键字有 even 偶数、odd 奇数
• 常见的公式如下(如果 n 是公式，则从 0 开始计算)
• 但是第 0 个元素或者超出了元素的个数会被忽略
  

2. 代码演示

<style>
  /* 偶数 */
  ul li:nth-child(even) {
    background-color: aquamarine;
  }
  /* 奇数 */
  ul li:nth-child(odd) {
    background-color: blueviolet;
  }
  /*n 是公式，从 0 开始计算 */
  ul li:nth-child(n) {
    background-color: lightcoral;
  }
  /* 偶数 */
  ul li:nth-child(2n) {
    background-color: lightskyblue;
  }
  /* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: lightsalmon;
  }
  /* 选择第 0 5 10 15, 应该怎么选 */
  ul li:nth-child(5n) {
    background-color: orangered;
  }
  /* n + 5 就是从第5个开始往后选择 */
  ul li:nth-child(n + 5) {
    background-color: peru;
  }
  /* -n + 5 前五个 */
  ul li:nth-child(-n + 5) {
    background-color: tan;
  }
</style>

十一、nth-child 和 nt-of-type 的区别

1. 代码演示

<style>
  div :nth-child(1) {
    background-color: lightblue;
  }
  div :nth-child(2) {
    background-color: lightpink;
  }
  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }
  div span:nth-of-type(3) {
    background-color: #fff;
  }
</style>

2. 区别

• nth-child 选择父元素里面的第几个子元素，不管是第几个类型
• nt-of-type 选择指定类型的元素

十二、伪元素选择器

1. 伪类选择器
   
2. 伪类选择器注意事项

• before 和 after 必须有 content 属性
• before 在内容前面，after 在内容后面
• before 和 after 创建的是一个元素，但是属于行内元素
• 创建出来的元素在 Dom 中查找不到，所以称为伪元素
• 伪元素和标签选择器一样，权重为 1

3. 代码演示

<style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid lightcoral;
    }
    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }
    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }
  </style>

十三、伪元素的案例

1. 添加字体图标

p {
   width: 220px;
   height: 22px;
   border: 1px solid lightseagreen;
   margin: 60px;
   position: relative;
}
p::after {
  content: '\ea50';
  font-family: 'icomoon';
  position: absolute;
  top: -1px;
  right: 10px;
}