一、定义

通过选择器可以获得网页上某个或某些HTML标签,进而对此标签设置CSS样式,使其产生特定的效果。根据获取标签的方式不同,选择器主要可以分为以下几类:

二、基本选择器

1.通用选择器

通用选择器用*号来选择页面上所有的元素,也可以用来选择某个元素的所有子元素,通用选择器一般用来清除一些默认样式。

如将网页中所有元素外边距设为0px,所有字体颜色设置为红色:

<style>
    *{
        margin: 0;
        color: red;
    }
</style>
<body>
    <h1>通用选择器的示例(被选中)</h1>
    <p>段落1(被选中)</p>
    <!-- html和body标签也都被选择-->
</body>

2.id选择器

id选择器使用HTML元素的id属性来选择特定元素,因此要求HTML元素要有id属性。id具有唯一性,所以一般id选择器只能选择一个元素。id选择器表示方法为 # id

如将id为hello的段落中的字体设置为红色,而其它地方字体颜色保持默认不变:

<style>
    # hello{
        color: red;
    }
</style>
<body>
    <h1>id选择器的示例</h1>
    <p id="hello">大家好(被选中)</p>
    <p>段落1</p>
</body>

3.类选择器

类选择器使用HTML元素的id属性来选择特点元素,因为不同元素可以设置相同的类名,所以类选择器可以同时选择同一个类名的多个元素。类选择器表示为.类名

如将所有类名为hello的元素中的字体设置为红色,而其它地方字体颜色保持默认不变:

<style>
    .hello{
        color: red;
    }
</style>
<body>
    <h1 class="hello">类选择器的示例(被选中)</h1>
    <p class="hello">大家好(被选中)</p>
    <p>段落1</p>
</body>

4.标签选择器

标签选择器也叫元素选择器,根据标签名称来选择对于的元素。

如将所有<p>标签中的字体设置为红色,而其它地方字体颜色保持默认不变:

<style>
    p {
        color: red;
    }
</style>
<body>
    <h1>标签选择器的示例</h1>
    <p>大家好(被选中)</p>
    <p>段落1(被选中)</p>
</body>

5.属性选择器

属性选择器按照给定的属性,选择所有匹配的元素。格式主要有:

[attr] 选择带有attr属性所有元素
[attr = value] 选择attr属性的值为value的所有元素
[attr ~= value] 选择attr属性的值中包含单词value的所有元素
[attr |= value] 选择attr属性的值中以value开头的所有元素
[attr ^= value] 选择attr属性的值中以value开头的所有元素
[attr $= value] 选择attr属性的值中以value结尾的所有元素
[attr *= value] 选择attr属性的值中包含子字符串value的所有元素
例如将a标签中带有href属性的元素的字体设置为红色:

<style>
    a[href] {
        color: red;
    }
</style>
<body>
    <h1>属性选择器的示例</h1>
    <a href="https://wwww.baidu.com">百度(被选中)</a>
    <p>段落1</p>
</body>

三、分组选择器

分组选择器通过逗号(,)将不同的选择器进行组合,它选择所有能被列表中的任意一个选择器选中的节点,例如A, B会同时匹配元素A和元素B。

如将<p>标签和<h1>标签中字体设为红色:

<style>
    p,h1 {
        color: red;
    }
</style>
<body>
    <h1>分组选择器的示例(被选中)</h1>
    <p>大家好(被选中)</p>
    <div >段落1</div>
</body>

四、伪选择器

1. 伪类选择器

a:visited匹配将所有曾被访问过的<a>元素的字体设为红色:

<style>
    a:visited{
        color: red;
    }
</style>
<body>
    <h1>伪类选择器的示例</h1>
    <p>大家好</p>
    <a href=”https://www.baidu.com”>百度</a>
    <p>段落1</p>
</body>

2.伪元素选择器

将鼠标选中文字字体设为红色:

<style>
    ::selection{
        color: red;
    }
</style>
<body>
    <h1>伪元素选择器的示例</h1>
    <p>大家好</p>
    <p>段落1</p>
</body>

五、复合选择器

1.相邻选择器

通过加号(+)选择所有紧跟在指定元素之后的第一个子元素

如将紧跟在<div>元素之后的第一个<p>元素的字体设为红色:

<style>
    div + p{
        color: red;
    }
</style>
<body>
    <h1>相邻选择器的示例</h1>
    <p>大家好</p>
    <div >
        <p>段落1(未选中)</p>
    </div>
    <p>段落2(被选中)</p>
    <p>段落3(未选中)</p>
</body>

2.兄弟选择器

匹配属于指定元素的同级元素中所有指定元素

如在<div>元素之后的所有<p>元素的字体设为红色:

<style>
    div ~ p{
        color: red;
    }
</style>
<body>
    <h1>兄弟选择器的示例</h1>
    <p>大家好</p>
    <div >
        <p>段落1(未选中)</p>
    </div>
    <p>段落2(被选中)</p>
    <p>段落3(被选中)</p>
</body>

3.子选择器

匹配属于指定元素子元素中的所有指定元素

如将<div>的子元素中的所有<p>元素的字体设为红色:

<style>
    div > p{
        color: red;
    }
</style>
<body>
    <h1>子选择器的示例</h1>
    <p>大家好</p>
    <div >
        <p>段落1(被选中)</p>
        <h2><p>段落2(未选中)</p></h2>
        <p>段落3(被选中)</p>
    </div>
</body>

4.后代选择器

匹配属于指定元素后代的所有指定元素

如将<div>元素内的所有<p>元素的字体设为红色:

<style>
    div  p{
        color: red;
    }
</style>
<body>
    <h1>后代选择器的示例</h1>
    <p>大家好</p>
    <div >
        <p>段落1(被选中)</p>
        <h2><p>段落2(被选中)</p></h2>
        <p>段落3(被选中)</p>
    </div>
</body>
Last modification:June 20th, 2021 at 10:40 pm
如果觉得我的文章对你有用,请我喝杯奶茶吧