Web基础关键_003_CSS（一）

发布于：2025-06-28 ⋅ 阅读:(14) ⋅ 点赞:(0)

目  录

一、概述

二、选择器

1.基本选择器

（1）标签选择器（元素选择器、类型选择器）

（2）类选择器 

（3）id 选择器

（4）全局选择器

2.属性选择器

（1）p[id]

（2）p[id="i1"]

（3）p[id~="i1"]

（4）p[class|="c3"]

3.子字符串匹配选择器

（1）p[class^="c3"]

（2） p[id$="2"]

（3）p[id*="i"]

4.忽略大小写匹配

5.伪类选择器

（1）说明

（2）普通伪类选择器

（3）行为伪类选择器

6.关系选择器

（1）交集选择器 

（2）并集选择器

（3）后代选择器

（4）子代选择器

（5）兄弟选择器

一、概述

  1. Cascading Style Sheets，层叠样式表。是一种样式表语言，用来描述 HTML 或 XML 文档的呈现方式；
  2. 将文档结构和样式控制分离，可以降低代码冗余、提高代码可读性；
  3. 包含：
    1. 选择器：对页面标签进行选择；
    2. 属性；
    3. 值。
  4. 语法格式：【选择器 { 属性:值}】；
  5. 非语义化标签：
    1. div：块级标签；
    2. span：行级标签。

二、选择器

1.基本选择器

（1）标签选择器（元素选择器、类型选择器）

<html>

