CSS三则

CSS三则

七月 18, 2021

css三则

pointer-events

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target

pointer-events可以为的值

auto

与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同

none

元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

visiblePainted

只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：

  • visibility属性值为visible，且鼠标指针在元素内部，且fill属性指定了none之外的值
  • visibility属性值为visible，鼠标指针在元素边界上，且stroke属性指定了none之外的值

visibleFill

只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill属性的值不影响事件处理。

visibleStroke

只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素边界时,元素才会成为鼠标事件的目标，stroke属性的值不影响事件处理。

visible

只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill和stroke属性的值不影响事件处理。

painted

只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：

  • 鼠标指针在元素内部，且fill属性指定了none之外的值
  • 鼠标指针在元素边界上，且stroke属性指定了none之外的值

visibility属性的值不影响事件处理。

fill

只适用于SVG。只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill和visibility属性的值不影响事件处理。

stroke

只适用于SVG。只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标，stroke和visibility属性的值不影响事件处理。

all

只适用于SVG。只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill、stroke和visibility属性的值不影响事件处理。

参考资料

  1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>pointer-events</title>
</head>

<body>
    <div class="main yoshino" onClick="event.stopPropagation();alert('main')">
        <div class="div1" onClick="event.stopPropagation();alert('div1')">
            <button class="btn1" onClick="event.stopPropagation();alert('btn1')">btn1</button>
        </div>
        <div class="div2" onClick="event.stopPropagation();alert('div2')">
            <button class="btn2" onClick="event.stopPropagation();alert('btn2')">btn2</button>
        </div>
    </div>
</body>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    .main {
        width: 100%;
        height: 800px;
        background-color: #ffc0cb;
        position: absolute;
    }

    .div1 {
        background-color: #ffffff;
        width: 90%;
        height: 200px;
        margin: 50px 5%;
    }

    .btn1 {
        padding: 10px 20px;
        pointer-events: none;
    }

    .div2 {
        background-color: #add7e5;
        width: 90%;
        height: 200px;
        margin: 50px 5%;
        pointer-events: none;
    }

    .btn2 {
        padding: 10px 20px;
        pointer-events: auto;
    }
</style>

</html>

event.stopPropagation()用于取消onClick的冒泡
此时，点击btn1会提示div1，点击div2会提示main，点击btn2会提示btn2

nth-child 选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

参考资料

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
  2. https://www.w3school.com.cn/cssref/selector_nth-child.asp

演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child</title>
</head>

<body>
    <ul class="main">
        <div class="context"></div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }

    .main {
        width: 80%;
        height: 2100px;
        padding: 100px 10%;
        background-color: #999;

    }

    .context {
        width: 100%;
        height: 100px;
        background-color: #ffffff;
    }

    ul li {
        width: 100%;
        height: 100px;
        background-color: #ffffff;
    }

    /* 奇数 首个为1 */
    ul li:nth-child(odd) {
        background-color: #ffdb2e;
    }

    /* 偶数 */
    ul li:nth-child(even) {
        background-color: #ffc0cb;
    }

    /* an + b 从第b个开始每n个 */
    ul li:nth-child(4n+5) {
        background-color: #ffffff;
    }

    ul li:first-child {
        background-color: #add7e5;
    }

    ul li:last-child {
        background-color: #add7e5;
    }
</style>

</html>

这时第一个的颜色为#ffffff，li的第一个并不受first-child，因为此时的第一个为div

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（但这也不一定）

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

默认值： auto
继承性： no
版本： CSS2
JavaScript 语法： object.style.zIndex=”1”

参考资料

  1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index

  2. https://www.w3school.com.cn/cssref/pr_pos_z-index.asp

遇到的坑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>z-index</title>
</head>

<body>
    <div class="z-index-a">
        <div class="z-index-b">
        </div>
    </div>
    <div class="z-index-c"></div>
</body>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    .z-index-a {
        position: absolute;
        z-index: 20;
        width: 100%;
        height: 1000px;
        background-color: #ffc0cb;
    }

    .z-index-b {
        position: absolute;
        z-index: 100;
        width: 80%;
        height: 400px;
        margin: 200px 10%;
        background-color: #ffffff;
    }

    .z-index-c {
        position: absolute;
        z-index: 50;
        width: 500px;
        height: 500px;
        background-color: #add7e5;
    }
</style>

</html>

此时如果按照z-index大小，从前到后b>c>a

但实际情况是c>b>a