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

最新推荐文章于 2024-07-24 10:05:23 发布
最新推荐文章于 2024-07-24 10:05:23 发布
阅读量1.7k 收藏 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*
关注
  • 7
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css选择器符号,css 选择器符号
weixin_28756281的博客
08-03 1538
1. 空格 —— “后代选择器”例如下面这个例子，表示div元素里面所有的p元素div p {...}2. > —— “子选择器”例如下面这个例子，表示div元素里面所有的子代(不含孙代及以后)p元素div>p {...}3. ~ —— “兄弟元素选择器”例如下面这个例子，表示.cls元素往后的同级的p元素.cls~p {...}4. + —— "相邻兄弟选择器"例如下面这个例子，表示...
css 选择器不包括,css 常用选择器
weixin_31990755的博客
08-03 1994
*{} 选定所有对象,会遍历并命中文档中所有的元素。全局样式。:root匹配文档的根元素。在HTML(标准通用标记语言下的一个应用)中，根元素永远是HTMLcss关系选择器：E F{} 选择所有被E元素包含的F元素。选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子… E>F{} 选择E元素里面的子元素F，与前者 E F{}不同的是，子选择符只能命中子元素，不能选中孙辈,如下示例...
CSS选择器分类大全
m0_67859656的博客
11-05 6304
CSS选择器分类大全 基础选择器 一、基础选择器 二、复合选择器 三、CSS3选择器补充： （一）层级选择器： （二）属性选择器 （三）伪类选择器
CSS选择器详解与应用实例
一起coding，一起嗨。
06-19 725
CSS选择器详解与应用实例
CSS的选择器(超详细)
热门推荐
前端开发,HTML5,css3,JavaScript,node.js,vue
11-21 7万+
一、常用的选择器 1.元素选择器 2.类选择器(class选择器) 3.id选择器 4.通配符选择器 二、群组选择器 三、关系选择器 1.后代选择器 2.子代选择器 3.相邻兄弟选择器 4.通用兄弟选择器 5.案例 四、属性选择器 五、伪类选择器 1.常用的伪类选择器 2.否定伪类 3.元素的伪类 六、伪元素选择器
css选择器包含内容,CSS 包含选择器
weixin_39913628的博客
08-04 1347
包含选择器包含选择器也叫派生选择器，顾名思义，是一种具有包含关系的选择。多个选择器以空格分开，组合成包含关系，且右边的选择器从属于左边(即右边的选择器只能在左边的选择器范围内选择)。一个包含选择器的应用示例：#nav a{text-decoration: none;}这个例子表示对“id="nav"”的元素里面的超链接应用该样式(超链接取消下划线)，而其他网页元素的超链接不受影响。包含选择器是常用...
有 CSS 父选择器吗？
kalman2019的博客
12-14 5156
如何选择作为锚元素的直接父级的 元素？例如，我的 CSS 是这样的：显然有一些使用 JavaScript 的方法，但我希望有某种解决方法存在于 CSS Level 2 中。我试图设置样式的菜单被 CMS 吐出，所以我无法将活动元素移动到 元素...（除非我为菜单创建模块设置主题，我不想这样做） .
CSS3选择器大全，详细介绍，有例子
be_a_hacker的博客
02-10 1497
CSS样式由两部分组成：选择器（Selector）和声明块（Declaration Block），声明块中包含属性和属性值，属性和属性值之间由冒号隔开，声明块被一对{}括起起来，花括号之间可以包含多个声明，多个声明被分号（;）隔开。 选择器 {属性:属性值;属性:属性值;……} eg: p{ color:red; text-align:center; font-size:27px; } 根据选择器的用途可以把选择器分为标签选择器、类选择器、id选择器、伪类选择器等。 1.通用选择器 它对网页
CSS选择器
晨曦蜗牛
12-14 1455
类型选择器，是对 HTML 标签中的 class 属性进行选择。CSS 类选择器的选择符是 “.”。 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="utf-8"/> <title>CSS学习笔记</title> <style type="text/css"> p { color: red; .
CSS常用选择器
chenchenchencl的博客
03-06 1853
CSS常用选择器
css 元素选择器的简单实例
09-24
CSS元素选择器的使用不仅仅限于单个标签，还可以结合类选择器（`.class`)、ID选择器 (`#id`)、伪类（`:hover`, `:active`, `:focus`等）和属性选择器 `[attribute]`等，实现更复杂的样式控制。例如，如果我们只想让...
css串联选择器和后代选择器使用方法
09-25
串联选择器和后代选择器是CSS中的两种重要选择器，它们允许我们更加精确地定位和样式化页面元素。 **串联选择器（Adjacent Sibling Selector）** 串联选择器，也称为相邻兄弟选择器，用于选取紧接在另一个元素后的...
不能不知道的CSS选择器技巧
09-24
【CSS选择器技巧详解】 CSS选择器是网页样式设计中不可或缺的部分，它们允许开发者精确地定位和风格化页面上的元素。本文将深入探讨两个重要的CSS伪元素：`:before` 和 `:after`，以及如何结合边框（border）创建...
CSS选择器的新用法(推荐)
09-27
### CSS选择器的新用法详解 #### 前言 随着前端技术的不断发展与进步，CSS作为网页样式设计的核心语言之一也在不断进化。为了更好地适应现代网页开发的需求，CSS引入了一系列新特性，其中就包括了对选择器的增强。...
css后代选择器使用方法实例
09-25
CSS后代选择器是一种强大的工具，用于在样式表中指定元素的特定子元素或者后代元素的样式。这个选择器允许我们精确地控制文档的结构，并且只应用样式到我们需要的那些部分，而不会影响到其他不相关的元素。在这个...
CSS性能优化：从加载速度到渲染效率的全方位提升
WayneYalejk的博客
07-22 393
在快节奏的互联网环境中，网页的加载速度和渲染效率直接关系到用户体验和搜索引擎排名。CSS作为网页样式的主要描述语言，其性能优化同样不容忽视。本文将介绍一系列CSS性能优化的策略，帮助开发者从加载速度到渲染效率实现全方位的提升。
CSS 创建：从入门到精通
最新发布
wjs2024的博客
07-24 374
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
重拾CSS，前端样式精读-函数（颜色，计算，图像和图形）
07-22 857
它接收两个参数，第一个是变量值。第二个是默认值，当变量不存在时就会默认使用第二个值。图像集背景效果可以使用鼠标滚轮对页面缩放来观察效果。
CSS选择器基础教程 - 元素选择器解析
了解和熟练使用CSS选择器是创建有吸引力且功能丰富的网页和应用程序界面的基础。元素选择器作为最基础的选择器，能帮助开发者快速有效地控制文档中特定类型的元素，实现页面的个性化设计。通过结合其他更复杂的选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值