CSS选择器分类（有例子非常全）

最新推荐文章于 2024-09-20 02:44:07 发布
最新推荐文章于 2024-09-20 02:44:07 发布
阅读量1.9k 收藏 16
点赞数 7
分类专栏： CSS 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y_ooo/article/details/121123414
版权

1.基础选择器

单个选择器组成

1）标签选择器

指用HTML标签名称作为选择器，为页面中某一类标签指定统一的CSS样式。

p {
    color: green;
}
div {
    color: pink;
}

缺点：不能设计差异化样式

2）类选择器（开发最常用）

差异化选择不同的标签，单独选择一个或者某几个标签

  • 口诀：样式点定义，结构类调用

  • 注意

    1. 不能用标签当类名
    2. 可以使用中横线
    3. 不要使用纯数字，中文定义类名
    4. 命名要有意义
.red {
    color: red;
}
.green {
    color: green;
}
.blue {
    color: blue;
}
.yellow {
    color: yellow;
}

<ul>
    <li class="red">格兰芬多</li>
    <li class="green">斯莱特林</li>
    <li class="blue">拉文克劳</li>
    <li class="yellow">赫奇帕奇</li>
</ul>

  • 多类名：给一个标签指定多个类名，从而达到更多的选择目的

    1. 使用方式：用空格隔开

      .red {
    color: red;
}
.font35 {
    font-size: 35px;
}

      <div class="red font35">格兰芬多</div>

    2. 使用场景：可以抽取公用的样式，标签同时调用公有和私有样式

3）id选择器

  • 口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
#pink {
    color: pink;
}

<div id="pink">迈克尔杰克逊</div>
类选择器id选择器
人的名字，同一个名字可以被多人使用身份证号，唯一的，不能重复
可使用多次只能使用一次
在修改样式中使用最多一般用于页面唯一性的元素上，经常和JavaScript搭配使用

4）属性选择器

根据标签的属性进行筛选的选择器

<body>
    <main>
        <article>
            <h1 title="yooo .com">Yooo*</h1>
            <h1 title="yooo" id="">yooo</h1>
            <h1 title="mjjj.com">Mjjj*</h1>
            <h1 title="yooo-com">mjjj</h1>
            <h2>alison</h2>
            <aside>
                <h2>andy</h2>
            </aside>
            <h2>ruby</h2>
        </article>
    </main>
</body>

        body {
            background-color: black;
            color: white;
        }

        /* 有title、id属性 */
        h1[title][id] {
            color: orange;
        }

        /* 有title属性 */
        h1[title] {
            font-size: 50px;
        }

        /* title属性值是yooo */
        h1[title="yooo"] {
            font-style: italic;
        }

        /* title属性值以yooo开头 */
        h1[title^="yooo"] {
            font-weight: 400;
        }

        /* title属性值以com结尾 */
        h1[title$="com"] {
            color: olivedrab;
        }

        /* title属性值包含yooo */
        h1[title*="yooo"] {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }

        /* title属性值包含独立的词yooo */
        h1[title~="yooo"] {
            text-decoration: line-through;
        }

        /* title属性值以yooo开始或者yooo紧接着-连接 */
        h1[title|="yooo"] {
            text-align: center;
        }

在这里插入图片描述
5）通配符选择器

使用*定义，表示选取页面中所有元素

不需要调用，特殊情况才使用

* {
    color: red;
}

<div>我的</div>
<span>我的</span>
<ul>
    <li>我的</li>
</ul>

2.复合选择器

建立在基础选择器之上，对基本选择器进行组合形成的，更准确更高效。

1）后代选择器（重要）

包含选择器，可选择父元素里的子元素。

父子元素一定使用空格隔开，修改的是子元素的样式。

ol li {
    color: pink;
}

ol li a {
    color: red;
}

.nav li a {
    color: yellow;
}

<ol>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li><a href="#">我是li的孩子</a></li>
</ol>
<ul>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
</ul>
<ul class="nav">
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li><a href="#">我是li的孩子</a></li>
</ul>

2）子选择器（重要）

只能选择某元素的最近一级子元素，选亲儿子。

