初试CSS(二)：选择器

最新推荐文章于 2025-06-01 00:32:15 发布

平安不死街

最新推荐文章于 2025-06-01 00:32:15 发布

阅读量237

点赞数

文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_44344236/article/details/114987544

版权

本文详细介绍了CSS中的各种选择器，包括标签选择器、类选择器、ID选择器、通配选择器、关系型选择器（如分组选择器、后代选择器）、属性选择器和伪类选择器。伪类选择器中特别提到了链接相关的伪类、input相关的伪类以及子元素的伪类选择器。此外，还讨论了伪元素选择器如::before和::after的应用。

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

选择器

选择器有很多，而且各个选择器之间可以混合使用，很方便。选择器后面加的{}叫声明块，在{}中放很多的css属性。按照平常使用的习惯，选择器可以分为2类——基本选择器、其他选择器。

基本选择器包括3种——标签选择器、类选择器(class选择器)、id选择器。

其他选择器包括4种——通配选择器、分组选择器、后代选择器、属性选择器、伪类选择器。

标签选择器

标签选择器就是直接将网页的某个标签标出来，让这个网页上的所有的这个标签都显示这个样式。如下方这个标签选择器，使得这个网页内所有p标签的内容，都显示为红色。

//标签选择器
<style>
    p{color:red;}
</style>

class选择器

class是"类"的意思，就是指类选择器，先给标签起一个名字（class=“name”），然后再

//类选择器
<style>
    .triDivTry {
        width: 0px;
        height: 0px;
        border-top: 200px solid #00a497;
        border-bottom: 200px solid #cc7eb1;
        border-left: 200px solid #165e83;
        border-right: 200px solid #c85179;
    }
</style>
<body>
    <div class="triDivTry"></div>
</body>

ID选择器

如果页面上某个标签具有唯一性，那么就给这个标签起一个id，id具有“唯一性”，每一个标签只能有一个id，每一个id只能对应1个标签，虽然将id像class一样使用，也是可以设置样式的，但这样！是！错！的！

<style>
    #areYouOk{color: green;}
</style>
<body>
    <p id="areYouOk">这个家伙用的是id</p>
</body>

通配选择器

这个选择器比较简单粗暴，只有一个标志——" * "，这个选择器里面写的属性会作用于整个网页中所有的标签，所以一般也就是在开头的时候用它调整一下margin和padding之类的——因为HTML中很多标签自带margin、padding，可以在开头直接将默认的**“间隙”**全部清除掉。

//常见操作
<style>
    *{
        margin: 0 ;
    	padding: 0;
	}
</style>

关系型选择器

分为分组选择器、后代选择器。

分组选择器(并集选择器)

如果css中不同的标签有相同的样式属性和值，可以把这些相同的样式提取出来，并使用分组选择器把他们存起来，使用“，”隔开。不过可读性会差一些。

注意，分组选择器的逗号后面，一定要跟上“.”，写上这个“点”，写上这个“点”，写上这个“点”。

<style>
    //注意逗号后面是有一个点的
    .theGroup1,.theGroup2{color: green;}
</style>
<body>
    <p class="theGroup1">这是第一个p</p>
    <p class="theGroup2">这是第二个p</p>
</body>


//分组选择器是建立在那三种“基本选择器”的基础上的，实际上是一种基本选择器的变种格式，所以style中可以是几个class成组
//也可以是标签，也可以是id
<style>
    #id,.class,div{color:green;}
</style>

后代选择器

这个选择器要用于嵌套的标签中，格式为“父标签空格子标签”，同理，这个选择器也是基本选择器的一种变种格式。

div p代表所有div中的p元素

.class1 .ioo代表，所有class为class1里的class为ioo的元素

div.ioo代表所有class为ioo的div，不过有时候还称这种为“交集选择器”

.father>p 代表，class为father的元素中的**下一级(儿子)**为p的元素，注意，只是father中下一级的，如果是下一级的下一级，那是不会选上的，比如p中还有一个p，那么第二个p相当于father的孙子，是不包括的——儿子选择器，孙子不算。(注意：如果写的属性有继承性，那么孙子会继承儿子的属性，那这个选择器就没啥意义了)

<style>
    .areYouOk div #iiiid{color:red;}//这个样式的意思就是，class为areYouOk中的div中的id为iiiid的那个标签的文本内容显示为红色。
</style>

属性选择器

这个选择器是根据某个标签是否具有某个属性，以及这个属性的值是多少来进行匹配。例中如下：

