知识目标
- 掌握属性选择器的使用
- 掌握关系选择器的使用
- 掌握结构化伪类选择器的使用
- 掌握伪元素选择器的使用
如何减少文档内class属性和id属性的定义,使文档变得更加简洁?
可以通过属性选择器、关系选择器、结构化伪类选择器、伪元素选择器。
1. 属性选择器
1.1 E[attribute]选择器
E[attribute]选择器 用于选取标签名称为E (代指标签名称),并且定义了attribute (代指属性名称)属性的标签。其中,E 可以省略 ,如果省略则表示可以匹配满足条件的任意标签 。
例1:选取包含id
属性的<div>
标签:div[id]
例2:选取包含align
属性,属性值为center
的全部标签:[align=center]
1.2 E[attribute~=value]选择器
E[attribute~=value]选择器 用于选取标签名称为E(代指标签名称),并且定义了attribute(代指属性名称)属性,包含某个value (代指属性值字符)属性值的标签。
E[attribute]选择器 和E[attribute~=value]选择器 区别在于前者需要属性和属性值完全一致,后者只要标签包含属性值即可被选中。
1.3 E[attribute|=value]
E[attribute|=value]选择器 能够选取带有value属性值或以value-开头的属性值的标签,不包括两个属性的标签。
例1: [class|=a] { }
选取属性值为a 或属性值以a-开头的标签。一般用于匹配en-US、zh-CN 等。
1.4 E[attribute^=value]
E[attribute^=value]选择器 能够选取以value开头 的属性值的标签。
例1:选取属性值以one开头的标签 [class ^=one] {}
1.5 E[attribute$=value]
E[attribute$=value]
选择器 用于选择属性值后缀为value (代指属性值字符)字符的标签。
例1: div[id$=section]
选取包含id属性,且id属性值以section 字符串结尾的div标签。
1.6 E[attribute*=value]
E[attribute*=value]选择器
用于选择属性值包含value (代指属性值字符)字符的标签。
例1:div[i*=section]
选取包含id属性,且id属性值包含"section"字符的<div>
标签
1.7 总结
选择器和作用列表如下:
2. 关系选择器
2.1 子元素选择器
子元素选择器 主要用来选择父级标签的子标签,由符号">"连接标签名称。
例如:h1>strong
选取<h1>
标签中的子标签<strong>
标签
2.2 兄弟选择器
兄弟选择器 可以选择位于同一个父标签 中,指定标签后面 ,具有并列 关系的子标签。在CSS3中,兄弟选择器分为邻近兄弟选择器和普通兄弟选择器两种。
2.2.1 邻近兄弟选择器
使用加号**"+"连接前后两个选择器。选择器中的两个子标签从属同一个父标签,而且被选取子标签必须紧跟指定的标签。强调 "紧接",如A+B,选择的B必须是A之后的第一个兄弟元素**。
2.2.2 普通兄弟选择器
使用**"~"**来连接前后两个选择器。选择器中的两个子标签从属同一个父标签,而且被选取子标签需要位于指定的标签后面。如A~B
只要B是A后面出现的兄弟都能被选择。
3. 结构化伪类选择器
3.1 :root
:root选择器
用于匹配文档根标签,在HTML中,根标签指的<html>
标签。因此使用:root选择器
定义的样式,对所有页面标签都生效。
3.2 :not
:not选择器
可以排除设置的标签或属性。例如,h3:not(.one)
会选取没有类名.one的<h3
>标签。
3.3 :only-child
:only-child选择器
用于选取父标签中的唯一子标签,也就是说,如果某个父标签仅有一个子标签,使用:only-child选择器
可以选择这个子标签。例p:only-child
能选中我是独生子,而不满足类型的div和多个孩子的标签不能被选中。
bash
<body>
<div>
<p>我是独生子</p>
</div>
<div>
<div>我是独生子,是div</div>
</div>
<div>
<p>我是第1个段落</p>
<p>我是第2个段落</p>
</div>
</body>
3.4 :first-child
:first-child选择器
用于选择父标签中的第一个子标签。
3.5 :last-child
:last-child选择器
用于选取父标签中的最后一个子标签。
3.6 :nth-child(n)和nth-last-child(n)
:nth-child(n)
选择器用于选择父标签中的第n个子标签。例如:选取父标签中的第2个子标签::nth-child(2)
。
:nth-last-child(n)
用于选取父标签中的倒数第n个子标签。
此时还可以使用关键字、公式等进行选择;
比如:nth-child(even), 选择的是偶数孩子。
比如:nth-child(3n), 选择的是3倍数的孩子。
3.7 :first-of-type和:last-of-type
:first-of-type选择器
用于匹配父标签中第1个特定类型的子标签。例如p:first-of-type
,选择父标签中的第1个p类型的子标签。
:last-of-type选择器
用于匹配父标签中最后1个特定类型的子标签。
nth-of-type(n)和nth-child(n)
区别:前面的会把指定元素的例子排序序号再选,后面的会先排序,然后看当前的序号孩子是否满足是指定元素。
4. 伪元素选择器
4.1 :empty
:empty选择器
用来选择没有子标签或内容为空的所有标签。
4.2 :target
:target选择器
用于突出显示当前活动的目标元素。只有用户单击页面中的超链接,并且跳转到:target选择器
控制的元素后,:target选择器
所设置的样式才会起作用。
4.3 :before :after
:before选择器
/ :after选择器
用于在被选取标签的前面/后面插入内容(属于行内元素,在文档中找不到的,称为伪元素)。在使用:before选择器
/ :after选择器
时必须配合content属性来指定要插入的具体内容。
常用场景:1. 鼠标放上去出现的遮罩、图层 2.
5. 实践
我会提供代码 但会将样式删除,接下来的案例题麻烦大家使用以上述学的知识来补充选择器及样式!!!可以在评论区上传自己的代码 和样例截图 哦!!!
提供的样例代码:
bash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Selectors Example</title>
<!-- 整体页面样式需求:
1. 字体使用 Arial 或无衬线字体 2. 行高为 1.6 3. 页面边距为 20px-->
</head>
<body>
<!-- h1 样式需求:
1. 颜色为 #333 2. 字体大小为 2em 3. 文本居中对齐 4. 文本阴影为 2px 2px 4px rgba(0, 0, 0, 0.1) -->
<h1>CSS3 Selectors Example</h1>
<!-- h2 样式需求:
1. 颜色为 #555
2. 字体大小为 1.6em
3. 底部有 1px 实线的 #ccc 颜色边框
4. 底部内边距为 5px
-->
<h2>属性选择器示例</h2>
<!-- a标签样式需求,可采用E[att="value"]的方式进行选择:
1. 颜色为橙色
2. 去除下划线
3. 字体加粗 -->
<p>访问 <a href="https://www.example.com" target="_blank">安全网站</a> 获取更多信息。</p>
<!--
img[src^="images/"] 样式需求:
1. 边框为 2px 实线的 #ccc 颜色
2. 边框圆角为 5px
3. 阴影为 0 0 5px rgba(0, 0, 0, 0.3)
-->
<p><img src="images/sample.jpg" alt="Sample Image"></p>
<!-- highlight样式需求 采用*= 的方式:
1. 背景颜色为黄色
2. 字体大小为 1.1em
-->
<p class="highlight">这是一个高亮显示的段落。</p>
<!-- 样式需求: 采用$=的方式
1. 颜色为蓝色
2. 字体为斜体
-->
<p>下载 <a href="document.docx">文档</a> 了解详情。</p>
<!-- important样式需求: 采用~=选择的方式
1. 颜色为红色
2. 字体加粗
3. 有下划线
-->
<p>这里有个 <span class="important">重要</span> 的信息。</p>
<!-- li[data-lang|="en"] 样式需求:
1. 背景颜色为浅蓝色
2. 字体大小为 0.9em
-->
<!-- ul 样式需求:
1. 列表样式类型为圆形
2. 左内边距为 20px
-->
<ul>
<li data-lang="en-US">英文列表项1</li>
<li data-lang="fr-FR">法文列表项2</li>
<li data-lang="en-GB">英文列表项3</li>
</ul>
<!-- h3 样式需求:
1. 颜色为 #777
2. 字体大小为 1.3em
-->
<h3>兄弟选择器示例</h3>
<!-- h3 + p 样式需求:
1. 字体为斜体
2. 颜色为 #777
3. 字体大小为 0.95em
-->
<p>这是紧跟在h3后面的段落,使用邻兄弟选择器设置样式。</p>
<!--
h3 ~ ol 样式需求:
1. 背景颜色为 #f9f9f9
2. 边框为 1px 实线的 #ddd 颜色
3. 内边距为 10px
-->
<!--
ul li:first-child 样式需求:
1. 字体加粗
2. 字体大小为 1.1em
3. 颜色为 #333
-->
<!--
ul li:last-child 样式需求:
1. 有下划线
2. 字体为斜体
-->
<!--
ul li:nth-child(3n) 样式需求:
背景颜色为 #eee
-->
<!--
ol li:nth-child(even) 样式需求:
1. 颜色为紫色
2. 字体大小为 1.05em
-->
<!--
ol li:nth-child(odd) 样式需求:
颜色为 #555
-->
<!--
ol 样式需求:
列表样式类型为大写罗马数字
左内边距为 25px
-->
<!--
p 样式需求:
颜色为 #666
-->
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
<li>有序列表项4</li>
<li>有序列表项5</li>
</ol>
<!--
h2 样式需求:同上面的 h2 样式需求
-->
<h2>表格示例</h2>
<!--
table 样式需求:
1. 边框合并,无边框间距
2. 宽度为 100%
-->
<!--
th 样式需求:
1. 背景颜色为 #f0f0f0
2. 字体加粗
3. 文本居中对齐
4. 内边距为 8px
-->
<!--
td 样式需求:
1. 边框为 1px 实线的 #ccc 颜色
2. 内边距为 8px
-->
<!--
奇数孩子样式需求:可使用:nth-child(even)的方式 使用
背景颜色为 #f9f9f9
-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>程序员</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>设计师</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
<td>学生</td>
</tr>
</tbody>
</table>
<!--
a.info-link 样式需求:
1. 颜色为 green
2. 文本有下划线
-->
<p>更多信息请访问 <a href="#" class="info-link">这里</a>。</p>
<!--
span.secondary 样式需求:
1. 颜色为 #999
2. 字体大小为 0.9em
-->
<p><span class="secondary">这是一段次要信息</span>,需要特殊样式。</p>
</body>
</html>
需实现的样式如图所示: