平凡前端之路_06.CSS与CSS3的选择器

CSS 选择器

CSS使用选择器来选择HTML元素并添加样式。
CSS选择器可以基于其id，类，类型，属性，属性值等选择HTML元素。

---

基础的选择器

选择器	描述	举例
ID 选择器	匹配指定ID属性值的任意类型元素	如 #E{}
类选择器	匹配指定类属性值的任意类型的任意多个元素	如 .E{}
标签选择器	匹配指定类型的元素	如 E{}
通配选择器	匹配文档中所有元素	如 *{}
分组选择器	匹配多个指定元素范围的并集	如 .E,.F{}
交集选择器	匹配每个指定元素范围的交集	如 .E.F{}

复杂的选择器

将基本选择器以几种方式灵活组合起来，就有了多种复杂选择器了

选择器	描述	举例
后代选择器	匹配该元素下所有后代中的指定元素	如 .E .F{}
子选择器	匹配该元素下所有的指定直接子元素	如 .E > .F{}
相邻兄弟选择器	匹配该元素同一个父元素下的第一个该兄弟元素	如 .E + .F{}

属性选择器

选择器	描述
[属性]	匹配 “指定属性” 的 “所有” 元素
[属性=“值”]	匹配 “指定属性等于值” 的 “所有” 元素
[属性~=“值”]	匹配 “指定属性中包含这个值(独立的单词)” 的 “所有” 元素
[属性|=“值”]	匹配 “指定属性中起始为这个值(独立的单词)” 的 “所有” 元素

伪元素选择器

选择器	描述
E::after	用于在一个元素的内容前面插入新内容并设置样式
E::before	用于在一个元素的内容后面插入新内容并设置样式
E::first-letter	用于向文本的首字母设置样式
E::first-line	用于向文本的首行设置样式

动态伪类选择器

选择器	类型	描述
E:link	链接伪类选择器	匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上。
E:visited	链接伪类选择器	匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上。
E:active	用户行为选择器	匹配的E元素，而且匹配元素被激活。常用于链接描点和按钮上。
E:hover	用户行为选择器	匹配的E元素，而且用户鼠标停留在元素E上。
E:focus	用户行为选择器	匹配的E元素，而且匹配元素获取焦点。

结构伪类选择器

选择器	描述
E:first-child	作为父元素的第一个子元素的元素E。

CSS3 选择器

CSS3新增了许多可使用的选择器使得前端开发人员在选择页面元素时更加灵活。属性选择器、结构伪类选择器、UI元素状态伪类选择器、目标伪类选择器、否定选择器、通用兄弟选择器。

---

复杂的选择器

选择器	描述	举例
通用兄弟选择器	匹配该元素同一个父元素下的所有的该兄弟元素	如 .E ~ .F{}

属性选择器

选择器	描述
[属性^=“值”]	匹配 “指定属性以指定值开始” 的 “所有” 元素
[属性*=“值”]	匹配 “指定属性包含值(可以是非独立的单词)” 的 “所有” 元素
[属性$=“值”]	匹配 “指定属性以指定值结束” 的 “所有” 元素
[属性!=“值”]	匹配 “指定属性不等于值” 的 “所有” 元素

伪元素选择器

选择器	描述
E::marker	用于向列表的前置标记设置样式
E::selection	用于文档中被用户选中高亮部分设置样式
E::placeholder	用于向一个表单元素的占位文本设置样式

目标伪类选择器

选择器	描述
E:target	匹配当前活动的目标元素

状态伪类选择器

选择器	类型	描述
E:checked	选中状态伪类选择器	匹配的E元素，而且匹配元素被激活 。常用于复选按钮或者单选按钮表单元素上。
E:enabled	启用状态伪类选择器	匹配的E元素，而且匹配元素可用。 常用于表单元素上。
E:disabled	不可用状态伪类选择器	匹配的E元素，而且匹配元素不可用。 常用于表单元素上。

结构伪类选择器

选择器	描述
E:last-child	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同。
E:root	选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同。
E F:nth-child(n)	选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（an+b）ab为整数,而且n值起始值为1，而不是0。
E F:nth-last-child(n)	选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同。
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（an+b）ab为整数,而且n值起始值为1，而不是0。
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素。此选择器与E:nth-of-type(n)选择器计算顺序刚好相反，但使用方法都是一样的
E:first-of-type	选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同。
E:last-of-type	选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同。
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素。
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素。
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点。

