css高级选择器

最新推荐文章于 2022-03-31 17:57:24 发布

HXGNMSL

最新推荐文章于 2022-03-31 17:57:24 发布

阅读量195

点赞数

本文链接：https://blog.csdn.net/HXGNMSL/article/details/89523299

版权

本文深入解析CSS3中的高级选择器，包括伪类选择器、伪元素选择器及属性选择器的应用技巧。涵盖:first-of-type、:last-of-type、:first-child、:last-child、:nth-child(n)等伪类，以及::before、::after、::first-letter、::first-line、::selection等伪元素的使用方法，还有基于属性的选择方式。

摘要由CSDN通过智能技术生成

css3高级选择器

伪类选择器

p:first-of-type : 匹配同类型中的第一个同级兄弟元素p

p:last-of-type : 匹配同类型中的最后一个同级兄弟元素p

p:first-child : 匹配父元素的第一个子元素p。

p:last-child : 匹配父元素的第一个子元素p。

p:nth-child(n) : 返回其父元素的第n个p元素

伪元素选择器

p::first-letter文本的第一个单词或字（如中文、日文、韩文等）
p::first-line 文本第一行；
p::selection 可改变选中文本的样式
E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

比如： P::after{ content: '先给小萌充气';

display: block;

width: 200px;

height: 50px;

background-color: yellowgreen; }

p::before{
    content: '燃烧小萌的卡路里';

}

属性选择器

选取标签带有某些特殊属性的选择器我们成为属性选择器

比如：

先找到p标签，再找到p标签中有class属性的p标签
p[class]{
   
}
先找到p标签，再找到p标签中有class属性='cls'的p标签
p[class='cls']{
    
}
先找到p标签，再找到p标签中有class属性以‘cls’开头的p标签
p[class^='cls']{
    
}
p[class$='1']{
    
}
先找到p标签，在找到p标签中有class属性，属性包括cls 所有的p标签
p[class*='cls']{
    
}