学习目标
- 掌握记住选择器写法
- 掌握常见伪类伪元素的用法
CSS选择器
CSS 选择器用于定位我们想要给予样 式的 HTML 元素。
一、选择器分类
1.1、元素选择器(标签选择器)
p {
color: red;
}
div {
color:
}
1.2、 ID选择器
<p id=”box”>饥人谷</p>
<style>
#box {
border: 1px solid red;
}
</style>
1.3、 类选择器
<p class=“box active”>饥人谷</p>
<style>
.active {
font-size: 20px;
}
</style>
1.4、通用选择器
* {
box-sizing: border-box;
}
.box * {
font-size: 24px;
}
1.5、属性选择器
[attr] 选择包含 attr 属性的所有元素,不论 attr 的值为 何。
- [attr=val] 仅选择 attr 属性被赋值为 val 的所有元素。
[disabled] {
border: 1px solid #ccc;
}
[data-color=“gray”] {
color: #666;
}
二、选择器分类
2.1、不常用的属性选择器
[attr~=val] 仅选择 attr 属性的值(以空格间隔出多个值) 中有包含 val 值的所有元素,比如位于被空格分隔的多个 类(class)中的一个类。
- [attr*=val] 选择 attr 属性的值中包含字符串 val 的元素。
- [attr^=val] 选择 attr 属性的值以 val 开头(包括val)的 元素。
- [attr$=val] 选择 attr 属性的值以 val 结尾(包括val)的 元素。
- [attr|=val] 选择 attr 属性的值是val或以 val-开头的元素 (-用来处理语言编码)。
<head>
<style>
[class~="aa"] {
/* 中间有空格 */
color: red;
}
[href*="jirengu.com"] {
/* 包含jirengu.com */
font-size: 30px;
}
[data-name^="jirengu-fe"] {
/* 以jirengu-fe开头 */
color: grey;
}
[data-name$="1"] {
/* 以1结尾 */
background: pink;
}
[data-name|="jirengu"] {
font-size: 50px;
}
</style>
</head>
<body>
<div class="aa bb cc">hello</div>
<div href="https://jirengu.com/ddd">jirengu</div>
<p data-name="jirengu-fe1">fe1</p>
<p data-name="jirengu-fe1">fe2</p>
<p data-name="jirengu-java1">java1</p>
2.2、组合选择器
2.2.1、A, B (逗号后面空不空格无所谓)
A, B 同时选中A 和 B
<p class=“author”>饥人谷</p>
<p class=“detail”>求知若饥 虚心似谷</p>
<style>
.author, .detail {
color: red;
}
</style>
2.2.2、A B (A后面要空格)
选中A的后代B元素,注意A和B之间有个空格
<ul class=”detail”>
<li>
<ul>
<li>aaa</li>
</ul>
</li>
<li>bbb</li>
</ul>
<style>
.detail li {
border: 1px solid red;
}
</style>
2.2.3、A > B
选中A 的直接子元素B (只有bbb有效果)
<ul class=”detail”>
<li>
<ul>
<li>aaa</li>
</ul>
</li>
<li>bbb</li>
</ul>
<style>
.detail > li {
border: 1px solid red;
}
</style>
2.2.4、A + B
选中A 的下一个相邻元素B
.cavs .lbj + li {
text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
<li class="lbj">勒布朗·詹姆斯</li>
<li>凯里·欧文</li><!-- ✅ -->
<li>凯文·乐福</li>
</ul>
2.2.5、A ~ B
选中A 的后面全部相邻元素B
.cavs .lbj ~ li {
text-shadow: 1px 1px 5px #ccc;
}
<ul class="cavs">
<li class="lbj">勒布朗·詹姆斯</li>
<li>凯里·欧文</li><!-- ✅ -->
<li>凯文·乐福</li><!-- ✅ -->
</ul>
三、伪元素和伪类
3.1、伪类/:pseudo-class-name
:pseudo-class-name
伪类是一个选择器,用来选择处于特定状态的元素。
- 比如某种类型元素的第一个、元素的鼠标放置上的 状态
- 类似于给元素加了个额外的class
3.2、伪类/first-child
作为自己父亲的第x个孩子
first-child 、last-child、nth-child(n)
<div class="box">
<h2>标题</h2><!--红色-->
<p>饥人谷</p><!--粉色-->
<p>前端</p><!--蓝色-->
</div>
<style>
.box :first-child {
color: red;
}
.box :last-child {
color: blue;
}
.box :nth-child(2) {
color: pink;
}
</style>
3.3、伪类/first-of-type
作为自己父亲当前标签类型的第x个孩子
first-of-type、last-of-type、nth-of-type(n)
<div class="box">
<h2>标题</h2><!--红色-->
<p>饥人谷</p><!--红色-->
<p>前端</p><!--蓝色-->
</div>
<style>
.box :first-of-type{
color: red;
}
.box :nth-of-type(2) {
color: blue;
}
</style>
3.4、伪类
• :link
ü 选中未访问的链接
• :hover
ü 选中鼠标放置上的链接
• :active
ü 选中鼠标按下未松开时的链接
• :visited
ü 选中访问过的链接
• 顺序 ü :link - :visited - :hover - :active
更多伪类
• :checked
ü 选中被勾选的表单元素
• :disabled
ü 选中被禁用的表单元素
• :focus
ü 选中被激活的表单元素
• :root
ü 选中根节点<html>
:target
选中页面上id为当前hash的元素
ü 实战1
• 不使用JS实现一个Tab切换 http://js.jirengu.com/fikan
ü 实战2 • 不使用JS实现弹框 http://js.jirengu.com/neyul
• :not(xx)
选中不为xx的元素
<div class="box">
<h2>标题</h2><!--红色-->
<p class="active">饥人谷</p>
<p>前端</p><!--红色-->
</div>
<style>
.box :not(.active){
color: red;
}
</style
3.5、伪元素
::pseudo-element-name
- 其表现像给元素里加了个标签,而不类似于给元素加 class
- 早期的伪元素也使用两个点 : ,现代浏览器支持早期用 法
::before、 ::after(经常用到)
- 在元素内插入一段内容,作为元素的第一个/最后一个 孩子
- 必须有 content 属性
- 常用来替代图标、无实际意义的标签
<div class="box">
<p>饥人谷</p>
</div>
<style>
.box::before {
content: '欢迎到';
}
.box::after {
content: '学前端';
}
</style>
::first-line
选中段落的第一行
::first-letter
选中段落的第一个字符
::selection
匹配被鼠标选中的文字内容
四、其它
- 伪元素早期是两个点 : ,现在标准写法是四个点 : :
- 伪类是表示给元素加了个状态
- 伪元素更像是给元素加了个标签