css面经总结

kevinIcoding
170 阅读21分钟

CSS文本溢出省略号

单行溢出

/*单行溢出*/
div{
   white-space: nowrap; /* 强制文本不换行 */
   overflow: hidden; /* 隐藏溢出内容 */
   text-overflow: ellipsis; /* 对溢出的文本用 ellipsis 省略号代替。 */
}

多行溢出

/*多行溢出*/
div{
    display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
    -webkit-box-orient: vertical /* 使文本垂直（纵向）排列每一行，也就是文字是从左到右，从上到下 */
    /* 限制文本的行数 or 列数，取决于-webkit-box-orient的属性值 */
    -webkit-line-clamp: 2; 
    
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 对溢出的文本用 ellipsis 省略号代替。 */
}

怎么让 Chrome 支持小于 12px 的文字？

  • 使用Webkit的内核的私有CSS属性来解决-webkit-text-size-adjust:none，设置后字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。
  • css3 的 transform 属性，设置值为 scale(x, y) 定义 2D 缩放转换。

清除浮动

不清除浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷），所以清除浮动是为了不让父元素发生高度塌陷。

clear清除浮动

（添加空div法）在浮动元素下方添加空div,并给该元素写css样式：

{
    clear:both;   //清除两边的浮动
    height:0;  //高度设置为0 
    overflow:hidden; //溢出隐藏
}
给浮动元素父级设置高度

（这个很好理解，清除浮动本质是为了让父元素有高度） 但是呢，父元素的高度往往不固定，由子元素撑开的

父级同时浮动

（需要给父级同级元素添加浮动）

设置父级的overflow属性不为 visible 的其他值（scroll、hidden、auto）
万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
.float_div::after{
  content:" ";
  clear:both;
  display:block;
  height:0;
  overflow:hidden;
  visibility:hidden;
}

主流浏览器内核私有属性css前缀是什么？

  • mozilla 内核 （firefox,flock 等） -moz
  • webkit 内核 （safari,chrome 等） -webkit
  • opera 内核 （opera 浏览器） -o
  • trident 内核 （ie 浏览器） -ms

CSS引入的方式有哪些？使用Link和@import有什么区别？

  1. link 属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式；而@import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；
  2. 页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；
  3. import是CSS2.1 提出的，CSS2.1以下浏览器不支持，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题。

浏览器的渲染原理？

  • 首先解析收到的文档，根据文档定义构建一棵 DOM 树，DOM 树是由 DOM 元素及属性节点组成的

  • 然后对 CSS 进行解析，生成 CSSOM 规则树。

  • 根据 DOM 树和 CSSOM 规则树构建渲染树。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 元素相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。还有一些 DOM元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。

  • 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也可以叫做回流）。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被称为“自动重排”。

  • 布局阶段结束后是绘制阶段，遍历渲染树并调用渲染对象的 paint 方法将它们的内容显示在屏幕上，绘制使用 UI 基础组件。

什么是BFC

讲讲BFC

什么是BFC

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

形成 BFC 的条件:

  • 浮动元素，float 除 none 以外的值
  • 绝对定位元素，position（absolute，fixed）
  • display 为以下其中之一的值 inline-block，table-cell，table-caption
  • overflow 除了 visible 以外的值（hidden，auto，scroll）
  • HTML 就是一个 BFC

BFC 的特性：

  • 内部的 Box 会在垂直方向上一个接一个的放置。
  • 垂直方向上的距离由 margin 决定
  • bfc 的区域不会与 float 的元素区域重叠。
  • 计算 bfc 的高度时，浮动元素也参与计算（清除浮动）
  • bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

BFC 即 Block Formatting Contexts (块级格式化上下文)，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。就像js的函数作用域一样，BFC是页面上的作用域。

CSS的属性值 auto?

#width

  • 对于width来说，当子元素设置为 width: auto时，子元素的 margin-left + margin-right + border-left + border-right + padding-left + padding-right + content-width 对等于父元素的content-width

  • 当子元素设置为 width:100%时，将根据子元素的盒模型来调整：

    • 子元素为padding-box时，子元素的content-width等于父元素的content-width
    • 子元素为border-box时，子元素的border-left + border-right + padding-left + padding-right + content-width等于父元素的content-width

