CSS 基础
取值单位
外观样式
布局样式
动画样式
工具与规范
实例练习
选择器是什么?
h1 {
color: teal;
background-color: pink;
}
p {
color: green;
}
上面代码中的 h1
与 p
就是选择器,它告诉浏览器将样式分别作用到 h1
元素与 p
元素上。
基本选择器
元素选择器
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/KKyMWBp?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
类选择器
类选择器需要在元素的 class
属性中定义类名,接着在样式中以 .类名 { 样式 }
的语法来定义样式。
以下例子元素的 class
为 title
,通过 .title
选择器修改了元素的颜色。
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/mdqEWov?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
需要注意的是, class
属性值是一个以空格分隔的列表项,这意味着一个元素可以同时定义几个类名。
以下例子中分别用 .title
和 .name
修改了元素的颜色和背景色。
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/MWOepdb?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
ID 选择器
首先在元素的 id
属性中定义值 id
值,接着在样式中以 #id值 { 样式 }
的语法来定义样式。
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/WNXxjeQ?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
属性选择器
CSS 的属性选择器可以根据属性名或值来灵活地匹配元素。
语法 | 描述 |
---|---|
[attr] | 选择有 attr 属性的元素。 |
[attr=value] | 选择有 attr 属性,且值为 value 的元素。ID 选择器 #id值 等价于 [id=id值] 。 |
[attr~=value] | 选择有 attr 属性,且值为以空格分隔,至少一个值为 value。 类选择器 .类名 等价于 [class~=类名] |
[attr|=value] | 选择有 attr 属性,且值为 value 或以 value- 为前缀。 |
[attr^=value] | 选择有 attr 属性,且值为 value 开头的元素。 |
[attr$=value] | 选择有 attr 属性,且值为 value 结尾的元素。 |
[attr*=value] | 选择有 attr 属性,且值包含 value 的元素。 |
[attr operator value i] | 添加字母 i 或 I 表示属性值忽略大小写。例如: [class="title" i] 。 |
[attr operator value s] | 添加字母 s 或 S 表示属性值区分大小写。例如: [class="title" s] 。 |
选择器列表
可以使用 ,
分隔选择器列表,使得列表内的所有选择器同时作用一个样式。
下例中 #head
、 .title
、 .name
三个选择器都应用了样式 color: teal;
。
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/jOarLpE?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
组合选择器
在基本的选择器,都是根据元素自身的属性进行选择。而在组合选择器是中根据元素与其周围元素的关系进行选择。
后代选择器
语法: A B {样式}
后代选择器选择的是祖先元素为 A
的 B
元素。
下例中只有 .container
的子元素 .title
被选中了,修改了颜色,而单独的 .title
元素并没有被修改。
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/QWOEMzw?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
子选择器
语法: A > B {样式}
子选择器选择的是父元素为 A
的 B
元素。
$$tip
子选择器与后代选择器不同的是,后代选择器只要是后代的元素就可以,而子选择器必须是第一级的子元素。
$$
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/vYWKJMQ?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
一般兄弟选择器
语法: A ~ B { 样式 }
一般兄弟选择器选择的是所有与 A
同级的,所有在 A
之后的 B
元素。
下例中选择了所有在 .third
之后的 p
元素:
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/KKyxPNo?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
紧邻兄弟选择器
语法: A + B { 样式 }
紧邻兄弟选择器选择的是与 A
同级的,紧跟在 A
之后的 B
元素。
下例中选择了紧邻在 .third
之后的 <p>
元素:
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/rNYZByo?default-tab=html%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
伪选择器
伪类选择器
伪类用以修改元素特殊状态下的样式,伪类选择器以 :
开头。
以下例子中 h1:hover
表示选中鼠标悬停之上的 <h1>
元素。
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/KKyBLpQ?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
常用的伪类选择器
选择器 | 描述 |
---|---|
:active | 在用户激活(例如长按)元素的时候匹配。 |
:blank | 匹配空输入值的 input 元素。 |
:checked | 匹配处于选中状态的单选或者复选框。 |
:disabled | 匹配处于禁用状态的元素。 |
:focus | 当一个元素有焦点的时候匹配。 |
:hover | 当用户悬浮到一个元素之上的时候匹配。 |
:link | 匹配未曾访问的链接。 |
:root | 匹配文档的根元素。 |
:visited | 匹配已访问链接。 |
:first-child | 匹配兄弟元素中的第一个元素。 |
:last-child | 匹配兄弟元素中的最后一个元素。 |
$$tip
更多伪类选择器建议参考完整的 MDN 伪类选择器列表。
$$
伪元素选择器
伪元素允许我们对被选择元素的特定部分进行修改,伪元素选择器以 ::
开头。
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/YzEjmgK?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
常用的伪元素选择器
选择器 | 描述 |
---|---|
::after | 匹配出现在原有元素的实际内容之后的一个可样式化元素。 |
::before | 匹配出现在原有元素的实际内容之前的一个可样式化元素。 |
::first-letter | 匹配元素的第一个字母。 |
::first-line | 匹配包含此伪元素的元素的第一行。 |
::selection | 匹配文档中被选择的那部分。 |
$$tip
更多伪元素选择器建议参考完整的 MDN 伪元素选择器列表与伪元素索引。
$$
多个选择器约束
如果将多个选择器写在一起,匹配的元素必须同时满足多个选择器的约束条件。
例:
- p.title:选中元素类型为 p 且 class="title" 的元素
- span#line.head:选中元素类型为 span 且 id="line" 且 class="head" 的元素
- div#idx[class="box"]:选中元素类型为 div 且 id="idx" 且 class="box” 的元素
<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/PoOXxNz?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>
练习
1.根据描述 写出下列的选择器。
1. 选择所有的 <span> 元素
2. 选择 class="name" 的元素
3. 选择 id="title" 的元素
4. 同时选择所有的 <p> 元素和 <span> 元素
5. 选择 class="head" 元素下的所有 class="link" 的元素
6. 选择紧邻 class="link" 元素之后的 <a> 元素
$$answer
1. span
2. .name
3. #title
4. p, span
5. .head .link
6. .link + a
$$
2.实现以下效果,鼠标移动到文本上时文本变大。
$$demo
<p>三眼鸭的编程教室</p> <style> p{
height: 48px;
line-height: 48px;
} p:hover { font-size: 36px; } </style>
$$
$$answer
<p>三眼鸭的编程教室</p>
<style>
p:hover {
font-size: 36px;
}
</style>
$$
3.实现以下效果。
$$demo
<p>三眼鸭的编程教室</p>
<style>
p::first-letter {
font-size: 26px;
font-weight: bold;
color: teal;
}
</style>
$$
$$answer
<p>三眼鸭的编程教室</p>
<style>
p::first-letter {
font-size: 26px;
font-weight: bold;
color: teal;
}
</style>
$$