CSS：CSS选择器之【基本选择器】

最新推荐文章于 2024-07-06 20:00:00 发布

李鴻耀同學

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量2.4k

点赞数

分类专栏： CSS 文章标签：类选择器 ID选择器标签选择器属性选择器 css选择器

本文链接：https://blog.csdn.net/Hierarch_Lee/article/details/52605656

版权

CSS 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

概述

CSS选择器的作用是找出某类元素，以便我们使用style元素或者外部样式表对这类元素设置样式。CSS的基础选择器主要有三个：标签选择器、类选择器、id选择器和属性选择器。

通用选择器

通用选择器匹配文档中的所有元素。它是最基本的选择器，不过很少使用，因为匹配过于广泛，不便我们单独去设置某一类特定元素的样式，写法如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        /*通用选择器*/
        * {
            color: red;
        }
    </style>
</head>

<body>
    通用选择器
    <p>通用选择器</p>
    <span>通用选择器</span>
</body>

</html>

上述示例中有三段文本，分别位于body、p、span标签对以内，在内嵌样式中，使用通用选择器设置字体颜色为红色，运行界面你会发现不管位于什么标签对内，字体颜色都为红色。

标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。写法如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        /*标签选择器*/
        p {
            color: red;
        }
    </style>
</head>

<body>

    <a href="http://www.baidu.com">百度</a>
    <p>文本内容</p>
    <p>文本内容</p>
    <span>文本内容</span>
</body>

</html>

上述示例中，我们通过标签选择器为p标签设置了文本字体颜色，故所有p标签下的文本字体颜色都为制定颜色，而其他标签如span和a标签的颜色为系统默认颜色。

类选择器

类选择器（Class选择器）根据类名来选择,而这个类名是自定义的，但我们在定义这个类名的时候也应该尽量能反应被设置元素的实际功能。比如说，我们是用于显示一张图片的，我们可以取名“showImg”；如果是将一个字体字号设置为16像素的，应该取名为“f16”或“fz16”。同一个类名的选择器理论上可以被任意多的标签元素使用。在CSS中，定义类名选择器应该以“.”作为开头，否则，浏览器将视为你自定义的标签名。写法如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        /*类选择器*/
        .text {
            color: red;
        }
    </style>
</head>

<body>
    <p class="text">文本内容01</p>
    <p>文本内容02</p>
</body>

</html>

ID选择器

和类选择器一样，名称也是自定义的，命名原则也应该尽量能反应该元素的实际功能，或者一些唯一的特质。但它和Class的不同，它应该是页面里唯一的，即同一个页面内只能出现一个ID，否则，不仅违反了ID命名的基本规则，也会在JS（其它JS框架皆是如此）进行操作时，始终都只能获取到第一个ID，之后的相同ID的元素则不会生效。定义一个ID选择器应该以“#”开头。写法如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        /*ID选择器*/
        #text {
            color: red;
        }
    </style>
</head>

<body>
    <p id="text">文本内容01</p>
    <p>文本内容02</p>
</body>

</html>

属性选择器

该选择器所针对的既不是某个标签，也不是类名，或者ID，它是将一个标签的属性作为选择器来使用，最常用的地方就是涉及到属性多而杂的表单元素。该类选择器的条件如下：

1、[attr]：选择定义attr属性的元素，忽略属性值；

2、[attr="val"]：选择定义attr属性，且属性值为val的元素；

3、[atte^="val"]：选择定义attr属性，且属性值以字符串val开头的元素；

4、[attr$="val"]：选择定义attr属性，且属性值以字符串val结尾的元素；

5、[attr*="val"]：选择定义attr属性，且属性值包含字符串val的元素；

6、[attr~="val"]：选择定义attr属性，且属性值具有多个值，其中一个为字符串val的元素。

7、[attr|="val"]：选择定义attr属性，且属性值为连字符分割的多个值，其中第一个为字符串val的元素；

代码示例

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
    /*[attr]*/
    [title] {
        color: red;
    }
    /*[attr="val"]*/
    [title="text"] {
        color: blue;
    }
    /*[attr^="val"]*/
    [class^="msg"] {
        color: darkgray;
    }
    /*[attr$="val"]*/
    [id$="msg"] {
        color: #313BA8;
    }
    /*[attr*="val"]*/
    [class*="AA"] {
        width: 100px;
        height: 100px;
        background-color: rgba(28,147,77,0.75);
        margin-bottom: 20px;
    }
    /*[attr~="val"]*/
    [class~="class1"] {
        color: purple;
    }
    /*[attr|="val"]*/
    [id|="aa"] {
        color: brown;
        border: 1px solid black;
        padding: 5px;
    }

    </style>
</head>

<body>
    <p title="">文本内容01</p>
    <p title="text">文本内容02</p>

    <p class="msg_hi">Hi!</p>
    <p class="msg_Hello">Hello!</p>

    <p id="Hi_msg">Hi!</p>
    <p id="Hello_msg">Hello!</p>

    <div class="topAAarea"></div>
    <div class="middleAAarea"></div>

    <p class="class1 class2">文本内容03</p>
    <span id="aa-bb">文本内容04</span>
</body>

</html>