CSS3选择器

一、属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

1、E[att^=value]属性选择器

E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。
需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。

 

例：

复制代码
<style type="tsxt/css">
    p[id^="one"]{    /*表示匹配包含id属性，且id属性值是以“one”字符串开头的p元素*/
        属性:属性值;
    } 
</style>

<body>
    <p id="one">内容</p>
    <p id="one0">内容</p>
</body>
复制代码

 

 

2、E[att$=value]属性选择器

E[att$=value]属性选择器是指选择器名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串。
与E[att^=value]选择器一样，E元素可以省略的，如果省略则表示可以匹配满足条件的任意元素。

例：

复制代码
<style type="tsxt/css">
    p[id$="main"]{    /*表示匹配包含id属性，且id属性值是以“main”字符串结尾的p元素*/
        属性:属性值;
    } 
</style>

<body>
    <p id="oldmain">内容</p>
    <p id="newmain">内容</p>
</body>
复制代码

 

 

3、E[att*=value]属性选择器

E[att*=value]属性选择器是指选择器名称为E的标记，且该标记定义了att属性，att属性值包含value的子字符串。

与前两个选择器一样，E元素可以省略的，如果省略则表示可以匹配满足条件的任意元素。

例：

复制代码
<style type="tsxt/css">
    p[id*="demo"]{    /*表示匹配包含id属性，且id属性值是包含“demo”字符串的p元素*/
        属性:属性值;
    } 
</style>

<body>
    <p id="olddemo">内容</p>
    <p id="demoone">内容</p>
</body>
复制代码

二、层次选择器

1、子代选择器（>）

子代选择器主要用来选择某个元素的第一级子元素（第一个子元素）。

复制代码
<style type="text/css">
    h1>strong{    /*表示选择只作为h1元素子元素的strong元素*/
        属性:属性值;
    } 
</style>

<body>
    <h1>
        <strong>这属于第一级子元素</strong>
        <strong>这也属于第一级子元素</strong>
    </h1>
    <h1>
        <strong>这不属于第一级子元素，这是h1元素的孙元素</strong>
    </h1>
</body>
复制代码

 

2、兄弟选择器（+、~）

兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。

临近兄弟选择器（+）该选择器使用加号“+”来连接前后2个选择器。选择器中的2个元素有同一个父亲，而且第2个元素是紧跟第1个元素。

普通兄弟选择器（~）普通兄弟选择器使用“~”来链接前后2个选择器。选择器中的2个元素有同一个父亲，但第2个元素不必紧跟第1个元素。

例：

复制代码
<style type="text/css">
    p+h2{
        属性:属性值;
    }
</style>

<body>
    <p>一</p>
    <h2>二</h2>    /*只选择p元素后紧邻的第1个兄弟元素*/
    <h2>三</h2>
    <h2>四</h2>
</body>
复制代码
复制代码
<style type="text/css">
    p~h2{
        属性:属性值;
    }
</style>

<body>
    <p>一</p>
    <h2>二</h2>    /*选择p元素后的所有兄弟元素*/
    <h2>三</h2>    /*选择p元素后的所有兄弟元素*/
    <h2>四</h2>    /*选择p元素后的所有兄弟元素*/
</body>
复制代码

 

 

三、伪类选择器

1、:root选择器

:root选择器用于匹配文档根元素，在HTML中，根元素始终是HTML元素。也就是说使用“:root选择器”定义的样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。

<style type="text/css">
    :root{
        属性:属性值;
    }
</style>

 

2、:not选择器

如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。

 

例：

复制代码
<style type="text/css">
    body *:not(h3){
        属性:属性值;
    }
</style>

<body>
    <h3>一<h3>
    <p>二</p>    /*选择*/
    <p>三</p>    /*选择*/
    <p>四</p>    /*选择*/
</body>
复制代码

 

3、:only-child选择器

:only-child选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用“:only-child选择器”可以选择这个子元素。

 

复制代码
<style type="text/css">
    li:only-child{    /*用于选择作为ul唯一子元素的li元素*/
        属性:属性值;
    }
</style>

<body>
    <div>
        <ul>
            <li>内容</li>
        </ul>
    </div>
</body>
复制代码

 

4、:first-child选择器和:last-child选择器

:first-child选择器和:last-child选择器分别用于为父元素中特定类型的第1个或者最后一个子元素设置样式。

 

复制代码
<style type="text/css">
p:first-child{
属性:属性值;
}
p:last-child{
属性:属性值;
}
</style>

<body>
<p>一<p> /*:fist-child*/
<p>二</p>
<p>三</p>
<p>四</p> /*:last-child*/
</body>
复制代码

 