.nav>a {
    color: red;
}

<div class="nav">
    <a href="#">我是儿子</a>
    <p>
        <a href="#">我是孙子</a>
    </p>
</div>
  • 使用>隔开
  • 只选亲儿子，孙子重孙子都不管

3）并集选择器（重要）

可以选择多组标签，同时为他们定义相同的样式

div,
p,
.pig li {
    color: pink;
}

<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
    <li>小猪佩奇</li>
    <li>猪爸爸</li>
    <li>猪妈妈</li>
</ul>
  • 用逗号隔开
  • 任何形式的选择器都可以成为并集选择器的一部分

4）兄弟选择器

<body>
    <main>
        <article>
            <h1>Yooo*</h1>
            <h2>alison</h2>
            <aside>
                <h2>andy</h2>
            </aside>
            <h2>ruby</h2>
        </article>
    </main>
</body>
  • ~选择同级标签，如下选择article的后代h1的所有h2兄弟
body {
    background-color: black;
    color: white;
}

article h1~h2 {
    color: orange;
}

在这里插入图片描述

  • +选择同级标签，如下选择article的后代h1紧贴的h2兄弟
body {
    background-color: black;
    color: white;
}

article h1+h2 {
    color: orange;
}

在这里插入图片描述
5）伪类选择器

为元素的不同状态或不确定存在的元素设置样式规则，如链接伪类、结构伪类等。使用冒号:隔开

no1.链接伪类选择器

写法功能
a:link选择所有未被访问的链接
a:visited选择所有已被访问的链接
a:hover选择鼠标经过的链接
a:active选择鼠标正在按下还未弹起的链接
  • 顺序不能颠倒 LVHA
  • 因为a链接在浏览器中具有默认样式，所以需要给a单独指定样式
a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #369;
    text-decoration: underline;
}

<a href="#">小猪佩奇</a>
<a href="aaa">光头强</a>

不只是链接可以使用伪类，其他元素也可以使用。

no2.:focus焦点伪类

用于选取获得焦点（光标）的表单元素，一般input表单元素才能获取

input:focus {
    background-color: pink;
    color: red;
}

<input type="text">
<input type="text">
<input type="text">

no3.:target目标伪类

用于控制锚点目标元素的样式。在点击后效果出现。

div {
    height: 900px;
    border: solid 1px #ddd;
}

div:target {
    color: orange;
}

<body>
    <a href="#yooo">Yooo*</a>
    <div></div>
    <div id="yooo">yooo.com</div>
</body>

在这里插入图片描述
点击链接后，跳转到锚点目标，同时更改样式。
在这里插入图片描述

no4.:root根伪类

相当于html标签选择器，选择页面内所有元素。

:root {
    color: orange;
}

<body>
    <a href="#yooo">Yooo*</a>
    <div></div>
    <div id="yooo">yooo.com</div>
    <ul>
        <li>alison</li>
        <li>ruby</li>
        <li>andy</li>
    </ul>
</body>

在这里插入图片描述

no5.:empty空元素伪类

当标签没有内容为空时被选中。注意内容为空格时不起作用，因为有内容。

li {
    margin-bottom: 20px;
    border: solid 2px #ddd;
}

li:empty {
    display: none;
}

<body>
    <ul>
        <li>alison</li>
        <li>ruby</li>
        <li>andy</li>
        <li></li>
        <li> </li>
    </ul>
</body>

在这里插入图片描述

no6.结构伪类选择器

  • 首尾元素伪类选择（first/last同理）
<body>
    <main>
        <article>
            <h1>Yooo*</h1>
            <h2>alison</h2>
            <aside>
                <h2>andy</h2>
                <h2>andy*</h2>
            </aside>
            <h2>ruby</h2>
        </article>
    </main>
</body>

/* 表示选中article所有后代的第一个子元素 */
article :first-child {
    color: orange;
}

在这里插入图片描述

/* 表示选中article所有儿子元素中的第一个 */
article>:first-child {
    color: olivedrab;
}

在这里插入图片描述

/* 表示选中article后代的第一个子元素并且该子元素为h2 */
article h2:first-child {
    color: palevioletred;
}