否定伪类选择器

选择器	描述
E:not(F)	匹配的E元素中去掉同时匹配的F元素。

CSS 引入伪类和伪元素的概念是为了描述一些现有CSS无法描述的东西。

根本区别在于：它们是否创造了新的元素（抽象）。

伪类：一开始用来表示一些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪对象：代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

---

CSS 选择器权重

权重决定了css规则怎样被浏览器解析直到生效。

当一个标签同时被多个选择器选中，需要确定这些选择器的权重。

权重关系	选择器
a	内联样式（取0和1）
b	ID 选择器的个数之和
c	类选择器、属性选择器以及伪类选择器的个数之和
d	标签选择器和伪元素选择器的个数之和

按 a-b-c-d 的顺序依次比较大小，大的则权重高，相等则比较下一个。

若 a-b-c-d 优先级相同，则后定义的样式将会被应用。

eg:
	body #main .report h1 {
	    color: red;
	    /*
	    权重为分别是: 0-1-1-2。（有一个id选择器，1个类选择器，2个标签选择器）
	    */
	}

!important 声明的样式优先级最高，继承规则得到的样式的优先级最低。

---

CSS 选择器命名

始终坚持以逻辑和语义来命名，反应目的和用途，避免使用表象和晦涩难懂的名称。采用描述他是干什么而不是像什么的名称。

选择器命名采用(Kebab Cas)短横线分隔命名：字母全小写，短横线分隔。

eg:
	.student-info{}
	.user-info{} 
	.product-info{}

BEM命名

即Block_Element–Modifier，功能块_元素–修饰符，是一种前端命名方法，旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。

Block	Element	Modifier
独立且有意义的功能块, e.g. header, container, menu, checkbox, etc.	Block的一部分且没有独立的元素, e.g. header title, menu item, list item, etc.	Blocks或Elements的一种修饰，可以用它改变其表现形式、行为、状态. e.g. disabled, checked, fixed, etc.

一个Block下的所有Element无论相互层级如何,都要摊开扁平的属于Block，所以 BEM 最多只有 B+E+M 三级。

eg:
	.menu{}
	.menu_item{}
	.menu_item--active{}

OOCSS命名

即Object Oriented CSS，面向对象的CSS，旨在编写高可复用、低耦合和高扩展的CSS代码。

OOCSS是以面向对象的思想去定义样式，应用如模块化、单一功能原则（Single responsibility principle）和关注点分离（Separation of concerns）等，将公共代码抽象和实现分离，从而重用。

分离结构样式与表现样式
将结构类样式与表现类样式分开，这两类样式能够按需组合实现出更多种不同的按钮样式，并且提升后期的拓展空间。

结构类样式	表现类样式
.btn .btn-lg .btn-sm 等	.btn-primary .btn-secondary .btn-success .btn-danger 等

分离容器样式和内容样式
将容器样式和内容样式分开，任何容器可以适应接受任何形式的内容，内容样式不关注容器DOM 元素及其层次关系。内容样式是公共的，不要尝试私有化。

容器类样式	内容类样式
.container .widget .media等	.text-center .text-ellipsis .gradient-horizontal等

CSS 知识题

题目	答案
margin、padding、border都支持百分比	border不支持百分比
font-weight属性值的取值	100～900的整百数，每一个都是具有特定含义的关键字。
font-face属性值设置字体	@font-face引入自定义字体，font- family设置字体
设置文本内容首字母大写	E::first-letter
padding内边距可以是负数	不可以
选择列表1至3个元素	ul li:nth-child(-n+3)
li:nth-child(-n+3) 和 li:nth-child(3-n)都能正常生效	:nth-child 中n的公式是 ab+b， :nth-child(3-n)不能正常生效
控制文字在垂直、水平方向重叠的行高、文字间距属性	line-height、letter-spacing
display:none和visibility:hidden 的区别	display隐藏元素不挤占原空间，visibility隐藏元素但挤占原空间
优化css图片加载技术	CSS Sprite、SVG Sprite、Iconfont、Base64
列表最后一个元素不要边框	ul li:not(:last-child){ /* border style */}