#height

  • 对于height来说，当子元素设置为height:auto时，其高度由其内容撑开，与父元素无关。
  • 当子元素设置为height:100%，其表现与设置为width:100%一致。

#margin

子元素为非绝对定位元素时：

  • margin的auto值只对 margin-left和margin-right有效，对margin-top和margin-bottom无效，相当于没有设置。
  • 当只设置 margin-left: auto时，子元素的右侧贴近父元素content的右侧
  • 当只设置margin-right: auto时，子元素的左侧贴近父元素content的左侧
  • 当同时设置margin-left: auto、margin-right: auto时，子元素相当于父元素的content居中

子元素为绝对定位元素时（absolute、fixed）,为absolute时父元素指代最近的不为static的上级元素、为fixed时父元素指代body

  • 当设置 margin-left:auto时，只有同时设置left: 0时才能生效；margin-right、margin-top、margin-bottom也类似，因此进行如下设置时，子元素相对于父元素（padding + content的区域）水平垂直居中。

    .child{
    left: 0;
    right: 0;
    top: 0;
    right: 0;
    margin: auto;
}

注意：当子元素不是绝对定位时，margin: auto 相对于父元素 content进行定位，当子元素为绝对定位元素时，margin: auto 相对于父元素 padding + content 进行定位。

#flex

flex:auto等价于flex: 1 1 auto，也就是fkex-grow: 1; flex-shrink: 1; flex-basis: auto;

#overflow

当元素设置overflow:auto时，当元素内容超出元素的高度和宽度时会显示滚动条。

overflow:auto与overflow:scroll的区别是：

  • overflow:scroll无论元素内容是否超出元素的高度和宽度时都会显示纵向滚动条和横向滚动条
  • overflow:auto只在元素内容超出元素的高度时显示纵向滚动条，元素内容超出元素宽度时显示横向滚动条。

#left、right、top、bottom

当元素为非绝对定位元素时 left、right、top、bottom这些定位的auto值都无效，但当元素为绝对定位（absolute、fixed）时，这些属性则有各种的表现形式：

  • left:auto：left属性的值相当于父元素的padding-left值，也就是元素的左侧会贴在父元素content的左侧
  • top:auto：top属性的值相当于父元素的padding-top值，也就是元素的上侧会贴在父元素content的上侧
  • right:auto：right属性的值为元素padding-box的右侧到父元素的padding-box右侧的距离
  • bottom:auto：bottom属性的值为元素padding-box的下侧到父元素的padding-box下侧的距离

left、right、top、bottom的优先级：

  • 当同时设置了left和right时，left优先设置，有一种情况例外：当left:auto且right属性为具体数值（如right:10px），以right为优先、同理，top和bottom也是一样。

注意：当父元素设置 direction: rtl时，上述的left和right的表现形式和优先级逆转。

设置元素浮动后，该元素的 display 值是什么？

自动变成 display:block

使用 clear 属性清除浮动的原理？

使用clear属性清除浮动，其语法如下：

clear: none|left|right|both

如果单看字面意思，clear:left 是“清除左浮动”，clear:right 是“清除右浮动”，实际上，这种解释是有问题的，因为浮动一直还在，并没有清除。

官方对clear属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置clear属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。

还需要注意 clear 属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3个字，也就是clear属性对“后面的”浮动元素是不闻不问的。考虑到float属性要么是left，要么是right，不可能同时存在，同时由于clear属性对“后面的”浮动元素不闻不问，因此，当clear:left有效的时候，clear:right必定无效，也就是此时clear:left等同于设置clear:both；同样地，clear:right如果有效也是等同于设置clear:both。由此可见，clear:left和clear:right这两个声明就没有任何使用的价值，至少在CSS世界中是如此，直接使用clear:both吧。

行内元素和块级元素的具体区别是什么?

块级元素( block )特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示（浮动元素除外）；

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；

img

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的）。

img

行内块元素（inline-block）（拥有内在尺寸，可设置高宽，但不会自动换行）

如：img、input

元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

rgba() 和 opacity 的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

px、em、rem的区别及使用场景

