CSS3新增选择器

发布时间：2024年01月04日

ZHUCSS选择器

CSS3 属性选择器

E [attr] {rule}

语法格式：

E [attr] {rule}

说明：

选择具有 attr 属性的 E 元素，并应用 rule 指定的样式

实例：

<!--将选择所有包含title属性的元素，将其文字颜色设置为红色-->
*[title] {color:red;}
?
<!--将选择所有包含 href 属性的a元素，将其文字颜色设置为红色-->
a [href] {color:red;}
?
<!-- 将选择所有包含href和title属性的a元素，将其文字颜色设置为红色 -->
a [href] [title] {color:red;}
E [attr = value] {rule}

语法格式：

 E [attr = value] {rule}

说明：

选择具有 attr属性并且值等于value的E元素，并应用 rule 指定的样式

实例：

<!--将选择所有包含href属性，且属性值为“https://www.baidu.com”的a元素，
将其文字设置为红色-->
a [href="http://www.baidu.com"] {color:red;}
E[attr~=value]{rule}：

语法格式：

 E[attr~=value]{rule}

说明：

选择具有 attr 属性且属性值为用空格分隔的多个字符列表，其中任一字符等于value的 E元素，并用 rule指定的样式,这里的value不能包含空格

实例：

<!--将选择所有包含title属性，且属性值为用空格分隔的字符列表，
其中的任一字符为“to”的a元素，并将其文字颜色设置为红色-->
<style>
a [title~="to"]{color:red}
</style>
<body>
 ?<a title="link to web2">web2</a>
</body>
E[attr|=value ]{rule}

语法格式：

 E[attr|=value ]{rule}

说明：

选择具有attr属性且属性值为用-分割的多个字符列表，且以value开始的E元素，并用rule指定的样式

实例：

<!--将选择所有包含lang属性，且属性值为用连字符分隔，分隔符一侧包含“en”的
所有a元素，将其文字颜色设置为红色-->
 <style>
 ? a[lang |="en"]{ color:red;}
 </style>
?
 <body>
 ? <a href="index.html" lang="en">index</a>
 ? <a href="web.html" lang="en-us">web1</a>
 </body>

CSS3 新增属性选择器

E [attr ^=value]{rule}

语法格式：

E [attr^=value]{rule}

说明：

选择具有attr属性且属性值以value开头的E元素，并应用rule指定的样式。

实例：

<!--将选择所有包含href属性，且属性值以"web"开头的a元素，
将其文字颜色设置为红色-->
a[href^="web"]{color:red;}
E [attr$=value] {rule}

语法格式：

E [attr$=value] {rule}

说明：

选择具有attr属性且属性值以value结尾的E元素，并应用rule指定的样式。

实例：

<!--将选择所有包含href属性，且属性值以“com”结尾的a元素，
将其文字颜色设置为红色-->
 a[href$="com"]{color:red;}
E [attr*=value] {rule}

语法格式：

E [attr*=value] {rule}

说明：

选择具有attr属性且属性值任意位置包含value的E元素，并应用rule指定的样式。

实例：

<!--将选择所有包含href属性，且属性值包含"web"的a元素，
将其文字颜色设置为红色-->
 a[href*="web"]{color:red;}

结构伪类选择器

结构伪类是CSS3新设计的选择器，利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内的class属性和Id属性的定义，使得文档更加简洁。

E:root

选择匹配E所在的文档的根元素。

在HTML文档中，根元素就是html元素。此时:root与html类型选择器匹配内容相同。

E:empty

选择匹配E的元素，且该元素不含子节点。

注意：文本也属于节点

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3结构伪类选择器</title>
        <style>
        p:empty{
            width:20px;
            height:10px;
            background:red;
        }
        </style>
    </head>
    <body>
        
        <div>
            <p></p>
            <p>第二段话</p>
            <p>第三段话<span>span里面</span></p>
        </div>
    </body>
</html>

运行结果：

child系列

E:nth-child(n)

语法：选择所有在其父元素中第n个位置的匹配E的子元素。

语法格式:

E:nth-child(n)

注意：参数n可以是数字（1，2，3……）、关键字（odd、even）和公式（2n、2n+1)，参数的索引起始值为1.\

E:nth-last-child(n)

语法：选择所有在父元素中倒数第n个位置的匹配E的元素。

与E:nth-child(n)计算顺序相反，语法和用法完全一样。

.E:nth-last-child(n)
E:first-child

语法：选择位于其父元素中第一个位置且匹配E的子元素，相当于E:nth-child(1)。

E:first-child
E:last-child

语法：选择位于其父元素中最后一个位置且匹配E的子元素，相当于E:nth-last-child(1)。

语法格式：

 E:last-child
E:only-child

语法：选择其父元素只包含一个子元素，且该子元素匹配E。

语法格式：

