Python_day20--css之元素选择器、类选择器、id选择器、层级选择器、属性选择器

最新推荐文章于 2025-04-24 18:21:24 发布

原创最新推荐文章于 2025-04-24 18:21:24 发布 · 813 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了CSS的基本概念，重点讲解了元素选择器、类选择器、ID选择器、层级选择器和属性选择器的用法，通过实例帮助读者掌握CSS样式设置的原理和技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是CSS

1、概念

层级样式表(英文全称：Cascading Style Sheets)是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 ^[1]

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 ^[2]

注意：我们在处理文本样式时遵循的原则是：就近原则；譬如说，当我们在style样式中和在<h1>中本身都设置了样式，那么电脑会优先选择距离这段文本近的样式来处理

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <style>
    h1{
        color: black;
    }

    </style>

</head>
<body>


<h1 style="color: dodgerblue">this is text</h1>


</body>
</html>

注意这里是就近原则

2、css的三种引入方式

行内引入(在标签里面style="xxxx"进行引入的)
内部引入(在head标签里面的style标签引入符瑞)
外部引入(将css样式独立为一个专门的文件)

二、元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身;

“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_CSS样式使用案例</title>
    <!--css样式分离的第一种方法: 写在页面的head标签里面-->
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-color: bisque;
            text-align: center;

        }

        span {
            font-size: 20px;
            color: blueviolet;

        }
        h1{
            color: dodgerblue;
        }

        p{
            font-size: x-large;
            color: greenyellow;
        }
    </style>
</head>
<body>


<h1>this is text</h1>

<div>

    hello python
</div>


<div>

    hello python
</div>

<div>

    hello python
</div>


<span>
    hello java
</span>

<p>hello baozi</p>
<span>
    hello C++
</span>


</body>
</html>

三、类选择器

1、概念

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

我们在引入时是以“.”开头来引入样式的

2、例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <style>
    h1{
        color: black;
    }

    .aaa{
        background-color: greenyellow;
    }

    .bbb{
        background-color: dodgerblue;
        font-size: x-large;

    }

    .ccc{
        width: 40%;
        height: 50px;
        background-color: aqua;
    }

    </style>

</head>
<body>


<h1 style="color: dodgerblue">this is text</h1>

<h1 class="aaa">this is text 2</h1>

<p class="bbb">
    hello python
</p>

<a class="ccc">
    hello world

</a>

</body>
</html>

四、ID选择器

1、概念

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

2、例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <style>
    #h1{
        color: black;
    }

    #aaa{
        background-color: greenyellow;
    }

    #bbb{
        color: dodgerblue;
        font-size: x-large;

    }

    #ccc{
        width: 40%;
        height: 50px;
        color: aqua;
        font-size: x-large;
    }

    </style>

</head>
<body>


<h1 style="color: dodgerblue">this is text</h1>

<h1 id="h1">this is text 2</h1>

<p id="aaa">
    hello python
</p>

<a id="bbb">
    曾以为我会忘了你，象忘记一颗夏夜的星。以为我会恨你发誓不再提起你，然而一切只是自欺欺人。
    曾经因为你而爱上这个网络，海誓山盟相邀共赴红尘。到最后你终不肯走进我的生活，每次都是惊鸿一瞥然后人间蒸发。
    如此这般循环往复了三年，我终在佛祖前发下重誓：此生永不复见。

</a>
<br>
<br>
<br>

<span id="ccc">
    紫陌红尘，蓦然回首。多少的春花秋月;多少的逝水沉香;多少的海誓山盟，如沿途的风景花开花谢。
    人世间的情缘触痛了多少无言的感慨，情深缘浅的风吹散了多 少相聚离散。花开是有情，花落是无意。
    来者是萍水相逢，去者是江湖相忘。缘起时，我在人群中看到你。缘灭时，你消失在人群中。
</span>

</body>
</html>

五、层级选择器

IDE会逐层向下寻找，直到找到最底层的标签；就好比下面的例字：我们要找得是<table>下的<img>标签，对其进行格式上的改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_CSS其他选择器之层级选择器</title>

    <style>
        table img{

            width: 202px;
            height: 160px;

        }
    </style>

</head>
<body>

<div>
    <p>hello</p>
    <img  class="out_img" id="out_img1" src="img/01_logo.png">
</div>


<!--两行两列的表格-->
<table width="80%" cellpadding="8px" border="1px">
    <caption>表信息</caption>
    <tr>
        <td>主机名</td>
        <td>IP地址</td>
    </tr>
    <tr>
        <td><p>www.baidu.com</p></td>
        <td><img src="img/01_logo.png"></td>
    </tr>
</table>




</body>
</html>

六、属性选择器

对带有指定属性的 HTML 元素设置样式。

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_CSS属性选择器</title>
    <style>
        /*<!--属性选择器-->*/
        input[type="text"]{
            width: 300px;
            background-color: #E0E0E0;
        }


        input[name="passwd"]{
            width: 350px;
            background-color: aliceblue;
        }

        input[type="submit"]{
            background-color: darkseagreen;
        }

        div[class="hello"]{
            /*border: 1px solid red;*/
            margin: auto;
            aligin: center;

        }
    </style>

</head>
<body>


<div style="width: 80%" class="hello" id="he">
    <h3>用户登录</h3>
    <form action="#" method="get">

        用户名:<input type="text" name="username"><br/><br/>
        密码: <input type="password" name="passwd"><br/><br/>

        <input type="submit" value="登陆">
    </form>
</div>

</body>
</html>