【CSS】伪类和伪元素, 伪元素用双冒号还是单冒号? 兼容各浏览器的placeholder样式的写法（MDN最新内容）

css权重

名称	例子	权值
!important	color:red !important	10000
内联样式	style="…"	1000
id选择器	#content	100
类、伪类、属性选择器	.content，:hover，[attribute]	10
元素选择器、伪元素选择器	div, ::after	1
通用选择器，子选择器，相邻同胞选择器	*，> ，+	0

伪类

选择器	作用
:avtive	匹配被用户激活的元素（比如点击）
:checked	匹配被选中的radio或者checkbox
:disabled	匹配处于不可用状态的可交互元素
:empty	匹配没有子元素的元素
:enabled	匹配处于可用状态的可交互元素
:first-child	匹配在兄弟元素中处于第一的元素
:first-of-type	匹配在它的兄弟元素中是某个类型中的第一个的元素
:focus	匹配获取焦点的的元素
:focus-visible	匹配获取焦点且能被用户看到的元素
:hover	匹配用户在此悬停或者触摸的元素
:invalid	匹配处于不合法状态的元素，比如正则校验不通过
:lang	根据文档语言匹配元素
:last-child	匹配在兄弟元素中处于最后的元素
:last-of-type	匹配在它的兄弟元素中是某个类型中的最后一个的元素
:link	匹配没有被访问过的链接
:is()	匹配符合结果的元素
:not()	匹配符合结果之外的元素
:nth-child(n)	匹配父元素的第n个子元素。n可以是一个数字、一个关键字或一个公式
:nth-of-type(n)	匹配父元素的某种类型元素中的第n个子元素。n可以是一个数字、一个关键字或一个公式
:nth-last-child(n)	与nth-child()类似，从后往前数
:nth-last-of-type(n)	与nth-last-of-type-child()类似，从后往前数
:only-child	匹配没有兄弟元素的元素
:only-of-type	匹配一个元素，该元素是其兄弟元素中唯一的一个类型。
:placeholder-shown	匹配显示默认占位符的表单元素
:required	匹配内容为必填的表单元素
:root	匹配根元素
:valid	匹配处于合法状态的元素
:target	匹配符合当前url的锚点元素
:visited	匹配被访问过的元素

first-child样式怎么用？

首先以下代码中第一个p标签没有引用到p:first-child的样式，这和你认为会出现的结果一样吗？

  <h2>This text isn't selected: it's not a `p`.</h2>
  <p>This text is selected!</p><!-- 我没有匹配到呀！ -->
  <div>
    <p>This text is selected!</p>
    <p>This text isn't selected.</p>
  </div>

    div p {
      color: yellowgreen;
    }
    p:first-child {
      color: red;
    }

定义：:first-child 表示在一组兄弟元素中的第一个元素。

定义理解起来可能产生歧义，让我们认为上方代码中出现的第一个p标签会匹配到p:first-child的样式；

因为它是这一层第一个p标签；

但不是这样的！

⭐此样式生效有一个需要重点关注的条件：

加上了伪类:first-child的元素必须处在它所在层级的第一位！

上方代码中的第一个p标签，它所在层级上方还有一个h2标签，它处于第二位，所以在此层次没有能够匹配这一样式的标签；

进入div中，这一层次的第一个标签是p，所以p:first-child的样式生效。

寻找匹配p:first-child样式的标签的过程是这样的：

1. 首先，在每一层级，寻找符合p这一条件的标签（如果是div p:first-child就寻找符合div p的标签）
2. 然后，在寻找到符合条件的标签的层级，找到他的第一个标签，看是否为p标签
3. 是p标签就样式生效，不是则不生效

first-of-type样式怎么用？

如果我们希望上面代码实现后的结果是，第一个p标签能匹配到color: red;样式呢？

只要使用:first-of-type替换:first-child就可以了，结果如下：

first-child和first-of-type的区别

由上面的结果，可以看出，first-child和first-of-type的主要区别就是，匹配到的元素需不需要在层级中处于第一位。

伪元素

选择器	作用
::before (:before)	匹配在原始元素的实际内容之后出现的区域
::after(:after)	匹配在原始元素的实际内容之前出现的区域
::first-letter(:first-letter)	匹配元素的第一个字母
::first-line (:first-line)	匹配元素第一行
::selection	匹配被鼠标或其他选择设备选中的文本或者区域
::placeholder	匹配输入框中的占位文本(需要注意兼容性)
::slotted()	（有效插槽的样式不常用）
::cue (:cue)	（字幕的样式不常用）

兼容各浏览器的修改placeholder样式的写法

	/* Chrome、Safari 、Opera浏览器 */
    input::placeholder {
      color: #fff;
    }
    input::-webkit-input-placeholder {
      color: #fff;
    }

    /* 火狐浏览器 */
    input::-moz-placeholder {
      color: #fff;
    }

    /* IE浏览器 */
    input:-ms-input-placeholder {
      color: #fff;
    }

伪元素用双冒号还是单冒号?

所有支持双冒号的浏览器同样也支持旧的单冒号语法。

⭐考虑浏览器兼容性的话, :pseudo-element 是一个更有效的选择;

⭐考虑书写规范性的话， ::pseudo-element 是一个更好的选择;

单双冒号写法的兼容性表格👇

还需要注意的是：

⭐伪元素必须紧跟在语句中的简单选择器/基础选择器之后，不要加空格间隔，会使样式无效。

// 有效样式写法
selector::pseudo-element {
  property: value;
}
// 无效样式写法
selector ::pseudo-element {
  property: value;
}

文章：
伪类和伪元素

MDN内容:
伪元素
伪类