单行文字省略号显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <style>
div {
width: 100px;
background-color: pink;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<div>
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
</div>
|
多行行文字省略号显示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <style>
div {
width: 100px;
height: 100px;
background-color: pink;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
</style>
<div>
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
</div>
|
行内非替换元素的特殊性
行内非替换元素：span、a、string、i等
padding
1
2
3
4
5
6
7
8
9
10
11
| <style>
.content {
padding: 30px;
background-color: red;
}
</style>
<span class="content">测试内容</span>
测试内容之后
<div>
div的内容
</div>
|
给span标签设置padding，在浏览器打开，看上去span盒子被撑开了，实则padding-top/padding-bottom仅仅是呈现出来，并未生效。
即：行内非替换元素的padding-top和padding-bottom不占据空间，左右padding会占据空间
border
上下会被撑起来，但是不占据空间
1
2
3
4
5
6
7
8
9
10
11
| <style>
.content {
border: 30px solid rgba(0, 0, 0, .5);
background-color: red;
}
</style>
<span class="content">测试内容</span>
测试内容之后
<div>
div的内容
</div>
|
margin
margin上下不生效，左右生效
1
2
3
4
5
6
7
8
9
10
11
| <style>
.content {
margin: 30px;
background-color: red;
}
</style>
<span class="content">测试内容</span>
测试内容之后
<div>
div的内容
</div>
|
结构伪类选择器
:nth-child()
:nth-child(关于n的表达式)
n是自然数，从0开始，n是固定的，不能写为其他字母；表达式也可以是一个常数；元素的索引从1开始
例如：1表示第一个元素，2n（even）表示第偶数个元素，2n+1（odd）表示第奇数个元素，-n + 5 表示前五个元素
示例
1
2
3
4
5
6
7
8
9
10
11
12
13
| <style>
ul li:nth-child(2n) {
color: red;
}
</style>
<ul>
<li>内容1</li>
<span>内容2</span>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
</ul>
|
说明：ul li:nth-child(2n)的选择方式：先将ul中的所有偶数个子元素选择，再依次判断被选中的子元素是否为li标签
:nth-last-child()
对比于:nth-child，**:nth-child()是从前往后数；:nth-last-child是从后往前数**
:nth–last-child(关于n的表达式)
n是自然数，从0开始，n是固定的，不能写为其他字母；表达式也可以是一个常数；
例如：1表示最后一个元素，2n（even）表示倒数偶数个元素，2n+1（odd）表示倒数奇数个元素，-n + 5 表示后五个元素
:nth-of-type()
与:nth-child()，不同点是该结构伪类选择器只计算同种类型的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <style>
.ul>li:nth-of-type(2) {
color: red;
}
</style>
<ul class="ul">
<li>内容1</li>
<span>内容2</span>
<li>
内容3
</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
</ul>
|
在上述代码中，“内容3”将被渲染为红色
其他结构伪类
:first-child
等同于:nth-child(1)
:last-child
等同于:nth-last-child(1)
:first-of-type
等同于:nth-of-type(1)
:last-of-type
等同于:nth-last-of-type(1)
:only-child
父元素中唯一的子元素
1
2
3
4
5
6
7
8
9
10
11
12
13
| <style>
.box div:only-child {
color: red;
}
</style>
<div class="box">
<div>内容1</div>
</div>
<div class="box">
<div>内容2</div>
<div>内容3</div>
<div>内容4</div>
</div>
|
“内容1”将被渲染为红色
:only-of-type，是父元素中唯一的这种类型的子元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <style>
.box :only-of-type {
color: red;
}
</style>
<div class="box">
<div>内容1</div>
<span>内容2</span>
</div>
<div class="box">
<div>内容3</div>
<div>内容4</div>
<span>内容5</span>
</div>
|
“内容1”“内容2”“内容5”将被渲染为红色
:root
根元素，就是html元素
:empty
代表里面完全空白的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
| <style>
.box:empty {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="box"></div>
<div class="box">
<p>
p标签的内容
</p>
</div>
|
以上代码，第一个.box的样式会被应用
:not()
否定伪类
:not(x)
x是一个简单选择器
元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类)