三者的区别：

  • px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
  • em和rem相对于px更具有灵活性，他们是相对长度单位，其长度不是固定的，更适用于响应式布局。
  • em的值相对于其父元素字体的大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素字体的大小。而rem是相对于根元素字体，这样就意味着，只需要在根元素确定一个参考值。

使用场景：

  • 对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 。
  • 对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。

position 的不同值分别是相对于什么定位的？

  • absolute : 生成绝对定位的元素， 相对于最近一级的定位不是 static 的父元素来进行定位。
  • fixed （老 IE 不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
  • relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
  • static 默认值。没有定位，元素出现在正常的流中
  • sticky 生成粘性定位的元素，元素始终被限制在最近块级父元素的区域中，当未超出父元素区域时，显示效果相当于fixed。

如何解决不同浏览器的样式兼容性问题？

  • 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。

  • 使用已经处理好此类问题的库，比如 Bootstrap。

  • 使用 autoprefixer 自动生成 CSS 属性前缀。

  • 使用 Reset CSS 或 Normalize. css。

flex布局

  • flex-flow: flex-direction 和 flex-wrap 的简写。

    • flex-direction：指定了flex容器的主轴方向

      row(默认) | column | row-reverse | column-reverse

      row、row-reverse：主轴为x轴，子元素横向排列
column、column-reverse：主轴为y轴，子元素纵向排列

    • flex-wrap：指定容器空间不够时的换行策略。

      nowrap（默认） | wrap | wrap-reverse

  • flex：flex-grow、flex-shrink和flex-basis的简写。

    • flex-grow：定义子元素在主轴上的放大比例，默认为0，即如果存在剩余空间，也不放大。

      某个子元素的分得的额外空间 = (容器剩余空间 / 所有子元素flex-grow属性值的和) * 该子元素flex-grow的属性值

    • flex-shrink：定义了子元素的缩小比例，默认为1，即如果空间不足，该子元素将缩小。

      设: 有 n 个子元素，空间分别为 W1、W2、W3 ··· Wn，flex-shrink的值分别为 S1、S2、S3 ··· S4，容器空间为 T

则:
某个子元素k的缩小的空间 = (sum(W1 ~ Wn) - T) * (Wk * Sk / sum(W1 * S1 ~ Wn * Sn))

    • flex-basis：定义了在分配多余空间之前，子元素占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto。当设定为长度值时分以下情况：

      当flex-direction为 row 或 row-reverse时，等同于 width
当flex-direction为 column 或 column-reverse时，等同于 height

  • justify-content、justify-self：定义了如何分配父容器主轴方向的子元素之间及其周围的空间。

    img

  • align-items、align-self：定义子元素在交叉轴上如何对齐。

    img

  • align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

    img

什么情况下，用 translate() 而不用绝对定位？什么时候下相反？

translate() 是 transform 的一个值。改变 transform 或 opacity 不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。而改变绝对定位会触发重新布局，进而触发重绘和复合。

当使用 translate() 时，元素仍然占据其原始空间（有点像 position：relative ），这与改变绝对定位不同。

请阐述 z-index 属性，并说明如何形成层叠上下文（stacking context)

CSS 中的 z-index 属性控制重叠元素的垂直叠加顺序。 z-index 只能影响 position 值不是 static 的元素。

没有定义 z-index 的值时，元素按照它们出现在 DOM 中的顺序堆叠（层级越低，出现位置越靠上）。非静态定位的元素（及其子元素）将始终覆盖静态定位（static）的元素，而不管 HTML 层次结构如何。

层叠上下文是包含一组图层的元素。 在一组层叠上下文中，其子元素的 z-index 值是相对于该父元素而不是 document root 设置的。每个层叠上下文完全独立于它的兄弟元素。如果元素 B 位于元素 A 之上，则即使元素 A 的子元素 C 具有比元素 B 更高的 z-index 值，元素 C 也永远不会在元素 B 之上。

每个层叠上下文是自包含的：当元素的内容发生层叠后，整个该元素将会在父层叠上下文中按顺序进行层叠。少数 CSS 属性会触发一个新的层叠上下文，例如 opacity 小于 1， filter 不是 none ， transform 不是 none 。