在这里插入图片描述

/* 表示选中article后代的类型为h2的第一个子元素 */
article h2:first-of-type {
    color: purple;
}

在这里插入图片描述

  • 唯一伪类选择
<body>
    <main>
        <article>
            <h1>Yooo*</h1>
            <h2>alison</h2>
            <aside>
                <h2>andy</h2>
            </aside>
            <h2>ruby</h2>
        </article>
    </main>
</body>

/* 表示选择article有唯一子元素的后代 */
article :only-child {
    color: orange;
}

在这里插入图片描述

/* 表示选择article儿子类型为h2且唯一的元素 */
article>h2:only-of-type {
    color: palevioletred;
}

在这里插入图片描述

  • 根据元素正数编号
<body>
    <main>
        <ul>
            <li>yooo</li>
            <li>alison</li>
            <li>ruby</li>
            <li>andy</li>
        </ul>
        <article>
            <h1>Yooo*</h1>
            <h2>alison</h2>
            <aside>
                <h2>andy</h2>
            </aside>
            <h2>ruby</h2>
            <h1>mjjj</h1>
        </article>
    </main>
</body>

/* 表示选中article后代的第一个子元素 */
article :nth-child(1) {
    color: orange;
}

在这里插入图片描述

/* 表示选中article后代的第一个子元素且该元素类型为h2 */
article h2:nth-child(1) {
    color: palevioletred;
}

在这里插入图片描述

/* 表示选中article后代的所有子元素 */
article :nth-child(n) {
    color: seagreen;
}

在这里插入图片描述

/* 表示选中ul中的偶数li，奇数用odd */
main ul li:nth-child(even) {
    color: orange;
}

在这里插入图片描述

/* 表示选中article第二个类型为h1的后代 */
article h1:nth-of-type(2) {
    color: skyblue;
}

在这里插入图片描述

  • 根据元素倒数编号
<body>
    <main>
        <ul>
            <li>yooo</li>
            <li>alison</li>
            <li>ruby</li>
            <li>andy</li>
        </ul>
        <article>
            <h1>Yooo*</h1>
            <h2>alison</h2>
            <aside>
                <h2>andy</h2>
            </aside>
            <h2>ruby</h2>
            <h1>mjjj</h1>
        </article>
    </main>
</body>

/* 表示选中后两个li */
main>ul li:nth-last-child(-n+2) {
    color: orange;
}

在这里插入图片描述

/* 表示选中从倒数第二个开始到正数第一个结束的li */
main>ul li:nth-last-child(n+2) {
    color: palevioletred;
}

在这里插入图片描述

/* 表示选中article中倒数第二个h2 */
article h2:nth-last-of-type(2) {
    color: greenyellow;
}

在这里插入图片描述

no7.:not()排除选择器

<body>
    <main>
        <ul>
            <li>yooo</li>
            <li>alison</li>
            <li>ruby</li>
            <li>andy</li>
        </ul>
        <article>
            <h1>Yooo*</h1>
            <h2>alison</h2>
            <aside>
                <h2>andy</h2>
            </aside>
            <h2>ruby</h2>
            <h1>mjjj</h1>
        </article>
    </main>
</body>

/* 表示选中前三个li，不包括第二个，不包括第一个 */
main>ul li:nth-child(-n+3):not(:nth-child(2)):not(:first-child) {
    color: orange;
}

在这里插入图片描述

no8.表单伪类选择器

<body>
    <form action="">
        <input type="text" disabled>
        <input type="text">
        <hr>
        <input type="radio" name="sex" id="boy">
        <label for="boy">男</label>
        <input type="radio" name="sex" id="girl" checked>
        <label for="girl">女</label>
        <hr>
        <input type="text" required>
        <hr>
        <input type="email">
        <hr>
        <button>保存</button>
    </form>
</body>

/* 表示选中禁用input */
input:disabled {
    background: peachpuff;
}

/* 表示选中非禁用input */
input:enabled {
    background: paleturquoise;
}

/* 表示选中被选中元素所对应的的label */
input:checked+label {
    color: peachpuff;
}