<style>
    /* 有id这个属性的，字体颜色改为blue */
    [id] {
        color: blue;
    }
    /* 有id这个属性，并且id属性值为p1的，背景颜色改为goldenrod */
    [id="p1"] {
        background-color: goldenrod;
    }
    /* 有style这个属性，并且style属性能对的上的，背景颜色改为gray */
    [style="margin: 10px;"] {
        background-color: gray;
    }
    /* 如果属性选择器等号前面对有一个^，那就是代表以什么开头，而且属性值内容实际上是一个文本，它会从头一一进行检查，比如这里要求id为p开头，那么p1、p2都会被找到。 */
    [id^="p"]{
        background-color: greenyellow;
    }
    /* 如果等号前面是美元$符号，则代表以什么结尾，与^同理 */
    [style$="x;"]{
        background-color: greenyellow;
    }
    /* 如果等号前面是*，那么这个代表着该属性值中包含，就会被选中，如下，style属性中包含rgin，就会被选中 */
    [style*="rgin"] {
        font-weight: bold;
    }
    /* 如果两个中括号，那就代表着选中某个同时具有两个属性的标签，这些中括号的用途可以串联起来灵活使用。 */
    [id][style]{
        background-color:orange;
    }
</style>
<body>
    <p id="p1">这是p1</p>
    <p id="p2">这是p2</p>
    <p style="margin: 10px;">这是p3</p>
</body>

注意，属性选择器要求，属性以及属性值要完全对的上，比如style中如果有空格，属性值中必须也要写空格才能对应上

伪类选择器

伪类选择器有很多，这里只介绍几个比较常用的。

链接相关的伪类选择器

这个选择器的作用是，当链接处于不同状态的时候，样式上可以有一些变化，共有4中状态——link，visited、hover、active。

被称为伪类就是因为实际上不是真正的类，但是我们可以使用。

默认状态是link

link就是没有点击过的状态，链接在最开始的状态。

鼠标放上去悬停是hover

将鼠标放到一个连接上，然后链接显示的状态。

鼠标长按是active

鼠标在链接上长按的状态。

点击过的是visited

如果一个页面的链接已经点击过了，那么这个页面上这个标签会变为visited状态。注意，visited的效果如果想显示出来，不能使用无痕浏览器，如果浏览器会自动清除缓存也不行。

补充：还有一个链接相关的伪类:target

这个主要是用在锚点链接。

通常超链接最常用的就是hover。不过这个选择器不止可以用于超链接，所有元素都可以使用。

<style>
    a{color: red;}
    /* :hover是伪类选择器 */
    /* a:hover是交集 */
    a:hover{color: green;}
    a:visited{color: gold;}
    a:active{color: indigo;}
    a:link{color: black;}
    #one:target, #two:target, #three:target, #four:target{
            background-color: red;
            color: yellowgreen;
        }
</style>
<body>
    <a>请把鼠标指针移动到红色的a元素上，就可以看到颜色变化效果。</a>
    <a href="#one">第一章</a>
    <a href="#two">第二章</a>
    <a href="#three">第三章</a>
    <a href="#four">第四章</a>
    <div id="one">
        <p>第一章</p>
    </div>
    <div id="two">
        <p>第一章</p>
    </div>
    <div id="three">
        <p>第三章</p>
    </div>
    <div id="four">
        <p>第四章</p>
    </div>
</body>

input相关的伪类选择器

focus，是当input获取焦点时(被点击)的状态。input的类型不只是text，可以是其他类型。

disabled，元素无效时的状态。

enable，元素可用(有效时)。

checked，元素被选中时的状态，只支持opera

<style>
    #text1:focus{
        height: 200px;
        width: 300px;
    }
</style>
<body>
    <input type="text" id="text1">
</body>

关于子元素的伪类选择器

:first-child：表示这个元素中第一个子元素。

:last-child：表示这个元素中最后一个子元素。

伪元素选择器

什么是伪元素？

伪元素就是不需要HTML来创建的标签，通过CSS创建出来的元素。

::before

表示在元素内部最前面创建一个元素，这个元素是通过CSS创建的，不是我们写的HTML代码，这个元素叫做伪元素。

::after

同理，表示在内部最后面创建一个元素。

<style>
    .box::before {
        content: "这是一个伪元素，不是html创建的";
        /* 显示方式为块级 */
        display: block;
    }
</style>

<body>
    <div class="box">
        <p>hello 这里是p，是一个普通元素</p>
    </div>
</body>

伪元素还有很多，比如

::fitst-letter 第一个文字。

::first-line 第一行文字(针对p标签和饿div标签，不适用于span标签)。

::selection 选中文本的状态。

默认创建出来的是行内元素。