第四节：CSS3 选择器_e[att^=value]属性选择器-CSDN博客

本文链接：https://blog.csdn.net/qq_41952539/article/details/107795534

第三课时：CSS3 选择器

2.3.1 属性选择器

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

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

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

当 E 省略不写时，则表示可以匹配满足条件的任意元素

div [id^=section] 表示 匹配包含 id 属性，且属性值是以 “section” 字符串开头的 div 元素

语法格式：
标记名[属性^="属性值"]
	E[att^="value"]

<head>
    <style type="text/css">
        p[id^="one"] {
            color: red;
        }
    </style>
</head>
<body>
    <p id="one"> 可以匹配 </p>
    <p id="one12"> 可以匹配 </p>
    <p id="A12one"> 不可以匹配 </p>
</body>

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

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

当 E 省略不写时，则表示可以匹配满足条件的任意元素

div [id$=section] 表示 匹配包含 id 属性，且属性值是以 “section” 字符串结尾的 div 元素

语法格式：
标记名[属性$="属性值"]
	E[att$="value"]

<head>
    <style type="text/css">
        p[id$="two"] {
            color: red;
        }
    </style>
</head>
<body>
    <p id="two"> 可以匹配 </p>
    <p id="two12"> 不可以匹配 </p>
    <p id="A12two"> 可以匹配 </p>
</body>

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

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

当 E 省略不写时，则表示可以匹配满足条件的任意元素

div [id*=section] 表示 匹配包含 id 属性，且属性值包含 “section” 字符串的 div 元素

语法格式：
标记名[属性*="属性值"]
	E[att*="value"]


<head>
    <style type="text/css">
        p[id*="two"] {
            color: red;
        }
    </style>
</head>
<body>
    <p id="two"> 可以匹配 </p>
    <p id="1two2"> 可以匹配 </p>
    <p id="A12two"> 可以匹配 </p>
</body>

2.3.2 关系选择器

子代选择器（>）

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

例：希望选择只作为 h1 元素的子元素的 strong 元素，可以写做 h1 > strong

<head>
    <style type="text/css">
        h1>strong {
            color: red;
        }
    </style>
</head>
<body>
    <h1> 这是 <strong> h1 </strong> 标题 </h1>					<!-- 生效 -->
    <h1> 这是 <em> <strong> h1em </strong> </em> 标题 </h1>		<!-- 不生效: strong 是 h1 下第二级元素 -->
</body>

兄弟选择器（+、~）

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

2.1 临近兄弟选择器

临近兄弟选择器使用 “+” 来连接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素

<head>
    <style type="text/css">
        p+h2 {
            color: red;
        }
    </style>
</head>
<body>
    <p> 这是一个段落 </p>
    <h2> 这是第一个 h2 元素 </h2>		<!-- 生效 -->
    <h2> 这是第二个 h2 元素 </h2>		<!-- 不生效: 这是 p标记下第二个 h2元素，不是临近元素 -->
</body>

2.2 普通兄弟选择器

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