CSS3中有哪些新特性

  • 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
  • 圆角 （border-radius:8px）
  • 多列布局 （multi-column layout）
  • 阴影和反射 （Shadow、reflect）
  • 文字特效 （text-shadow）
  • 文字渲染 （Text-decoration）
  • 线性渐变 （gradient）
  • 旋转 （transform）
  • 增加了旋转,缩放,定位,倾斜,动画,多背景

替换元素的概念及计算规则

通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。

如img、input、textarea、select等元素，img 元素修改 src属性可以替换显示内容，同样，input元素修改 type 属性也可以改变显示内容。

替换元素除了内容可替换这一特性以外，还有以下特性：

  • 内容的外观不受页面上的CSS的影响：用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观需要类似appearance属性，或者浏览器自身暴露的一些样式接口。
  • 有自己的尺寸：在Web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是300像素×150像素，如
  • 在很多CSS属性上有自己的一套表现规则：比较具有代表性的就是vertical-align属性，对于替换元素和非替换元素，vertical-align属性值的解释是不一样的。比方说vertical-align的默认值的baseline，很简单的属性值，基线之意，被定义为字符x的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。
  • 所有的替换元素都是内联水平元素：也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是，替换元素默认的display值却是不一样的，有的是inline，有的是inline-block。

替换元素的尺寸从内而外分为三类：

  • 固有尺寸：  指的是替换内容原本的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着自己的宽度和高度的。
  • HTML尺寸：  只能通过HTML原生属性改变，这些HTML原生属性包括的width和height属性、的size属性。
  • CSS尺寸：  特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的尺寸，对应盒尺寸中的content box。

这三层结构的计算规则具体如下：

（1）如果没有CSS尺寸和HTML尺寸，则使用固有尺寸作为最终的宽高。

（2）如果没有CSS尺寸，则使用HTML尺寸作为最终的宽高。

（3）如果有CSS尺寸，则最终尺寸由CSS属性决定。

（4）如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。

（5）如果上面的条件都不符合，则最终宽度表现为300像素，高度为150像素。

（6）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。

如何判断元素是否到达可视区域

以图片显示为例：

  • window.innerHeight 是浏览器可视区的高度；
  • window.pageYOffset是浏览器滚动的过的距离；
  • imgs.offsetTop 是元素顶部距离文档顶部的高度
  • 内容达到显示区域的条件：img.offsetTop < window.innerHeight + window.pageYOffset

line-height 的理解及其赋值方式

（1）line-height的概念：

  • line-height 指一行文本（包括文字、行内元素、行内块元素）的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
  • 如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；
  • 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
  • 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
  • line-height 和 height 都能撑开一个高度；

（2）line-height 的赋值方式：

  • 带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
  • 纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
  • 百分比：将计算后的值传递给后代

display:inline-block 什么时候会显示间隙？

原因：换行或空格会占据一定的位置

解决：

水平间隙时：父元素设置letter-spacing: -4px或word-spacing:-4px

垂直间隙时：子元素间设置 负值margin，如：margin: -2px 0 

上述两种情况通用：父元素设置 font-size:0

display、float、position的关系

（1）首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。

（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值。

（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对于浮动后的最终位置定位。

（4）如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是，则保持指定的display属性值不变。

总的来说，可以把它看作是一个类似优先级的机制：

display:none >>position: absolute | fixed >> float: !none >> element === root >> display: other value

CSS选择器的权重和优先级

权重

  • 从0开始，一个行内样式+1000，一个id选择器+100，一个属性选择器、class或者伪类+10，一个元素选择器，或者伪元素+1，通配符+0

优先级

  • 权重相同，写在后面的覆盖前面的
  • 使用 !important 达到最大优先级，都使用 !important 时，权重大的优先级高
  • !Important>内联样式(写在标签中的样式)>id>类=伪类选择器=属性选择器>伪元素=类型选择器(元素选择器)

浏览器是怎样解析CSS选择器的？

CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。因为如果从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

CSS选择器有哪些？

直接选择器

