前端学习笔记(一)：CSS选择器

前言

离职之后在考研、自学、工作这三个选项中选择了最“没钱途”的选项，但也觉得这是或许我最应该选择的路。这个系列的将主要作为自己的学习笔记，用于在前端路上的摸索与记录，若有大佬愿意斧正、指引，感激不尽。

CSS选择器

选择器的作用：选择特定标签，为其联系设置CSS样式。

基础选择器

标签选择器

选择该页面的所有同类标签，如：选择所有div标签

• 直接填写标签名，如：div {}

类选择器

可以选择同页面中，所有class属性值相同的标签，如：选择所有含有class=“aaaa”属性的标签。

• 在对应标签中添加 class属性 并附值，选择器则为 .+属性值，如：

<div class="aaaa"> </div><style>.aaaa {} </style>

• 注：
  选择器使用 “.” 标识
  不可使用原有标签名作为class的属性值
  尽量不要使用纯数字或中横线命名
  尽量使用意义明确易于辨识的类名

• 多类名选择器
  一个标签可以选择两个或两个以上的类名
  必须用空格分隔
  如： class=“red font35”
  意义：部分标签的样式设计差异很小时，可将相同部分写到一起，差异部分 分开写，可以减少重复代码

id选择器

可以选择同页面中，所有id属性值相同的标签，如：选择所有含有id=“aaaa”属性的标签。

• 在对应标签中添加 id 属性 并附值，选择器则为 #+属性值，如：

<div id="aaaa"> </div><style>#aaaa {} </style>

注：同页面标签id的必须唯一，结构调用id，只能调用一次

通配符选择器

常用于页面的初始化

• 选择页面的所有元素，用法：* {}

复合选择器

两个或两个以上的选择器连用则为复合选择器

后代选择器

可选择父元素的所有对应子元素，该选择器可以无限制隔代（即，父元素 可以直接跟孙子、重孙元素）

• 用法：父元素选择器+空格+子元素选择器
  如：.nav a {} （即，class="nav"元素包含的所有a标签被选中）

子选择器

只能选择最近一级子元素，即亲儿子元素，不可选孙子、重孙

• 用法：父元素+>+子元素
  如：div>a {} （选中标签为a且上级标签为div的元素）

并集选择器

一个样式组，应用到多个选择器时使用，将选择器用逗号隔开即可，注最后一个选择器后不可加逗号

• 用法：选择器+,+选择器
  如：a,div,p {}（即选择所有的a、div、p标签）

伪类选择器

链接伪类选择器（可以用于其他非链接元素）

• a:link（未访问的链接）

• a:visited（已经访问的链接）

• a:hover（鼠标悬停在其上时）

• a:active（鼠标点击时，或按住时）
  注：书写顺序按照L-V-H-A

• input:focus（获得光标焦点的input表单元素）

H5新增选择器

属性选择器

• 标签名[属性名]{}
• 标签名[属性名=属性值]{}
• 标签名[属性名^=特定值]{}
  即特定标签名，用于特定属性名，且属性值以特定值开头的元素
• 标签名[属性名$=特定值]{}
  即特定标签名，用于特定属性名，且属性值以特定值结尾的元素
• 标签名[属性名*=特定值]{}
  即特定标签名，用于特定属性名，且属性值含有以特定值的元素

结构伪类选择器

• 父元素 子元素:first-child
  即父元素对应的第一个对应子元素 标签
• 父元素 子元素:last-child
  即父元素对应的最后一个个对应子元素 标签
• 父元素 子元素:nth-child(n)
  即父元素对应的第n个对应子元素 标签
  n可以是数值，单词如even（偶数）、odd（奇数）也可以是公式如2n+1(未知数只能是n)
• 父元素 子元素:first-of-type
  即父元素对应的第一个对应子元素 标签
• 父元素 子元素:last-of-type
  即父元素对应的最后一个个对应子元素 标签
• 父元素 子元素:nth-of-type(n)
  即父元素对应的第n个对应子元素 标签
  n可以是数值，单词如even（偶数）、odd（奇数）也可以是公式如2n+1(未知数只能是n)

伪元素选择器

• 元素::before
  再元素内部的前部插入内容
• 元素::after
  再元素内部的后部插入内容

特点，相当于一个行内元素，直接设置高宽是无效的，且必须拥有属性content即元素的内容。

权重（优先级）

（0,0,0,0）继承样式 和 通配符选择器
（0,0,0,1）元素选择器 和 元素伪类选择器
（0,0,1,0）类选择器、伪类选择器、结构伪类选择器、属性选择器
（0,1,0,0）id选择器
（1,0,0,0）行内样式
（无穷大∞，但只能单独添加到一条样式后）!important

• 计算方法：自左向右比较分出大小后立刻终止比较，选择器权重可以累加(复合选择器)但没有进位
  注：样式冲突，选择器不同执行优先级，选择器相同，执行层叠性