CSS中一个冒号和两个冒号有什么区别

Posted 2020-09-01 最骚的就是你

在平时工作中用到伪类选择器的时候一个冒号和两个冒号貌似都是可以的，所以两者到底有什么区别呢，我们先来看下W3C关于CSS3选择器的规范中有一段描述： 

 

　　A pseudo-element is made of two colons (::) followed by the name of the pseudo-element. 

 

　　This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3. 

 

　　简单翻译一下，大意就是，伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-line、:first-letter、:before、:after等。

那么问题来了，什么是伪类？什么是伪元素？

首先，阅读 w3c 对两者的定义：

1. CSS 伪类用于向某些选择器添加特殊的效果。

2. CSS 伪元素用于将特殊的效果添加到某些选择器。

可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

 

伪类可以独立于文档的元素来分配样式，且可以分配给任何元素，逻辑上和功能上类类似，但是其是预定义的、不存在于文档树中且表达方式也不同，所以叫伪类。

 

伪元素所控制的内容和一个元素控制的内容一样，但是伪元素不存在于文档树中，不是真正的元素，所以叫伪元素。

 

伪类有：

1. :first-child ，:link:，vistited，:hover:，active:focus，:lang，:not(s)，：root等...

伪元素有：

1. :first-line，:first-letter，:before，:after，:placeholder,:selection

提醒，如果你的网站只需要兼容webkit、firefox、opera等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容IE浏览器，还是用CSS2的单冒号写法比较安全。如果自己不确定的话可以针对某些需要兼容的属性有两种属性。

 

伪类和伪元素的区别：

 

伪类

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

 

E:link

1. 伪类将应用于未被访问过的链接，与:visited互斥。

E:hover

1. 伪类将应用于有鼠标指针悬停于其上的元素。

E:active

1. 伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。

E:visited

1. 伪类将应用于已经被访问过的链接，与:link互斥。

E:focus

1. 伪类将应用于拥有键盘输入焦点的元素。

E:first-child

1. 伪类将应用于元素在页面中第一次出现的时候。

E:lang

1. 伪类将应用于元素带有指定lang的情况。

 

3. //示例

4. p:lang(zh-cmn-Hans) {

5.   color: #f00;

6. }

7. p:lang(en) {

8.   color: #090;

9. }

 

11. <p lang="zh">中国</p>

12. <p lang="en">english</p>

E:not(s)

1. 匹配不含有s选择符的元素E。

 

3. //示例（给该列表中除最后一项外的所有列表项加一条底边线）

4. .demo li:not(:last-child) {

5.   border-bottom: 1px solid #ddd;

6. }

E:root

1. 匹配E元素在文档的根元素。

 

3. //示例（非IE文本将为black，IE9及以上为purple，IE8为yellow，IE7为blue，IE6为red）

4. .test {

5.   color: black;

6.   color: yellow\0;

7.   *color: blue;

8.   _color: red;

9. }

10. html:root .test {

11.   color: purple\0;

12. }

 

伪元素

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

 

E::first-letter

1. 伪元素的样式将应用于元素文本的第一个字（母）。

E::first-line

1. 伪元素的样式将应用于元素文本的第一行。

E::before

1. 在元素内容的最前面添加新内容。

E::after

1. 在元素内容的最后面添加新内容。

 

3. // 清楚浮动示例

4. .clearfix::before, .clearfix::after {

5.   content:"";

6.   display:table;

7. }

8. .clearfix::after {

9.   clear:both;

10. }

11. .clearfix {

12.   zoom:1; /* For IE 6/7 (trigger hasLayout) */

13. }

E::placeholder

1. 用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。

 

3. // 示例

4. input::-webkit-input-placeholder {

5.   color: #999;

6. }

7. input:-ms-input-placeholder { // IE10+

8.   color: #999;

9. }

10. input:-moz-placeholder { // Firefox4-18

11.   color: #999;

12. }

13. input::-moz-placeholder { // Firefox19+

14.   color: #999;

15. }

E::selection

1. 定义元素被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。

 

3. //示例（将选中字体的颜色设置为#f00，背景颜色设置为#000）

4. p::-moz-selection{background:#000;color:#f00;}

5. p::selection{background:#000;color:#f00;}

一枚不会写文章的程序员~