#通配符选择器
*{
    margin:0;
    padding:0;
}
标签选择器
p{}
[#]类选择器
.warning{}
ID选择器
#warning{}
[#]属性选取器

[attribute]

/* 选择所有具有 foo 属性的元素 */
[foo]{}

[attribute=value]

/* 选择 foo 属性值为 abc 的元素*/
[foo=abc]{}

[attribute~=value]、[attribute=value] *

/**
	e1: foo = "abc def"
	e2: foo = "abcdef"
*/

/* 选择 foo 属性值中带有 abc 这个单词的元素，可以选中 e1 */
[foo~=abc]{}

/* 选择 foo 属性值中带有 abc 的元素，可以选中 e1, e2*/
[foo*=abc]{}

[attribute^=value]、[attribute|=value]、[attribute$=value]

/* 选择 foo 属性值以 abc 开头的元素*/
[foo^=abc]{}

/* 选择 foo 属性值以 abc 开头的元素，且与后面部分只能用连字符连接
如：foo = "abc"、foo = "abc-def"、foo = "abc-def-ghi"
*/
[foo|=abc]{}

/* 选择 foo 属性值以 abc 结尾的元素*/
[foo$=abc]{}

文档结构选择器

后代选择器
/* 选择 ul 元素内的所有 li 元素 */
ul li{}
子选择器
/* 选择 父元素为 li、爷元素为 ul 的 p 元素 */ 
ul>li>p{}
相邻兄弟选择器
/* 选择紧邻在 h1 元素后的 p 元素，注意只选择一个 */
h1+p{}
一般兄弟选择器
/* 选择前面有 h1 元素后的 p 元素，注意可选择多个 */ 
h1~p{}
伪类选择器
:root 根元素伪类
/* 一般情况下相当于 html 元素 */
:root{
    background-color:red;
}
子元素相关伪类

:nth-child(n)、:nth-last-child(n) 、:first-child、:last-child

/* 选中div元素的第一个子节点 */
div :nth-child(1){
    color:red;
}

/* 选中div元素的最后一个子节点 */
div :nth-last-child(1){
    color:red;
}

/* 选中div元素的第一个子节点 */
div :first-child{
    color:red;
}

/* 选中div元素的最后一个子节点 */
div :last-child{
    color:red;
}

:nth-of-type(n) 、:nth-last-of-type(n)、:first-of-type、:last-of-type

/* 选中div元素的第二个子节点，且该子节点的类型为 p */
div p:nth-of-type(2){
    color: red;
}

/* 选中div元素的倒数第二个子节点，且该子节点的类型为 p */
div p:nth-last-of-type(2){
    color: red;
}

/* 选中div元素的第一个 p 子节点 */
div p:first-of-type{
    color: red;
}

/* 选中div元素的最后一个 p 子节点 */
div p:last-of-type{
    color: red;
}

:only-child

/* 选中div元素的唯一一个子元素 */
div :only-child{}

:empty

/* 选中没有子元素的div元素 */
div :empty{}

:only-of-type

/* 选中div的唯一一个 p 子元素*/
div p:only-of-type{}
元素状态相关选择器

:link、:active、:hover、:visited、:focus、:enable、:disabled、:checked、:not()

/* 选择地址未被访问过的 a 标签，通过 a 标签的 href 属性和浏览器历史记录的匹配结果实现，而且是响应式的 */
a:link{}

/* 选择正在处于激活状态的 a 标签 */
a:active{}

/* 选择处于鼠标指针位置上的 a 标签 */
a:hover{}

/* 选择地址已被访问过的 a 标签，与 :link 刚好互斥 */
a:visited{}

/* 选择获得焦点的 input 元素 */
input:focus{}

/* 选择处于启用状态的 input 元素，即未使用 disabled 属性的 input 元素 */
input:enabled{}

/* 选择处于禁用状态的 input 元素，即使用了 disabled 属性的 input 元素 */
input:disabled{}

/* 选择每一个选中的 input[type="radio"]、input[type="checkbox"]和 option */
*:checked{}

/* 反向选择 */
:not(selector)

伪元素选择器

注意，伪类选择器是一个冒号、伪元素选择器是两个冒号

::first-line、::first-letter、::selection

/* 选中所有 p 元素的第一行文字 */
p::first-line{}

/* 选中所有 p 元素的第一个字母 */
p::first-letter{}

/* 选中所有 p 元素的被选择的文字 */
p::selection{}

::before、::after

/* 在 p 元素前插入元素 */
p::before{
    content: 'hello'
}

/* 在 p 元素后插入元素 */
p::after{
    content: '。'
}
avatar
文章
阅读
粉丝