/* 表示选中必填项input */
input:required {
    border: solid 2px #1C8FFF;
}

/* 表示选中验证有效的input */
input:valid {
    background: olivedrab;
}

在这里插入图片描述

no9.文本伪类选择器

<body>
    <span>Yooo</span>
    <p>
        霍格沃茨成立于10世纪左右，被认为是魔法世界中最好的魔法机构之一，尽管还有其他著名的魔法学校，包括布斯巴顿魔法学校和德姆斯特朗魔法学校。霍格沃茨学院共分为四个学院，分别是格兰芬多（Gryffindor）、赫奇帕奇（Hufflepuff）、拉文克劳（Ravenclaw）和斯莱特林（Slytherin），四个学院皆有其代表颜色与动物。
        在每学年的开学宴会之前，一年级新生都会轮流上台戴上分院帽进行分院，分院帽会根据你的性格和品质来判断你该属于哪一个学院。
    </p>
    <p>
        具有魔法能力的孩子在出生时就被录取，并在十一岁时通过猫头鹰收到由霍格沃兹寄来的录取通知书。然而，如果这个孩子是麻瓜出身或像哈利波特这样对魔法世界一无所知的混血儿，学校的工作人员会拜访孩子和家人，告诉他们魔法世界的遗产和存在。学校的确切位置永远无法被发现，因为它被渲染为不可标绘。在麻瓜们看来，这所学校就像是一座废弃的古老城堡。同样，大多数魔法学校的地点都被保护起来，以防止他们的教学方式被泄露，同时也保护学生和学校本身不受任何伤害。
    </p>
</body>

/* 每段的首字母 */
p::first-letter {
    font-size: 20px;
    font-weight: 700;
}

/* 每段的首行 */
p::first-line {
    color: yellowgreen;
}

/* 在span标签后面添加内容和样式，如果是前面使用before */
span::after {
    content: ".com";
    color: orange;
}

在这里插入图片描述