E:only-child
p:only-child 
匹配
<div><p></p></div>中的p元素，
但不匹配
<div><h1></h1><p></p></div>中的p元素。
E:nth-child(n)与E：nth-of-type(n)

E:nth-child(n):选择所有在其父元素中第n个位置的匹配E的子元素。

注意：所有元素先排序，再匹配E元素。

实例：

<div>
 ? ? ? ?<h3>自强</h3>
 ? ? ? ?<h4>不要妄自菲薄，同时要自强不息</h4>
 ? ? ? ?<p>充满自信。</p>
 ? ? ? ?<p>包容并蓄。</p>
 ? ? ? ?<p>不要妄自菲薄，同时要自强不息。</p>
</div>

说明：

使用p:nth-of-type(2){color:red;}，进行元素匹配时，所有元素按位置排序，找到要求的第二个元素为h4,然后进行元素匹配，此时h4元素与要求的p元素不匹配，所以字体颜色不变。

E:nth-of-type(n)：选择所有在其父元素中同类型第n个位置的匹配E的子元素。所有E元素被分离出来单独排序，非E子元素不参与排序。

实例：

<div>
 ? ? ? ?<h3>自强</h3>
 ? ? ? ?<h4>不要妄自菲薄，同时要自强不息</h4>
 ? ? ? ?<p>充满自信。</p>
 ? ? ? ?<p>包容并蓄。</p>
 ? ? ? ?<p>不要妄自菲薄，同时要自强不息。</p>
</div>

说明：

使用p:nth-of-type(2){color:red;}，进行元素匹配时，所有p元素单独排序，之后匹配第二个p元素，字体颜色变为红色

type系列

E:nth-of-type(n)

语法：选择所有在其父元素中同类型第n个位置的匹配 E 的子元素。

 E:nth-of-type(n)

说明：参数n可以是数字（1，2，3），关键字（odd,even）和公式(2n,2n+1)，参数的索引起始值为1.

E：nth-last-of-type(n)

语法：选择所有在其父元素中同类型倒数第n个位置的匹配 E 的子元素。

注意:该选择器与 E：nth-of-type(n)是计算顺序相反的选择器，语法和用法相同。

语法格式：

E：nth-last-of-type(n)
E:first-of-type

语法：选择在其父元素中匹配 E 的第一个同类型的子元素

语法格式:

E:first-of-type

注意：

相当于 E:nth-of-type(1).

例如：p:first-of-type匹配<div>

<h1></h1>

<p></p>

<p></p></div>

中的第一个p元素。

E:last-of-type

语法：选择在其父元素中匹配 E 的最后一个同类型的子元素。

语法格式：

E:last-of-type

注意：

相当于 E:nth-last-of-type(1).

例如：p:last-of-type匹配

<div>

<h1></h1>

<p></p>

<p></p></div>

中的第二个p元素。

E：only-of-type

语法：选择其父元素只包含一个同类型子元素，且该子元素匹配E的子元素。

语法格式:

E:only-of-type

注意:

例如：p:only-of-type

匹配

<div>

<p></p>

</div>中的p元素。

也匹配

<div>

<h1></h1>

<p></p>

</div>中的p元素

CSS3 UI元素状态伪类选择器

UI是 User Interface（用户界面）的简写。

语法：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用

鼠标相关的 UI 元素状态伪类选择器

超链接标签<a>的伪类

超链接标签<a>的伪类含义
a:link{ CSS样式规则； }未访问时超链接的状态
a:visited{ CSS样式规则; }访问后超链接的状态
a:hover{ CSS样式规则; }鼠标指针经过，悬停时超链接的状态
a:active{ CSS样式规则; }单击鼠标时超链接的状态

新增CSS3超链接<a>的伪类

新增伪类含义
E:hover用于设定当鼠标指针悬停于所选择元素时使用的样式
E:active用于设定当用鼠标单击所选择元素时使用的样式
E:focus用于设定当所选择元素获取焦点时使用的样式
其他UI 元素状态伪类选择器

CSS3常用UI元素状态伪类选择器

选择器说明
E:enabled用于指定所选择元素处于可用状态时应用的样式
E:disabled用于指定所选择元素处于不可用状态时应用的样式
E:read-only用于指定所选择元素处于只读状态时应用的样式
E:read-write用于指定所选择元素处于非只读状态时应用的样式
E:checked用于指定单选按钮元素或复选框元素处于选中状态时应用的样式
E:default用于指定页面打开时默认处于选中状态的单选按钮元素或复选框元素应用的样式
E:indeterminate用于指定页面打开时如果一组单选按钮中任一单选按钮被选中时整组单选按钮元素应用的样式
E:selection用于指定所选择元素处于选中状态时应用的样式
文章来源:https://blog.csdn.net/AIMing_byte/article/details/135347507
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章