5、:nth-child(n)选择器和:nth-last-child(n)选择器

:first-child(n)选择器和:last-child(n)选择器分别用于为父元素中特定类型的指定位置的子元素(第n个子元素、倒数第n个子元素)设置样式。

 

复制代码
<style type="text/css">
    p:nth-child(2){
        属性:属性值;
    }
    p:nth-last-child(2){
        属性:属性值;
    }
</style>

<body>
    <p>一<p>
    <p>二</p>    /*nth-child(2)第二个元素*/
    <p>三</p>
    <p>四</p>    /*nth-last-child(2)倒数第二个元素*/
    <p>五</p>
</body>
复制代码

 

6、:nth-of-type(n)选择器和:nth-last-of-type(n)选择器

:nth-of-type(n)选择器和:nth-last-of-type(n)选择器用于匹配属于父元素的第n个子元素和倒数第n个子元素，与元素类型无关。

<style type="text/css">
    h2:nth-of-type(odd){属性:属性值;}    /*用于将所有h2元素中第奇数行的元素设置样式*/
    h2:nth-of-type(even){属性:属性值;}    /*用于将所有h2元素中第偶数行的元素设置样式*/
    p:nth-last-of-type(2){属性:属性值;}    /*用于将倒数第2个p元素设置样式*/
</style>

 


9、:empty选择器

:empty选择器用来选择没有子元素或文本内容为空的所有元素。

 

例：

复制代码
<style type="text/css">
    :empty{
        属性:属性值;
    }
</style>

<body>
    <p>一</p>
    <p>二</p>
    <p></p>    /*选择设置样式*/
    <p>三</p>
</body>
复制代码

 

10、:target选择器

:target选择器用于为页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式。url带有后面跟有锚名称#，指向文档内某个具体的元素，这个被链接的元素就是目标元素。
只有用户单击了页面中的超链接，并跳转到target元素后，:target选择器所设置的样式才会起作用。

 

例：

复制代码
<style type="text/css">
    :target{    /*用于为target元素设置样式，当单击链接时，所链接到的内容将会被添加样式*/
        属性:属性值;
    }
</style>

<body>
    <p><a href="#demo1">跳转至demo1</p>
    <p><a href="#demo2">跳转至demo2</p>
    <p>请点击上面的链接，:target选择器会突然显示当前活动的HTML锚</p>
    <p id="demo1">内容1</p>
    <p id="demo2">内容2</p>
</body>
复制代码

 

四、伪元素选择器

伪元素表示页面中一些特殊的并不真实存在的元素，伪元素选择器是针对CSS3中已经定义好的伪元素使用的选择器。

1、::before选择器

:before伪元素选择器用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。其基本语法格式为：

 

例：

复制代码
<style type="text/css">
    p::before
    {
        content:"文字"或"url()";
        属性:属性值;
    }
</style>

<body>
    <p>内容</p>
</body>
复制代码

 

在上述语法中，被选元素位于“:before”之前，“{}”中的content属性用来指定要插入的具体内容，该内容既可以为文本也可以为图片。

2、::after选择器

:after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同，必须配合content属性来指定要插入的具体内容。

 

复制代码
<style type="text/css">
    p::after
    {
        content:"文字"或"url()";
        属性:属性值;
    }
</style>

<body>
    <p>内容</p>
</body>
复制代码

::before和::after选择器必须设置content属性，不然伪元素是不会显示的。

3、::first-letter选择器

::first-letter选择器只能用于块级元素，用于设置附属元素第一个字母的样式。

4、::first-line选择器

::first-line选择器只能用于块级元素，用于设置附属元素表示第一行字母的样式。

5、::selection选择器

::section选择器匹配元素中被用户选中部分。

伪类选择器和伪元素选择器的区别：

1. 虚实不同
伪类选择器是实的，伪类选择器并不会创建元素，它只是修改已有元素的样式。
伪元素选择器是虚的，当它添加子元素时，新建了一个元素，并为其添加样式，但这个元素并不存在dom树中。
2. 表示不同：
使用单冒号(:)表示伪类元素。
CSS3规范中要求使用双冒号(::)表示伪元素。

 

posted @   初学者张斌斌  阅读(201)  评论(0)  编辑  收藏  举报
相关博文：
· 浏览器中的JavaScript(2)
· 浏览器中的JavaScript（3）
· CSS3新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
· CSS3选择器总结（表格）
· CSS选择器详解
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· 单线程的Redis速度为什么快？
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
点击右上角即可分享
微信分享提示
AI IDE Trae