yooo*
关注
专栏目录
CSS 三种基础选择器
天空之外
08-28 6556
本节我们来学习 CSS 中的选择器，选择器是 CSS 里面一个很重要的概念，HTML 中的所有标签样式，都是通过不同的 CSS 选择器进行控制的。我们只需要通过选择器，就可以对不同的 HTML 标签进行选择，并指定各种样式声明。 在 CSS 中三三种最基本的选择器，分别是标签选择器、类选择器（class）、ID选择器。 我们知道在 HTML 页面中引入 CSS 样式最好的方法是引入外部样式，也就是将 CSS 代码单独放置到一个 .css 文件内，然后再引入这个 CSS 文件。 标签选择器 我们知道一个 HT
css串联选择器和后代选择器使用方法
09-25
串联选择器和后代选择器是CSS中的两种重要选择器，它们允许我们更加精确地定位和样式化页面元素。 **串联选择器（Adjacent Sibling Selector）** 串联选择器，也称为相邻兄弟选择器，用于选取紧接在另一个元素后的...
CSS中的几种常用选择器
weixin_30312563的博客
12-17 158
Css选择器 常用的选择器有如下几种： 1、标签选择器 标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。 举例： *{margin:0;padding:0} div{color:red} <div>....</div> <!-- 对应以上两条样式 --> <div class="box"&...
CSS所有选择器的用法及示例（完整版）
最新发布
qq_45914609的博客
09-20 1894
了解CSS（层叠样式表）所有选择器的用法，并列出基础示例。CSS所有选择器大致分为6种类型：1.基础选择器2.组合选择器3.属性选择器4.伪类选择器5.伪元素选择器6.其他选择器。
CSS3——类选择器示例1
御承扬的博客
10-21 235
CSS3示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类选择器示例1</title> <style type="text/css"> body{ te...
CSS选择器的种类及介绍
weixin_34006965的博客
02-14 486
首先说主要都有哪些先择器1.标签选择器（如：body,div,p,ul,li）2.类选择器（如：class="head",class="head_logo"）3.ID选择器（如：id="name",id="name_txt"）4.全局选择器（如：*号）5.组合选择器（如：.head .head_logo,注意两选择器用空格键分开）6.继承选择器（如：div p,注意两选择器用...
Css选择器分类
__盛某人的博客
03-05 295
选择器名 用法和解释 标签选择器 又称为元素选择器，最为基本 格式：标签名{} ID选择器 根据id选择标签 ，格式：#id{} Class选择器 根据class名，设置的选择器 格式：.class名{} ，点一定注意 并集选择器 创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有...
css后代选择器和子选择器的区别介绍
09-25
后代选择器和子选择器是CSS中的重要概念，它们用于指定样式的应用对象，但两者之间存在显著差异。后代选择器可以选取某个元素的所有后代元素，而子选择器仅选取直接子元素。下面详细介绍这两者之间的区别，包括用法...
css 元素选择器的简单实例
09-24
CSS元素选择器的使用不仅仅限于单个标签，还可以结合类选择器（`.class`)、ID选择器 (`#id`)、伪类（`:hover`, `:active`, `:focus`等）和属性选择器 `[attribute]`等，实现更复杂的样式控制。例如，如果我们只想让...
CSS中的选择器种类总结及效率比较
09-24
CSS选择器是根据特定规则选中页面元素的方法，它们的种类繁多，不同的选择器类型具有不同的特性和用途，同时也伴随着性能上的差异。在本文中，我们将对CSS中的选择器种类进行总结，并对它们的效率进行比较。 首先，...
css选择器分类
dhp30329的博客
03-24 141
css选择器大致可以分为10大类： 1、元素选择器 如：p{} 2、类选择器 如：.xx{} 3、ID选择器 如：#xx{} 4、关联选择器 如：p a{} 5、子元素选择器 如：p>a{} 6、相邻兄弟选择器 如：p+a{},匹配的是紧邻p元素后面的a元素 7、组合选择器 如：p,a{} 8、元素选择器 如：img[alt],匹配包含alt属性的img元素 9、...
CSS选择器分类
博客之家
04-15 367
CSS选择器的分类： 1.标签选择器(标签名)：作用于当前页面所有匹配标签 2.类选择器（.+属性）:作用于当前页面所有class值为red的标签 3.ID选择器（#+ID名）：作用于当前页面所有ID值为price的标签，ID在当前页面具有唯一性
CSS基础选择器
御坂御坂001的博客
10-18 266
CSS基础选择器 1.标签选择器 概念： 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。 语法： 标签名{属性:属性值1; 属性2:属性值2;} 作用：标签选择器，可以把某一类标签全部选择出来，比如所有的div标签和所有的span标签 优点： 是能快速为页面中同类型的标签统一样式 缺点： 不能设计差异化样式 2.类选择器 类选择器使用"."进行标识，后面紧跟类名 语法： .类名{ 属性1:属性值1; 属性2:属性值2； } 标签 &
CSS选择器的分类
歪脖先生的博客
12-01 693
选择器的分类 CSS的选择器有多种形式，根据所获取元素的不同，选择器分为五大类：基本选择器、关系选择器、属性选择器、伪元素选择器、伪类选择器。 伪类选择器，按其功能又可细分为：链接伪类选择器、结构伪类选择器、否定伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器。如图 2‑2 所示： 图2-2  CSS选择器分类 本章所列的选择器，已经注明定义该选择器的CSS版本。
CSS选择器：基本选择器、复合选择器、伪类选择器、伪元素选择器
pan_junbiao的博客
07-11 2127
CSS选择器包含：基本选择器、复合选择器、伪类选择器、伪元素选择器。基本选择器包括：元素选择器、类选择器、ID 选择器、属性选择器。最常见的 CSS 选择器是元素选择器。换句话说，HTML文档的元素就是最基本的选择器。例如设置 HTML 样式，选择器通常是某个 HTML 元素，如 p、h1、a 等，甚至可以是 HTML 本身。在 HTML 中，各种各样的属性可以给元素添加很多附件信息，并且可以通过 JavaScript 控制这些附加属性的内如何状态。在使用 CSS 的时候，也可以使用这些附加属性来指定元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值