黑马程序员:css3选择器用法介绍

2023-01-03 0 755

CSS3追加的示例主要就分成特性示例、亲密关系示例、形式化regardless示例、伪原素示例4类,具体内容如是说如下表右图。

1、 特性示例

特性示例能依照页面记号的特性及特性值来优先选择记号。特性示例通常是两个记后紧随中括号“[]”,被除数外部是特性或是特性函数,如下表右图右图:

黑马程序员:css3选择器用法介绍

CSS3中常用的特性示例主要就主要包括E[att^=value]、E[att$=value]和E[att*=value]这四种性示例,具体内容如下表右图右图:

(1)E[att^=value]

比如: div[id^=section]

表明:则表示相匹配包涵id特性,且id特性值是以“section”数组结尾的div记号。

(2)E[att$=value]

比如: div[id$=section]

表明:则表示相匹配包涵id特性,且id特性值是以“section”数组结尾的div记号

(3)E[att*=value]

比如: div[id*=section]

表明:则表示匹配包涵id特性,且id特性值包涵“section”数组结尾的div记号。

2、亲密关系示例

CSS3中的亲密关系示例主要就主要包括子代示例和兄弟示例,其中子代示例由符号连接,兄弟示例由符号“+”和“~”连接,具体内容如下表右图右图。

(1)亲密关系示例

比如: h1>strong

表明:则表示优先选择嵌套在h1记号的子记号strong。

(2)临近兄弟示例

比如: h2+p

表明:则表示优先选择h2记号后紧邻的第两个兄弟记号p。

(3)普通兄弟示例

比如:p~h2

表明:则表示优先选择p记号所有的h2兄弟记号。

3、形式化regardless示例

形式化regardless示例能减少文档内class特性和id特性的定义,使文档变得更加简洁。下面列举了常用的形式化regardless优先选择器。

:root

用于相匹配文档根记号,使用“:root示例”定义的样式,对所有页面记号都生效。

:not

比如:body*:not(h2)

用于排除body结构中的子结构记号h2。

:only-child

比如:li:only-child

用于相匹配属于某父记号的唯一子记号(li),也就是说某个父记号仅有两个子记号(li)。

:first=child

用于优先选择父原素第两个子记号。

:last-child

用于优先选择父原素最后两个子记号。

:nth-child(n)

比如:p:nth-child(2)

则表示用于优先选择父原素第二个p记号。

:nth-last-child(n)

比如:p:nth-last-child(2)

用于则表示父原素倒数第二个p记号。

:nth-of-type(n)

比如:h2:nth-of-type(odd)

则表示用于优先选择所有h2记号中位于奇数行数的记号。

:nth-last-of-type(2)

比如:p:nth-last-of-type(2)

则表示用于优先选择倒数第二个p记号。

:empty

用于优先选择没有子记号或是文本内容为空的所有记号。

4、伪原素示例

伪原素示例通常是两个记号后面紧随英文冒号“:”,英文冒号后是伪原素名,如下表右图右图。

黑马程序员:css3选择器用法介绍

要注意的是,记号与伪原素名之间不要有空格,伪原素示例常用有:before示例和:after示例。

:before

比如: p:before

则表示:则表示在p记号的内容前面插入内容。

:after

比如: p:after

则表示: 则表示在p记号的内容后面插入内容。

需要注意的是,如果想要在文本后面添加是图片,只需更改content特性后的内容即可。其基本语法格式如下表右图

p: after{content: url(); }

举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务