CSS中一个冒号和两个冒号有什么区别
2017-02-24 21:51
260 查看
在平时工作中用到伪类选择器的时候一个冒号和两个冒号貌似都是可以的,所以两者到底有什么区别呢,我们先来看下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 对两者的定义:
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。
可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。
伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。
伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。
伪类有:
:first-child ,:link:,vistited,:hover:,active:focus,:lang,:not(s),:root等...
伪元素有:
:first-line,:first-letter,:before,:after,:placeholder,:selection
提醒,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。如果自己不确定的话可以针对某些需要兼容的属性有两种属性。
伪类和伪元素的区别:
伪类
伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
E:link
伪类将应用于未被访问过的链接,与:visited互斥。
E:hover
伪类将应用于有鼠标指针悬停于其上的元素。
E:active
伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。
E:visited
伪类将应用于已经被访问过的链接,与:link互斥。
E:focus
伪类将应用于拥有键盘输入焦点的元素。
E:first-child
伪类将应用于元素在页面中第一次出现的时候。
E:lang
伪类将应用于元素带有指定lang的情况。
//示例
p:lang(zh-cmn-Hans) {
color: #f00;
}
p:lang(en) {
color: #090;
}
<p lang="zh">中国</p>
<p lang="en">english</p>
E:not(s)
匹配不含有s选择符的元素E。
//示例(给该列表中除最后一项外的所有列表项加一条底边线)
.demo li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
E:root
匹配E元素在文档的根元素。
//示例(非IE文本将为black,IE9及以上为purple,IE8为yellow,IE7为blue,IE6为red)
.test {
color: black;
color: yellow\0;
*color: blue;
_color: red;
}
html:root .test {
color: purple\0;
}
伪元素
与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
E::first-letter
伪元素的样式将应用于元素文本的第一个字(母)。
E::first-line
伪元素的样式将应用于元素文本的第一行。
E::before
在元素内容的最前面添加新内容。
E::after
在元素内容的最后面添加新内容。
// 清楚浮动示例
.clearfix::before, .clearfix::after {
content:"";
display:table;
}
.clearfix::after {
clear:both;
}
.clearfix {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
E::placeholder
用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。
// 示例
input::-webkit-input-placeholder {
color: #999;
}
input:-ms-input-placeholder { // IE10+
color: #999;
}
input:-moz-placeholder { // Firefox4-18
color: #999;
}
input::-moz-placeholder { // Firefox19+
color: #999;
}
E::selection
定义元素被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性)。
//示例(将选中字体的颜色设置为#f00,背景颜色设置为#000)
p::-moz-selection{background:#000;color:#f00;}
p::selection{background:#000;color:#f00;}
一枚不会写文章的程序员~
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 对两者的定义:
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。
可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。
伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。
伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。
伪类有:
:first-child ,:link:,vistited,:hover:,active:focus,:lang,:not(s),:root等...
伪元素有:
:first-line,:first-letter,:before,:after,:placeholder,:selection
提醒,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。如果自己不确定的话可以针对某些需要兼容的属性有两种属性。
伪类和伪元素的区别:
伪类
伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
E:link
伪类将应用于未被访问过的链接,与:visited互斥。
E:hover
伪类将应用于有鼠标指针悬停于其上的元素。
E:active
伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。
E:visited
伪类将应用于已经被访问过的链接,与:link互斥。
E:focus
伪类将应用于拥有键盘输入焦点的元素。
E:first-child
伪类将应用于元素在页面中第一次出现的时候。
E:lang
伪类将应用于元素带有指定lang的情况。
//示例
p:lang(zh-cmn-Hans) {
color: #f00;
}
p:lang(en) {
color: #090;
}
<p lang="zh">中国</p>
<p lang="en">english</p>
E:not(s)
匹配不含有s选择符的元素E。
//示例(给该列表中除最后一项外的所有列表项加一条底边线)
.demo li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
E:root
匹配E元素在文档的根元素。
//示例(非IE文本将为black,IE9及以上为purple,IE8为yellow,IE7为blue,IE6为red)
.test {
color: black;
color: yellow\0;
*color: blue;
_color: red;
}
html:root .test {
color: purple\0;
}
伪元素
与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
E::first-letter
伪元素的样式将应用于元素文本的第一个字(母)。
E::first-line
伪元素的样式将应用于元素文本的第一行。
E::before
在元素内容的最前面添加新内容。
E::after
在元素内容的最后面添加新内容。
// 清楚浮动示例
.clearfix::before, .clearfix::after {
content:"";
display:table;
}
.clearfix::after {
clear:both;
}
.clearfix {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
E::placeholder
用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。
// 示例
input::-webkit-input-placeholder {
color: #999;
}
input:-ms-input-placeholder { // IE10+
color: #999;
}
input:-moz-placeholder { // Firefox4-18
color: #999;
}
input::-moz-placeholder { // Firefox19+
color: #999;
}
E::selection
定义元素被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性)。
//示例(将选中字体的颜色设置为#f00,背景颜色设置为#000)
p::-moz-selection{background:#000;color:#f00;}
p::selection{background:#000;color:#f00;}
一枚不会写文章的程序员~
相关文章推荐
- CSS中一个冒号和两个冒号有什么区别
- CSS中一个冒号和两个冒号有什么区别
- CSS样式中伪类和伪类元素的区别(css中一个冒号和两个冒号的区别)
- CSS中一个冒号和两个冒号之间区别
- dotNetFx40_Client_x86_x64和dotNetFx40_Full_x86_x64这两个有什么区别?两个都要安装还是安装其中一个?
- css 中两个class之间没有空格与有空格有什么区别
- 关于伪类选择器中一个冒号和两个冒号的区别
- CSS中,两个class类之间有空格和没空格的区别是什么?
- 一个星号的指针和两个星号的有什么区别
- C#语法中一个问号(?)与两个问号(??)有什么区别
- 一个冒号和两个冒号的区别
- css 中两个class之间没有空格与有空格有什么区别
- 关于伪类选择器中一个冒号和两个冒号的区别
- c语言中定义结构体指针并指向一片内存空间和直接定义一个结构体变量的区别 Node *p=(Node *)malloc(sizeof(Node)); 和 Node p 两个有什么区别??? Node是一
- C#中进行字符串类型声明时,一个小写 "string ", 一个大写 "String ", 这两个类有什么区别呢?
- WINAPI和CALLBACK这两个宏有什么区别呢?
- 浏览器对加载js文件和css文件有什么不同?一个面试题目
- css用import还是link好?区别是什么
- 什么是一个表的外键 他和主键有什么区别吗
- ##(两个井号)和#(一个井号)都是什么意思