<head>
    <title>Test CSS</title>
    <style>
        h1 {
            text-align: center;
        }

        p {
            font-family: 楷体;
            font-size: 20px;
            color: darkcyan
        }

        strong {
            color: indianred;
        }

        em {
            color: lightpink;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p>再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p>再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p>再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p>慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p>再低的感光度，也降低不了我对你的思念</p>
    <p>再长的焦距，也拉不近你我的距离</p>
</body>

</html>

（2）类选择器 

        将多个元素划分为一类，使其具有相同的效果。

<html>

<head>
    <title>Test CSS</title>
    <style>
        .c1 {
            font-family: 楷体;
            font-size: 20px;
            color: lightpink;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p class="c1">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p>再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p>慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p>再低的感光度，也降低不了我对你的思念</p>
    <p class="c1">再长的焦距，也拉不近你我的距离</p>
</body>

</html>

（3）id 选择器

         虽然 id 选择器可以作用于多个标签，但是建议只将其作用于一个标签。

<html>

<head>
    <title>Test CSS</title>
    <style>
        #i1 {
            color: aqua;
        }

        #i2 {
            color: blueviolet;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p id="i1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p id="i2">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p>再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p>慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p>再低的感光度，也降低不了我对你的思念</p>
    <p>再长的焦距，也拉不近你我的距离</p>
</body>

</html>

（4）全局选择器

<html>

<head>
    <title>Test CSS</title>
    <style>
        * {
            font-family: "Arial";
            color: deepskyblue;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p id="i1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p id="i2">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p>再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p>慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p>再低的感光度，也降低不了我对你的思念</p>
    <p>再长的焦距，也拉不近你我的距离</p>
</body>

</html>

2.属性选择器

（1）p[id]

        匹配任何有 id 属性的选择器

<html>

<head>
    <title>Test CSS</title>
    <style>
        p[id] {
            font-family: 楷体;
            font-size: 20px;
            color: lightpink;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p class="c3-a">再低的感光度，也降低不了我对你的思念</p>
    <p class="c3-b">再长的焦距，也拉不近你我的距离</p>
</body>

</html>

（2）p[id="i1"]

       匹配 id="i1" 的选择器。

<html>

<head>
    <title>Test CSS</title>
    <style>
        p[id="i1"] {
            font-family: 楷体;
            font-size: 20px;
            color: lightpink;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p class="c3-a">再低的感光度，也降低不了我对你的思念</p>
    <p class="c3-b">再长的焦距，也拉不近你我的距离</p>
</body>

</html>

（3）p[id~="i1"]

        匹配 id 值包含 i1，并以空格分隔的选择器。

<html>

<head>
    <title>Test CSS</title>
    <style>
        p[id~="i1"] {
            font-family: 楷体;
            font-size: 20px;
            color: lightpink;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p class="c3-a">再低的感光度，也降低不了我对你的思念</p>
    <p class="c3-b">再长的焦距，也拉不近你我的距离</p>
</body>

</html>

（4）p[class|="c3"]

        匹配 class 值以 c3 开头并以连字符连接的选择器。

<html>

<head>
    <title>Test CSS</title>
    <style>
        p[class|="c3"] {
            font-family: 楷体;
            font-size: 20px;
            color: lightpink;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p class="c3-a">再低的感光度，也降低不了我对你的思念</p>
    <p class="c3-b">再长的焦距，也拉不近你我的距离</p>
</body>

</html>

3.子字符串匹配选择器

（1）p[class^="c3"]

        匹配 class 属性值中，任何以 c3 开头的选择器。

<html>

<head>
    <title>Test CSS</title>
    <style>
        p[class^="c3"] {
            font-family: 楷体;
            font-size: 20px;
            color: lightpink;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p class="c3a">再低的感光度，也降低不了我对你的思念</p>
    <p class="c3b">再长的焦距，也拉不近你我的距离</p>
</body>

</html>

（2） p[id$="2"]

        匹配 id 属性值中，任何以 2 结尾的选择器。

<html>

<head>
    <title>Test CSS</title>
    <style>
        p[id$="2"] {
            font-family: 楷体;
            font-size: 20px;
            color: lightpink;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p class="c3a">再低的感光度，也降低不了我对你的思念</p>
    <p class="c3b">再长的焦距，也拉不近你我的距离</p>
</body>

</html>

（3）p[id*="i"]

        匹配 id 属性值中，任何包含 i 的选择器 

<html>

<head>
    <title>Test CSS</title>
    <style>
        p[id*="i"] {
            font-family: 楷体;
            font-size: 20px;
            color: lightpink;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p id="i1">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p id="i1 c2">再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p id="i2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p class="c3a">再低的感光度，也降低不了我对你的思念</p>
    <p class="c3b">再长的焦距，也拉不近你我的距离</p>
</body>

</html>

4.忽略大小写匹配

<html>

<head>
    <title>Test CSS</title>
    <style>
        /* p[class^="c"] {
            font-family: 楷体;
            font-size: 20px;
            color: lightpink;
        } */

        p[class^="C" i] {
            font-family: 黑体;
            font-size: 40px;
            color: lightskyblue;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
    <p class="C1">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
    <p class="c2">再快的快门，也捕捉不到<em>你对我的爱</em></p>
    <p class="C2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
    <p class="c3">再低的感光度，也降低不了我对你的思念</p>
    <p class="C3">再长的焦距，也拉不近你我的距离</p>
</body>

</html>

5.伪类选择器

（1）说明

  1. 伪类是选择器的一种，它用于选择处于特定状态的元素。如当它们是这一类型的第一个元素时，或当鼠标指针悬浮在元素上时。它们表现像是向文档的某个部分应用了一个类一样，帮助在标记文本中减少多余的类，让代码更灵活、更易于维护；

  2. 伪类就是开头为冒号的关键字；

  3. 伪类如下：

选择器 示例说明
:checked 选择所有选中的表单元素
:disabled 选择所有禁用的表单元素
:empty 选择所有没有子元素的p元素
:enabled 选择所有启用的表单元素
:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
:in-range 选择元素指定范围内的值
:invalid 选择所有无效的元素
:last-child 选择所有p元素的最后一个子元素
:last-of-type 选择每个p元素是其母元素的最后一个p元素
:not(selector) 选择所有p以外的元素
:nth-child(n) 选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n) 选择所有p元素倒数的第二个子元素
:nth-last-of-type(n) 选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n) 选择所有p元素第二个为p的子元素
:only-of-type 选择所有仅有一个子元素为p的元素
:only-child 选择所有仅有一个子元素的p元素
:optional 选择没有"required"的元素属性
:out-of-range 选择指定范围以外的值的元素属性
:read-only 选择只读属性的元素属性
:read-write 选择没有只读属性的元素属性
:required 选择有"required"属性指定的元素属性
:root 选择文档的根元素
:target 选择当前活动#news元素(点击URL包含锚的名字)
:valid 选择所有有效值的属性
:link 选择所有未访问链接
:visited 选择所有访问过的链接
:active 选择正在活动链接
:hover 把鼠标放在链接上的状态
:focus 选择元素输入后具有焦点
:first-letter 选择每个<p> 元素的第一个字母
:first-line 选择每个<p> 元素的第一行
:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before 在每个<p>元素之前插入内容
:after 在每个<p>元素之后插入内容
:lang(language) 为<p>元素的lang属性选择一个开始值

（2）普通伪类选择器

<html>

<head>
    <title>Test CSS</title>
    <style>
        /* 将第一个<p>标签设置格式 */
        p:first-child {
            color: pink;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>用快门定格瞬间，用光影捕捉生活</h1>
    <div>
        <p class="c1">再大的光圈，也虚化不了<strong>现实的无奈</strong></p>
        <p class="C1">再小的光圈，也清晰不了<strong>人生的百态</strong></p>
        <p class="c2">再快的快门，也捕捉不到<em>你对我的爱</em></p>
    </div>
    <div>
        <p class="C2">慢门能够捕捉到车流的光轨，却难以留下<em>你离开的身影</em></p>
        <p class="c3">再低的感光度，也降低不了我对你的思念</p>
        <p class="C3">再长的焦距，也拉不近你我的距离</p>
    </div>
</body>

</html>

（3）行为伪类选择器

<html>

<head>
    <title>Test CSS</title>
    <style>
        /* 初始蓝色 */
        a:link {
            color: blue;
        }

        /* 鼠标移入时变成红色 */
        a:hover {
            color: red;
        }

        /* 鼠标点击变成绿色 */
        a:active {
            color: green;
        }

        /* 点击过后变成粉色 */
        a:visited {
            color: pink;
        }
    </style>
</head>

<body>
    <a href="https://baidu.com">百度一下我知道</a>
</body>

</html>

6.关系选择器

（1）交集选择器 

<html>

<head>
    <title>Test CSS</title>
    <style>
        p.c {
            color: pink;
        }
    </style>
</head>

<body>
    <span class="c">何为喜欢？</span>
    <p class="c">一见你，就笑的人；</p>
    <p id="i">一见，你就笑的人。</p>
</body>

</html>

（2）并集选择器

<html>

<head>
    <title>Test CSS</title>
    <style>
        p,
        .c {
            color: pink;
        }
    </style>
</head>

<body>
    <span class="c">何为喜欢？</span>
    <p class="c">一见你，就笑的人；</p>
    <p id="i">一见，你就笑的人。</p>
</body>

</html>

（3）后代选择器

<html>

<head>
    <title>Test CSS</title>
    <style>
        ul li {
            color: coral;
        }
    </style>
</head>

<body>
    <ul>
        <li>炒菜</li>
        <ol>
            <li>宫保鸡丁</li>
            <li>红烧茄子</li>
        </ol>
        <li>凉菜</li>
        <li>主食</li>
        <ol>
            <li>米饭</li>
            <li>面条</li>
        </ol>
    </ul>
</body>

</html>

（4）子代选择器

<html>

<head>
    <title>Test CSS</title>
    <style>
        ul>li {
            color: coral;
        }
    </style>
</head>

<body>
    <ul>
        <li>炒菜</li>
        <ol>
            <li>宫保鸡丁</li>
            <li>红烧茄子</li>
        </ol>
        <li>凉菜</li>
        <li>主食</li>
        <ol>
            <li>米饭</li>
            <li>面条</li>
        </ol>
    </ul>
</body>

</html>

（5）兄弟选择器

<html>

<head>
    <title>Test CSS</title>
    <style>
        /* 邻接兄弟选择器 */
        /* h3+p {
            color: coral;
        } */

        /* 通用兄弟选择器 */
        h3~p {
            color: blue;
        }
    </style>
</head>

<body>
    <h3>你是我触碰不到的风，醒不来的梦</h3>
    <p>寻不到的天堂，医不好的痛</p>
    <p>点不着的香烟，松不开的手</p>
    <p>忘不了的某某某</p>
    <span>你是我寻觅不到的风，哭不完的红</span>
    <p>说不出的保重，熬不过的冬</p>
    <div>
        <p>忍不住的欢笑，喝不完的酒</p>
    </div>
    <p>愈合不了的伤口</p>

</body>

</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布