css选择器总括

一.CSS选择器

元素选择器：

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

选择器分组：

将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。

通配符选择器：显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

声明分组：

一定要在各个声明的最后使用分号，这很重要。

结合选择器和声明的分组：

类选择器：

只有适当地标记文档后，才能使用这些选择器。


或

结合元素选择器：

p.important 解释为：“其 class 属性值为 important 的所有段落”。
CSS 多类选择器：

id选择器：

或

属性选择器：

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

后代选择器：

后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

子元素选择器：

不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

// 延伸

// 综合
结合后代选择器和子选择器：

相邻兄弟选择器：

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

伪类选择器：

-链接伪类选择器：
顾名思义就是用于链接的伪类选择器。
a的伪类标签有🅰️link、a:visited、a:hover、a:active。
a:link表示的是未访问的链接；
a:visited表示已访问的链接 ；
a:hover表示鼠标移动到链接上；
a:active表示的是选定的链接（当我们点击别松开鼠标，显示的状态）。
-结构伪类选择器：
根据文档结构来选择。
li:first-child：第一个li。
li:last-child：最后一个li。
li:nth-child(n):n代表的就是第几个li，n=4的话就是第四个li。
li:nth-child(odd)：排在奇数的li。
li:nth-child(even)：排在怕偶数的li。
li:nth-child(2n/3n/4n)：2n是指第0、2、4、6、8等个li。3n是指第0、3、6、9、12等个li。4n是指第0、4、8、12、16等个li。

• li:nth-child(even/odd/3n/n):从第一个li开始数的。
  *li:nth-last-child(even/odd/3n/n):从最后一个开始数。

伪元素选择器：

首行背景，字体变色


效果类似：



效果类似：

二．CSS高级

对齐

尺寸

分类

导航栏

基础：

图片库

图片透明
定义透明效果的 CSS3 属性是 opacity。
BFC(Box、Formatting Context)


BFC的作用
1.利用BFC避免margin重叠。
2.自适应两栏布局
每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
3.清楚浮动。
当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。
计算BFC的高度时，浮动元素也参与计算。
媒体布局 … 详见代码