文章目录
- 1. `*` universal selector,
- 2. type selector
- 3. class selector: 点号 + 类名:
- 4. id selector: # 符号 + id 名称,
- 5. direct child selector
- 6. Siblings selector 兄弟选择器
- 7. pseudo class selector
- 8. 与元素在页面上位置相关的 pseudo class selector
- 9. `not()`
- 10. pseudo elements selector 伪元素选择器
- 10.3 `::first-letter`
- 11. attribute selector
油鹳上的视频笔记:
在 jsbin.com 网站上可以十分方便地进行 HTML / CSS 测试。
1. *
universal selector,
通用选择器 / 全体选择器。
选择页面上的每一个元素,包括: body
div
span
ul
li
… 等等全部元素,例如选择页面上全部元素并设背景色为red:
* {
background: red;
}
2. type selector
可选择某一类型的元素,例如: 全部的 div
,全部的 span
等等,下面的 CSS 选择所有的 div
,并设置背景色为 red:
div {
background: red;
}
2.1 如果要选择多种不同类型
类型之间要用 逗号 隔开不同的元素,例如,设置所有 li
和 div
的背景色为蓝色:
div, li {
background: blue;
}
2.2 设置所有 span,以及 class 为 “red” 的 li 背景色为red:
span, li.red {
background: red;
}
2.3 选择元素内部的元素,即子元素
使用 空格 隔开具有层级关系元素。
2.3.1 设置所有 ul
内的 li
背景色为 green:
ul li {
background: green;
}
2.3.2 设置 div
内的 p
背景色为 yellow,嵌套多少层无关紧要,只要是在 div
元素内部就可以。
div p {
background: yellow;
}
2.3.3 选择 div
内class为div-inside
的元素并设置背景色:
div .div-inside {
background: lightgreen;
}
3. class selector: 点号 + 类名:
类选择器非常灵活,可任意选择元素,是使用最广泛的选择器。
.red {
background:red;
}
3.1 type selector + class selector
选择具有某种 class 属性的某种元素,例如,选择所有class
为red
的div
: 写法为 div.red
, 中间不能有空格。
div.red {
background: red;
}
3.2 type selector + 多个 class
写法举例:
div.red.white.green {
background: red;
color: white;
border: 2px solid green;
}
4. id selector: # 符号 + id 名称,
#blue {
background:blue;
}
关于 id
属性: 一个页面上 id
可以设置多次,但每个 id
都必须唯一:
<!-- 写法正确 -->
<h2 id="C1">Chapter 1</h2>
<h2 id="C2">Chapter 2</h2>
<h2 id="C3">Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>
<!-- 错误! C4 重复了若干次 ! -->
<h2 id="C4">Chapter 1</h2>
<h2 id="C4">Chapter 2</h2>
<h2 id="C4">Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>
也因为这个原因,一个 id
选择器只能选择页面上的一个元素,id 选择器不是很常用。
5. direct child selector
选择所有的孩子用空格,不限制嵌套级数。但是选择直接孩子用大于号 >
:
body > p {
background: pink;
}
6. Siblings selector 兄弟选择器
不管是所有兄弟还是直接兄弟都是指的某一元素***后面***的元素,前面的不算。
6.1 选择某一元素的所有兄弟,用 ~
符号
选择 class 为 red 的 li 之后 的所有兄弟 li
。 所以 Item 1
虽然同为 Item 2
的兄弟,但是并没有匹配到:
li.red ~ li {
background: red;
}
6.2 选择某一元素的直接兄弟,用 +
符号
类似于上例,但是此时匹配到的兄弟只有一个,紧跟 li.red
即 Item 2
后面 的 li
即Item 3
,
li.red + li {
background: red;
}
同理,下面的css没有匹配到任何元素,因为 Item 2
的直接兄弟 Item 3
并没有 green
属性:
li.red + li.green {
background: green;
}
7. pseudo class selector
伪类选择器也是重要的选择器。伪类选择器基于用户如何同页面交换而对元素进行样式设定。
伪类选择器在选择的元素后面加 冒号。
7.1 hover
(悬停)举例
下面的例子,光标移动到任何一个li
上, li
的背景色就变为 green
(cursor 在截图中没有体现出来).
li:hover {
background: green;
cursor: not-allowed;
}
7.2 input focus
(获得焦点)举例
如果鼠标点击 input
元素,input
将获得焦点变成输入状态,背景色同时变为设置的 lightgreen
:
input:focus {
background: lightgreen;
}
7.2 button focus
举例
表单的 input
和 button
元素最常用到 focus
:
button {
display: block;
}
button:focus {
background: purple;
color: white;
}
7.3 required
下面的 css 选择具有required
属性的 input
元素并设置背景色为 lightblue
:
input:required {
background:lightblue;
}
7.4 checked
, 应用于checkbox:
下面的例子,由于复选框的背景色无法修改,所以设置勾选时复选框变大,反之亦然。
input:checked{
transform: scale(6);
margin: 100px;
}
7.5 disabled
以 checkbox 为例, disabled属性为true时放大复选框:
8. 与元素在页面上位置相关的 pseudo class selector
8.1 first-child
指的是 容器内的第1个子元素。
下面的css 匹配 ul
的第1个 li
,即 Item 1
:
li:first-child {
background: pink;
}
相比之下,下面的css不会匹配任何元素,因为li.red
是ul
的第2个孩子,不是第1个孩子 first-child
。不会选择匹配css的第1个元素,一定要是 first child。
li.red:first-child {
background: pink;
}
8.2 last-child
和 first-child
相似,选择最后一个 child:
li:last-child {
background: red;
}
8.3 nth-child
需要传递参数,参数可以为公式:
nth-child(3)
选择第 3 个 child 元素
nth-child(2n)
选择所有第 偶数 个 child 元素
nth-child(2n-1)
选择第 奇数 个 child 元素
nth-child(4n)
选择第 4,8, 12… 个 child 元素
依此类推。
下面的例子,选择第 3, 6, 9…个 li
并设置背景色:
li:nth-child(3n) {
background: lightgreen;
}
8.3 nth-last-child
与 nth-child
类似,只是 自底向上 开始数,方向相反:
li:nth-last-child(2n-1) {
background: lightgreen;
}
8.4 only-child
与前面的选择器类似,选择是容器内是唯一 child 的元素:
div:only-child, p:only-child,
span:only-child {
background: red;
}
8.5 first-of-type
顾名思义,容器内指定类型的第1个元素:
span:first-of-type {
background: red;
}
8.5 last-of-type
与first-of-type
类似,容器内指定类型的最后1个元素:
li:last-of-type {
background: blue;
}
8.6 nth-of-type
与 nth-child
类似,可传参数
8.7 nth-last-of-type
8.8 only-of-type
The :only-of-type CSS pseudo-class represents an element that has no siblings of the same type.
指定类型的元素如果没有相同类型的兄弟:
9. not()
取反。
下面的 css 选择全部没有 class 为 green
的 li
元素:
li:not(.green) {
background: yellow;
}
10. pseudo elements selector 伪元素选择器
10.1 ::before
例子:
div.red::before {
content:'BEFORE';
background: red;
}
10.2 ::after
例子:
div.red::after {
content:'After...........';
background: red;
}
10.3 ::first-letter
MDN 上的例子,实现全文第1个段落首字母大写:
h2 + p
指的是 h2
的直接兄弟,即全文第一个段落:
p {
width: 500px;
line-height: 1.5;
}
h2 + p::first-letter {
color: white;
background-color: black;
border-radius: 2px;
box-shadow: 3px 3px 0 red;
font-size: 250%;
padding: 6px 3px;
margin-right: 6px;
float: left;
}
11. attribute selector
例子, text-must-be-white
是一个随意写的属性,css里此属性名称要放在***方括号***内,
( 此属性可以有值,可以check是否匹配等,但估计不怎么会用到,就不写了。)
[text-must-be-white] {
background:green;
color:white;
}