继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

伪类&伪元素

慕的地10843
关注TA
已关注
手记 1081
粉丝 201
获赞 962

pseudo

what can a pseudo-class do?

伪类(pseudo-class)& 伪元素(pseudo-element)

伪类和伪元素在web开发中用的好的话,可以说犹如神助。

但一定要分清楚,什么是伪类,什么是伪元素。

如何区分伪元素与伪类?

答:伪元素在html文档渲染后,页面中有相应的内容显示,同时能够设置它的样式,而伪类只能设置样式

伪元素和元素的区别?

答:很明显,从字面意思上来说,伪元素就不是真正的元素,而只有形而没有神,在DOM结构中根本没有它,也就是说你不能用js来操作它。(伪类可以,因为伪类是css选择器)

常见伪元素如下:

::before, ::after, ::placeholder

常用

元素状态

<details>
<summary> 目录</summary>

</details>

文章排版

<details>
<summary> 目录 </summary>

</details>

表单样式

<details>
<summary> 目录 </summary>

</details>

child系列

<details>
<summary> 目录 </summary>

</details>

type系列

<details>
<summary> 目录 </summary>

</details>

其他

<details>

<summary> 目录 </summary>

</details>

demo

[常见 demo](https://github.com/lvzhenbang/pseudo/blob/master/demo.md)

未完待续...

目录列表

after-before

*::after/*::before

描述:这一对伪元素,它们允许使用者通过css向html页面中添加内容。

浏览器支持:ie8+/chrome2+/safari1.3+/opera 6+/Android/ios

用途:在清除浮动中,用作一个占位元素;字体图标(iconfont

注意:ie8只支持这种形式 :after/:before

是否常用:是

link-visited-hover-active

  • *:link(直接设置连接的样式),

  • *:visited(区别与其他未访问过的样式),

  • *:hover(鼠标移动上去后的样式),

  • *:active(鼠标单击触发时的样式)

描述:这是一组伪类,除了:link 只能作用于a[href]外,其它的适用于任何元素。

浏览器支持:chrome, sarari 2.0.4+, firefox, opera, ie 4+; android/ios(未定义)

注意:常用的为hover 和 active

是否常用:是

</br> 返回目录

focus

*:focus

描述:当元素获得焦点时,该伪类样式起效果。

用途:当按键盘的tab键时,页面出现变化的样式,不同的浏览器默认的focus样式不一样;默认的input, textarea, button, 以及设置了contentediable的元素focus工作,如果给其他的元素设置tabindex属性,它们的focus也将工作。

浏览器支持:chrome 2+, safari 1.3+, firefox, opera 9.2, ie 8+, android, ios

参考资料:

CSS-TRICKS :focus
More about contenteditable
More about TabIndex

是否常用:是

</br> 返回目录

focus-within

*:focus-within

描述:匹配哪些它们自身没有 :focus 或者它们的子孙元素没有 :focus 的元素。

浏览器支持:chrome 60+, firefox 52+, edg/ie(不支持), safari 10.1+, opera 47+, ios 10.3+, android(不支持)

checked

*:checked

用途:当元素处于选中状态的时候这个伪类起作用。常见的元素是input(type为radio或checkbox)。这种可以表示开关的状态的伪类可以减少对js的使用。

浏览器支持:chrome, safari, firefox, opera 9+, ie 9+,android, ios

注意:虽然其他浏览器的支持不错,但是ie支持9以上的版本。

是否常用:是

</br> 返回目录

enabled-disabled

*:enabled/*:disabled

描述:该对伪类给元素提供了一个条件,用来设置元素的样式。

用途:该伪类对应元素(input/ button/ textarea/ optgroup / option /fieldset /seelect)内的属性 disabled ,这些元素时html用于与用户进行交互的。

浏览器支持:chrome, safari 3.1+, firefox, opera 9+, android, ios

参考资料:

Pseudo-classes – The Basics

MDN

是否常用:是

</br> 返回目录

not

*:not()

描述:它是一个取反的伪类,ie7/8只支持[element~element], [attr*=] 这种方式。

浏览器支持:chrome, safari 3.2+, firefox 3.5+, opera, ie 9+, ios, android

是否常用:是

</br> 返回目录

empty

*:empty

描述:改为元素匹配不含任何内容的元素,或者只含有注释的元素。

浏览器支持:chrome 4+, safari 3.2+, firefox 3.5, opera 9+, ie 9+, android, ios 3.2

</br> 返回目录

matches

*:matches

描述:这是个实验特性,跟以前的 :any() 类似,它的参数是一个选择器列表

浏览器支持:支持很差,ie根本不支持,andriod 和 ios 也只支持部分特性。

</br> 返回目录

nth-child

*:nth-child(an+b) // a,b是整数值,+/-为运算符

描述:根据传入的一个运算公式,选择第几个元素,或者说每个几个元素选择一个。:nth-child 是从第一个开始。

用途:给子元素按照不同的分类设置样式,bootstrap/v2.2.0 table tbody 中的斑马线效果

浏览器支持:chrome, safari 3.2+, firefox, opera, ie 9+, android, ios

是否常用:是

</br> 返回目录

nth-last-child

*:nth-last-child(an+b) // a,b是整数值,+/-为运算符

描述:根据传入的一个运算公式,选择第几个元素,或者说每个几个元素选择一个。:nth-last-child 是从最后一个开始。

用途:给子元素按照不同的分类设置样式,bootstrap/v2.2.0 table tbody 中的斑马线效果

浏览器支持:chrome, safari 3.2+, firefox, opera, ie 9+, android, ios

是否常用:是

</br> 返回目录

first-child

*:first-child

描述:匹配该伪类所指代的元素的父元素下的第一个子元素

用途:bootstrap中table 的{斑马线](https://github.com/twbs/bootstrap/blob/v2.2.0/less/tables.less#L39)

浏览器支持:chrome, safari 3.2+, firefox, opera 9.5+, ie 7, android, ios

是否常用:是

</br> 返回目录

last-child

*:last-child

描述:匹配该伪类所指代的元素的父元素下的最后一个子元素

用途:bootstrap中table 的{斑马线](https://github.com/twbs/bootstrap/blob/v2.2.0/less/tables.less#L39)

浏览器支持:chrome, safari 3.2+, firefox, opera 9.5+, ie 7, android, ios

是否常用:是

</br> 返回目录

nth-only-child

*:nth-only-child

描述:匹配该伪类所指代元素的父元素下只有它这么一个元素,该伪类设置的样式起作用。

用途:它可以用来和 :nth-child() 一起使用,处理只有一个元素的情况。

浏览器支持:chrome, safari, firefox, opera, ie, android, ios

示例:

demo

</br> 返回目录

first-of-type

*:first-of-type

描述:它们与 :first-child 的效果类似,但不同的是它们匹配的元素类型可以不一致,但是后者必须一致。

</br> 返回目录

last-of-type

*:last-of-type

描述:它们与 :last-child 的效果类似,但不同的是它们匹配的元素类型可以不一致,但是后者必须一致。

</br> 返回目录

nth-of-type

*:nth-of-type(an+b)  // a,b是整数值,+/-为运算符

描述:根据传入的一个运算公式,选择某类元素的第n个,或者每隔n个选择一个。:nth-of-type 是从第一个开始。

用途:给子元素按照不同的分类设置样式,bootstrap/v2.2.0 table tbody 中的斑马线效果, 也包括之后的版本

浏览器支持:chrome, safari 3.2+, firefox, opera 9.5+, ie 9+, android, ios

是否常用:是

</br> 返回目录

nth-last-of-type

*:nth-last-of-type  // a,b是整数值,+/-为运算符

描述:根据传入的一个运算公式,选择某类元素的第n个,或者每隔n个选择一个。:nth-last-of-type 是从最后一个开始。

用途:给子元素按照不同的分类设置样式,bootstrap/v2.2.0 table tbody 中的斑马线效果, 也包括之后的版本

浏览器支持:chrome, safari 3.2+, firefox, opera 9.5+, ie 9+, android, ios

是否常用:是

</br> 返回目录

only-child

*:only-child

描述:该伪类所指代元素的父元素下只有它这么一个元素,该伪类设置的样式起作用。

用途:它可以用来和 :nth-child() 一起使用,处理只有一个元素的情况。

浏览器支持:chrome, safari, firefox, opera, ie, android, ios

示例:

demo

</br> 返回目录

only-of-type

*:only-of-type

描述:该伪类所指代元素的父元素下只有它这么一个元素,该伪类设置的样式起作用。

用途:它可以用来和 :nth-of-type() 一起使用,处理只有一个元素的情况。

浏览器支持:chrome, safari, firefox, opera, ie, android, ios

</br> 返回目录

first-line

*::first-line

描述:该伪类所指代元素的第一行文本。具体支持哪些样式,可参考w3c 官方文档

用途:文章排版。

浏览器支持:chrome, safari, firefox, opera, ie, android, ios

注意:该伪类指代的元素必须是块级元素

参考资料:

::first-line

示例:

demo

</br> 返回目录

first=letter

*::first-letter

描述:该伪类所指代元素的第一个字符的样式。具体支持哪些样式,可参考w3c 官方文档

用途:文章排版

浏览器支持:chrome 1+, safari 1+, firefox 1+, opera 3.5+, ie 5.5+, android, ios

注意:该伪类指代的元素必须是块级元素

参考资料:

::first-letter

示例:

demo

</br> 返回目录

target

*:target

描述:该伪类匹配与地址导航栏中当前url中的hash值与html源代码中的id选择器值一致的元素。若匹配成功,则该样式起作用;反之,则不起作用。

注意:该伪类所指定的元素的子元素,无法设置动画效果,只能对目标元素自身设置动画效果。

浏览器支持:chrome, safari 1.3+, firefox 1.3+, opera 9.5+, ie 9+, android 2.1+, ios 2+

参考资料:

A simple image gallery using only CSS and the :target selector

示例:

demo

css-tricks demo

[http://jsfiddle.net/codepo8/wsD9L/1/]

</br> 返回目录

lang

*:lang(code)

描述:该伪类匹配的元素是依据html文档中的lang属性值和该伪类内传入的参数是否一致来决定的。

浏览器支持:兼容所有浏览器。

</br> 返回目录

root

:root

描述:该伪类就表示html文档中的根元素,它也可以用于其他标记性语言中,如:svg, xml。

注意:如果该伪类选择器和html元素选择器同时出现在页面中,伪类选择器的(权重大)优先级高。

浏览器支持:chrome, safari, firefox, opera 9.5+, ie 9+, android, ios

</br> 返回目录

dir

*:dir()

描述:它可以控制document文档中的文本流向(ltr/rtl),实现效果和text-align (left/center/right/justify)

浏览器支持:最新版的edg/firfox/chrome/safari

valid-invalid

*:valid/*:invalid

描述:匹配用户的输入是否合法,如果合法显示 :valid 的样式, 否则,显示 :invalid 的样式。

浏览器支持:chrome 10+, safari 5+, firefox 4+, opera, ie 10+, android 4.4.4, ios 10.3+

是否常用:不常用

</br> 返回目录

required

*:required

描述:该伪类指代元素中含有required属性的元素,常见的就是form表单中的元素。

用途:不把服务器当作验证用户输入的唯一途径,实现浏览器的自检测。

浏览器支持:chrome 10+, safari 5+, firefox 4+, opera, ie 10+, android 4.4.4, ios 10.3+

</br> 返回目录

optional

*:optional

描述:该伪类针对form表单元素, 如:input或select,当它们未设置required属性,它们设置的样式起效果。

浏览器支持:chrome 15+, safari 5+, firefox 4+, opera 15+, ie 10+, android 2.3, ios 5.1+

</br> 返回目录

placeholder

*:placeholder

描述:改为元素设置显示的 placeholder 属性值的样式

浏览器支持:chrome 4+, firefox 19+, safari 5+, opera 15+, ie(no), edg(需要前缀), android, ios 4.3+

</br> 返回目录

placeholder-shown

:placeholder-shown

描述:匹配表单元素,设置元素展示 placeholder 属性值时的 input 元素样式。

浏览器支持:chrome 4+, safari 5+, firefox 19+, opera 15+, ie(no), edg(no), ios 4.3+, android 6+

</br> 返回目录

read-write

*:read-wirte

描述:匹配用户可选择的元素。

浏览器支持:chrome 36+, safari 9+, firefox 3+, opera 23+, edg 13+, ie(不支持),android ios 6+, ios 9.2+

是否常用:不常用

</br> 返回目录

read-only

*:read-only

描述:匹配用户可选择的元素。

浏览器支持:chrome 36+, safari 9+, firefox 3+, opera 23+, edg 13+, ie(不支持),android ios 6+, ios 9.2+

是否常用:不常用

</br> 返回目录

:in-range

*:in-range

描述:匹配属性值在这个范围内(或不再范围内),例如:input(type=range) 的 min。

浏览器支持:chrome 53+, safari 10.1+, firefox 50+, opera +40, ios 10.3+, android 6+,

是否常用:否

</br> 返回目录

out-of-range

*:out-of-range

描述:匹配属性值在这个范围内(或不再范围内),例如:input(type=range) 的 max。

浏览器支持:chrome 53+, safari 10.1+, firefox 50+, opera +40, ios 10.3+, android 6+,

是否常用:否

</br> 返回目录

selection

:selection

描述:匹配被用户选中的元素的样式。

浏览器支持:chrome 4+, safari 3.1+, firefox 2+, opera 10.1+, ie 9+, ios (不支持), android 4.4+

blank

:blank

描述:除了火狐支持外

浏览器支持:其他浏览器均不支持。(can i use 上根本查不到)

marker

::marker

描述:这个伪元素可以设置元素(如li, dt, dd)生成的框类型为list-item或者设置display属性为 display: list-item; 的任意元素的开始标记。 也就是说可以通过 ::marker 自定义 li 的标记样式和内容。在content属性中设置需要显示的内容,counter-reset, counter-increament 这两个属性用来设置标记的计数器相关内容。

浏览器支持:仅safari 11.1+, ios 11.4+支持

补充:虽然改伪元素的浏览器支持很差,但是可以通过使用 ::before/::after 达到相似的效果。因为 [counters](https://caniuse.com/#search=counter-rese) 这个属性的浏览器支持很好所以可以放心使用。



作者:缘自世界
链接:https://www.jianshu.com/p/67448433aea9


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP