影刀高级-CSS

分类RPA时间2026-08-12 19:12:19发布信义之树浏览137

导读：一、CSS引入不用看。二、CSS选择器 1. 可以连着点： 2. 加i不区分大小写 3.*号表示包含 &...

一、CSS引入

不用看。

二、CSS选择器

1. 可以连着点：

2. 加i不区分大小写

3.*号表示包含

4. ^以什么开头

5. $结尾

6. 父子关系

7. 相邻，只向下匹配

8. 同层级标签

9. 伪类和伪元素

test.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport">
    <title>demo</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <div>
            <h1>1</h1>
            <h1>2</h1>
            <h1>3</h1>
        </div>
        <span>
            <h1>4</h1>
            <h1>5</h1>
            <h1>6</h1>
        </span>
        <h1>2</h1>
        <p>7</p>
        <p>8</p>
        <h1>3</h1>
    </div>

<hr>
<hr>
<hr>
<hr>
<hr>



    <div>
        <h1 class="c1">1</h1>
        <h1 class="c2 c3">2</h1>
        <h1 class="c2" id="i1">3</h1>
        <h2 class="c2" id="i1">4</h2>
        <h2 class="c1" id="i2">5</h2>
        <h2 class="c1" data="d00">6</h2>
        <h3 data="d11">7</h3>
        <h3 data="d22">8</h3>
        <h3 data="D22">9</h3>
    </div>
</body>

</html>

https://www.xinyizhishu.top/yingdaoC/test.html

style.css：

[data$='2']{color: red;}


/* 后代选择器 */
/* div>h1{color: greenyellow;} */

/* span+p{color: greenyellow;}  */

/* span~p{color: greenyellow;} */

/* 伪类和伪元素 */

div>h1:last-of-type {color: greenyellow;}

https://www.xinyizhishu.top/yingdaoC/style.css

三、实战练习

1.竖排排列上去的样式