<head>
    <style type="text/css">
        p~h2 {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 同为父级元素 body 下的兄弟元素 -->
    <p> 这是一个段落 </p>
    <h2> 这是第一个 h2 元素 </h2>		<!-- 生效 -->
    <h2> 这是第二个 h2 元素 </h2>		<!-- 生效 -->
</body>

2.3.3 结构化伪类选择器

:root 选择器

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

<head>
    <style type="text/css">
        :root {
            color: red;
        }
        h2 {
            color: blue;
        }
    </style>
</head>
<body>
    <h2> 这是 h2 元素 </h2>		 <!-- 蓝色：单独设置，进行覆盖 -->
    <p> 这是一个段落 </p>			<!-- 红色 -->
</body>

:not 选择器

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

语法格式：
父结构元素 *:not(要排除的子结构元素) {属性值;}


<!-- 排除 body 结构中的子结构元素 h3 -->

<head>
    <style type="text/css">
        body *:not(h3){
            color: red;
        }
    </style>
</head>
<body>
    <h3> 这是一个标题 </h3>	<!-- 排除，不使用样式 -->
    <p> 这是一个段落 </p>		<!-- 红色 -->
</body>

:only-child 选择器

:only-child 选择器用于匹配属于某父元素的唯一子元素的元素

简单理解：如果某个父元素仅有一个子元素，则使用 " :only-child 选择器" 可以选择这个元素

语法格式：
唯一子元素:only-child{属性值;}


<!-- 用于选择作为 ul 唯一子元素的 li元素，并设置文本颜色 -->

<head>
    <style type="text/css">
        li:only-child {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li> 列表1 </li>
        <li> 列表2 </li>
        <li> 列表3 </li>
    </ul>
</body>

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

:first-child 选择器用于为父元素中的第一个子元素设置样式

:last-child 选择器用于为父元素中的最后一个子元素设置样式

语法格式：
标记名:first-child{属性值;}


<head>
    <style type="text/css">
        p:first-child {
            color: red;
        }
        p:last-child {
            color: blue;
        }
    </style>
</head>
<body>
    <p> 这是第一个段落 </p>		<!-- :first-child 选择器样式 -->
    <p> 这是一个段落 </p>
    <p> 这是最后一个段落 </p>		<!-- :last-child 选择器样式 -->
</body>

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

:nth-child(n) 选择器用于为父元素中的第n个子元素设置样式

:nth-last-child(n) 选择器用于为父元素中倒数第n个子元素设置样式

语法格式：
标记名:nth-child(n){属性值;}


<head>
    <style type="text/css">
        p:nth-child(2) {
            color: red;
        }
        p:nth-last-child(2) {
            color: blue;
        }
    </style>
</head>
<body>
    <p> 这是第一个段落 </p>
    <p> 这是第二个段落 </p>		 <!-- :nth-child(n) 选择器样式 -->
    <p> 这是倒数第二个段落 </p>		<!-- :nth-last-child(n) 选择器样式 -->
    <p> 这是最后一个段落 </p>
</body>

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

:nth-of-type(n) 选择器用于匹配属于父元素的特定类型的第n个子元素

:nth-last-of-type(n) 选择器用于匹配属于父元素的特定类型的倒数第n个子元素

不同之处：

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

语法格式：
标记名:nth-of-type(n){属性值;}


<head>
    <style type="text/css">
        h2:nth-of-type(2) {
            color: red;
        }
        p:nth-of-last-type(2) {
            color: blue;
        }
    </style>
</head>
<body>
    <h2> 第一个 h2 </h2>
    <p> 这是第一个段落 </p>
    <h2> 第二个 h2 </h2>			<!-- h2:nth-of-type(2) 选择器样式 -->
    <p> 这是第二个段落 </p>
    <h2> 倒数第二个 h2 </h2>
    <p> 这是倒数第二个段落 </p>		<!-- :nth-of-last-type(2) 选择器样式 -->
    <h2> 倒数第一个 h2 </h2>
    <p> 这是最后一个段落 </p>
</body>

:empty 选择器

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

语法格式：
:empty{属性值;}


<!-- 设置 空元素p 的背景颜色 -->

<head>
    <style type="text/css">
        p {
            width: 240px;
            height: 60px;
        }
        :empty {
            background-color: red;
        }
    </style>
</head>
<body>
    <p> 这是一个段落 </p>
    <p> 这是一个段落 </p>
    <p></p>
    <p> 这是一个段落 </p>
</body>

:target 选择器

:target 选择器用于为页面中的某个 target 元素指定样式（该元素的 id 被当做页面中的超链接来使用）。

只有用户点击了页面中的超链接，并跳转到 target 元素后，:target 选择器所设置的样式才会起作用

语法格式：
:target{属性值;}


<!-- 当用户点击链接时，链接内容添加效果,适用于当前页面内跳转 -->

<head>
    <style type="text/css">
        :target {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
    <p> <a href="#main1"> 跳转至内容1 </a> </p>
    <p> <a href="#main2"> 跳转至内容2 </a> </p>
    <p> 这是一个段落 </p>
    <p id="main1"> 内容1... </p>
    <p id="main2"> 内容2... </p>
</body>

2.3.4 伪元素选择器

:before 选择器

:before 伪元素选择器用于在被选元素的内容前面插入内容，必须配合 content 属性来指定要插入的具体内容

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

语法格式：
元素:before{content: "文字" / url(); 属性值;}


<!-- 一般用于在段落前添加内容，同时使用 content 属性来指定添加的具体内容 -->

<head>
    <style type="text/css">
        p:before {
            content: "标题";
            color: red;
            font-size: 24px;
        }
        h2:before {
            content: url(images/logo.jpg);
        }
    </style>
</head>
<body>
    <p> 这是一个段落 </p>
    <h2> 这是一个标题 </h2>
</body>

<!-- 效果展示 -->
标题 这是一个段落
logo.jpg 这是一个标题

:after 选择器

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

被选元素位于 “:after” 之前，"{}" 中的 centent 属性用来指定要插入的具体内容，该内容既可以是文本也可以为图片

语法格式：
元素:before{content: "文字" / url(); 属性值;}


<!-- 一般用于在段落后添加内容，同时使用 content 属性来指定添加的具体内容 -->

<head>
    <style type="text/css">
        p:after {
            content: "结尾";
        }
    </style>
</head>
<body>
    <p> 这是一个段落 </p>
    <h2> 这是一个标题 </h2>
</body>

<!-- 效果展示 -->
这是一个段落 结尾
这是一个标题

2.3.5 链接伪类

链接伪类又称 “伪类选择器”，定义超链接时，经常要为超链接指定不同的状态，使得超链接在单击前、单击后和鼠标悬停时的样式不同

超链接标记的伪类	含义
a:link{ CSS 样式规则; }	未访问时的超链接（初始状态）
a:visited{ CSS 样式规则; }	访问后超链接的状态
a:hover{ CSS 样式规则; }	鼠标经过、悬停时超链接的状态
a:active{ CSS 样式规则; }	鼠标单击不动时超链接的状态

a:link,a:visited {
    text-decoration: none;		/* 未访问和访问后，清除超链接的下划线 */
}

a:hover {
    text-decoration: underline;		/* 鼠标悬停时，出现下划线 */
}

a:active {
    color: red;			/* 鼠标单击不动时，变色 */
}