CSS 简介及 实用 选择器

已于 2022-11-13 22:51:29 修改
阅读量59 收藏
点赞数
文章标签： css html 前端
于 2022-11-13 22:46:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52259159/article/details/127839070
版权
本文详细介绍了CSS的选择器，包括元素选择器、ID选择器、类选择器、复合选择器（交集和并集）、关系选择器（子元素和后代），以及属性选择器和伪类/伪元素选择器。实例演示了如何运用这些选择器来精准定位和修改网页元素的样式。
摘要由CSDN通过智能技术生成

定义

Cascading Style Sheets,层叠样式表,是一种用来为结构化文档添加样式的计算机语言

存在的价值

通过 **选择器** 来选中元素并设置其样式

选择器

元素选择器

作用：根据标签名来选中元素
语法：标签名{}
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
​
    <style>
        p{
            color: red;
        } 
​
    </style>
</head>
<body>
    <p>我是元素选择器的例子</p>
​
</body>
</html>

ID选择器

作用：根据元素的id属性值选中元素
语法：#id属性值{}
例子：#value{}
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
​
    <style>
        #value{
            color: red;
        } 
​
    </style>
</head>
<body>
    <p id="value">我是id选择器的例子</p>
​
</body>
</html>

类选择器

作用：根据元素的class属性来设置一组元素
语法：.class属性值{}
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
​
    <style>
        .value{
            color: red;
        } 
​
    </style>
</head>
<body>
    <p class="value">我是元素选择器的例子</p>
​
</body>
</html>

复合选择器

交集选择器

作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器4{}
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
​
    <style>
        p.value1{
            color: red;
        } 
​
    </style>
</head>
<body>
    <p class="value1">我是元素选择器的例子1</p>
    <p class="value2">我是元素选择器的例子2</p>
        
    </p>
​
</body>
</html>

并集选择器

作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器4{}
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
​
    <style>
        div,p{
            color: red;
        } 
​
    </style>
</head>
<body>
    <div>我是元素选择器的例子1</div>
    <p>我是元素选择器的例子2</p>
        
    </p>
​
</body>
</html>

关系选择器

子元素选择器

作用：选中指定父元素的指定子元素
语法：父元素>子元素{}
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
​
    <style>
        div>p{
            color: red;
        } 
​
    </style>
</head>
<body>
    <div>
        <p>我是子元素选择器的例子</p>
    </div>
​
</body>
</html>

后代选择器

作用：选中指定元素的后代元素
语法：祖先元素 后代元素{}
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
​
    <style>
        div span{
            color: red;
        } 
​
    </style>
</head>
<body>
    <div>
        <p>我是<span>子元素选择器</span>的例子1</p>
        <span>我是</span>
    </div>
​
</body>
</html>

兄弟选择器

+
作用：选择一个指定元素的 下 一个 兄弟元素
语法：前一个+后一个{}
​
~
作用：选择一个指定元素 下面 所有的 兄弟元素
语法：兄~弟{}
​
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
​
        p+div{
            color: orange;
        }
        p~span{
            color: blue;
        }
​
    </style>
</head>
<body>
    <p>我是兄弟元素的例子1</p>
    <div>我是兄弟元素的例子2</div>
    <div>我是兄弟元素的例子3</div>
    <span>我是兄弟元素的例子4</span>
    <span>我是兄弟元素的例子5</span>
</body>
</html>

属性选择器

作用：通过属性名和属性值选择选择元素
用法：
选择含有指定属性的元素：
标签名[属性名]{} 
​
选择指定的属性和属性值的元素：
标签名[属性名=属性值]{}
​
选择属性值以指定值开头的元素：
标签名[属性名^=属性值]{}
​
选择属性值以指定值结尾的元素：
标签名[属性名$=属性值]{}
​
选择属性值含有指定值的元素：
标签名[属性名*=属性值]{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p[title]{
            color: red;
        }
        p[title=a]{
            color: orange;
        }
        p[title^=ab]{
            color:yellow;
        }
        p[title$=da]{
            color:green;
        }
        p[title*=e]{
            color:blue;
        }
​
    </style>
​
</head>
<body>
​
    <p title>我是属性选择器例子1</p>
    <p title="a">我是属性选择器例子2</p>
    <p title="abcd">我是属性选择器例子3</p>
    <p title="bcda">我是属性选择器例子4</p>
    <p title="abecd">我是属性选择器例子5</p>
​
</body>
</html>

伪类选择器

作用：通过元素的特殊状态选择元素
用法：
标签名:first-child{} （第一个元素）
标签名:last-child （最后一个元素）
标签名:nth-child() （选中第n个元素）
    特殊值：
        n 第n个 n的范围 0 到 正无穷
        2n或even表示选中偶数位的元素
        2n+1或odd便是选中奇数位的元素
        
标签名:first-of-type （第一个此标签类型的元素）
标签名:last-of-type （最后一个此标签类型的元素）
标签名:nth-of-type() （选中第n个此标签类型的元素）
​
标签名:not()否定伪类
    将符合条件的元素从选择其中去除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        ul > li:first-of-type{
            color: red;
        }
        ul > span:first-child{
            color: orange;
        }
        ul > li:nth-child(2n+1){
            color: blue;
        } 
        ul > li:not(li:nth-of-type(3)){
            color: red;
        }
        */
​
    </style>
​
</head>
<body>
​
    <ul>
        
        <span>我是一个span</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
​
    </ul>
​
</body>
</html>

伪元素选择器

作用：通过特殊位置选择伪元素（不存在的元素）
用法：
标签名::first-letter （选择第一个字母）
标签名::first-line （选择第一行）
标签名::selection （选择鼠标选中的内容）
​
标签名::before （选择元素的开始）
标签名::after （选择元素的最后）
    before和after 必须结合content属性来使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        p::first-letter{
            font-size: 50px;
        }
        p::first-line{
            background-color: yellow;
        }
        p::selection{
            background-color: aqua;
        }
​
        p::before{
            content: '😊';
        }
        p::after{
            content: 'haha';
            color: green;
        } */
​
    </style>
</head>
<body>
    
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad fuga amet fugit obcaecati. Corrupti iste deleniti consectetur labore est ea sapiente ut deserunt sunt! Exercitationem nemo illum labore omnis earum?</p>
    <!-- lorem 创建一段随机的英文单词 -->
​
</body>
</html>

猫清明
关注
CSS选择器和jQuery选择器
01-31
jQuery选择器不仅继承了CSS选择器的强大功能，还扩展了许多实用的API，极大地简化了DOM操作过程。 ##### 3.1 基本选择器 jQuery的基本选择器与CSS相似，但提供了更灵活的语法和更强大的功能。 - **元素选择器**: `...
CSS选择器种类及及其使用介绍
09-25
CSS选择器是控制网页样式的关键技术，它决定了哪些元素会被应用特定的样式规则。在CSS中，有多种类型的选择器，每种都有其特定的用途和使用场景。接下来，我们将详细介绍这些选择器的种类及其使用方法。 首先，标签...
CSS伪类选择器详细讲解
weixin_67979623的博客
11-02 1万+
说起CSS3选择器种类之多，今天我们来学习下CSS3中重中之重的选择器伪类选择器，这篇涵盖了很多知识点，你看完这篇保证能对它有个更深的了解
CSS结构伪类选择器
热门推荐
歪脖先生的博客
01-11 1万+
结构伪类选择器 结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。 表 2-6 结构伪类选择器 选择器 功能描述 版本 E:last-child 选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1) 3 E:n
CSS 属性选择器
歪脖先生的博客
01-11 1658
属性选择器 在HTML中，可以通过元素各种各样的属性，来给元素增加很多附加信息。如通过 width 属性，可以指定元素的宽度；通过 id 属性，可以区分不同的元素，并通过Javascript来控制这些元素的内容和状态。 以往的CSS中，大量使用类选择器来定义样式。由于类选择器并不能说明什么样式服务于什么元素。因此，对于一个大型网站，CSS代码比较庞大，若要修改某个样式，就成为非常头疼的
CSS后代选择器
歪脖先生的博客
12-02 1万+
关系选择器 关系选择器，顾名思义，是根据HTML元素在DOM树中的关系来选择元素，这些关系包括后代、父子、同胞、相邻同胞。于是，关系选择器就包括后代选择器、子选择器、相邻同胞选择器、同胞选择器。 表 2-2 关系选择器 选择器 语法 功能描述 版本 后代选择器 E F 选择E元素的所有后代F元素 1
CSS(一)选择器
faramita_of_mine的博客
11-15 1362
CSS之选择器一、在 HTML 中使用 CSS①内联样式②嵌入样式③外部样式二、响应式（了解）三、基础选择器四、层次选择器五、伪类选择器（自）六、动态伪类选择器（自）七、目标伪类选择器（自）八、结构伪类选择器（自）九、否定选择器（自）十、伪元素（自）十一、属性选择器（自） 一、在 HTML 中使用 CSS ①内联样式   内联样式是在元素属性中设置样式。此种方式很适合用于测试样式和快速查看样式效果，但是不推荐在整个文档上使用此方法。   在使用此方法时，必须在每一个元素上重复设置各个样式，这样既增加文档大小
CSS新增选择器（全）
世界和我们都不该止步于此
03-10 918
CSS新增的选择器，可以说是非常是实用，前端必会，属性选择器：结构伪类选择器（一）结构伪类选择器（二）伪元素选择器
前端CSS：CSS常见的选择器
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-29 1239
理解这些基础知识将帮助你在实际工作中更好地控制样式的行为，避免不必要的冲突，并构建出更加健壮和可维护的前端项目。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。CSS 选择器有不同的优先级。简单来说，ID 选择器的优先级最高，其次是类选择器和属性选择器，然后是类型选择器和伪元素，内联样式拥有最高的优先级。相邻兄弟选择器用于选择紧接在另一个元素之后的元素，且两个元素有相同的父元素。类型选择器是最简单的选择器类型，它以元素的标签名称作为选择器。
CSS选择器
weixin_43350001的博客
01-29 6188
CSS选择器一、id和class二、选择器2.1元素选择器2.2 id选择器 一、id和class id和class都是用来选择元素，以便进行CSS操作或者JavaScript操作的。 id属性具有唯一性，也就是说在一个页面中相同的id只能出现一次。 我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得具有相同class的元素具有相同的CSS样式。 二、选择器 选中你想要的元素的方式，我们称之为“选择器”。选择器，说白了就是用一种方式把你想要的那个元素选中！只有把它选中了，你才可以为
CSS3同胞选择器
歪脖先生的博客
12-02 2039
同胞选择器 同胞选择器（E～F），用于选择某元素后面的所有同胞元素。也就是说，E和F是同辈元素，且F在E元素的后面，它们之间可以有，也可以没有其他同胞元素。 如，在博客站中，博文标题后面的是正文，正文用段落组织。HTML 代码如下：     同胞选择器    同胞选择器，为同一个父元素下某个元素之后所有的元素应用样式…    例如，一篇文章中，可以使用同胞选择器，让一级标题后面的所有
css子代选择器
kings_coming的博客
12-07 1475
子代选择器 当前端展示的内容包含 标签，即内容是由富文本编辑的，这个时候如果内容中 含有图片，字体等，怎么去调整图片及文字的样式呢 1.这里推荐一个实用的方法，css子代选择器 举例: .food li{ border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/ } 其中 .food 是指class属性值是food的 dom对象， li是该对象容...
CSS基本选择器实用PPT课件.pptx
10-06
CSS 基本选择器 本资源摘要信息将着重介绍 CSS 基本选择器的概念、语法和应用，旨在帮助学习者快速掌握 CSS 基本选择器的使用和应用。 一、CSS 概念和语法 CSS 全称为 Cascading Style Sheet，即层叠样式表。它的...
CSS基本选择器实用PPT学习教案.pptx
10-06
CSS 基本选择器实用学习教案 本学习教案主要介绍了 CSS 基本选择器的概念、语法和应用，旨在帮助学生掌握基本的 CSS 选择器，并实践于个人主页项目中。 一、CSS 概念和语法 CSS（Cascading Style Sheets）是用来...
微信小程序实用demo：城市选择器
03-15
没有加搜索，请自行添加搜索   1、安装 ... dist设置为微信小程序目录，src开发目录，添加IDE认识微信的文件，css基于sass 2、npm run dev 启动3、处理城市列表的js脚本在/node/process.js node pr
CSS画出三角形的做法
mingangel的博客
10-01 495
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS 盒子属性
m0_74012211的博客
10-02 507
CSS 盒子属性
【CSS】position
小秀的博客
10-02 423
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
241006-Gradio中Chatbot通过CSS自适应调整高度
最新发布
专注机器学习之路
10-06 187
【代码】241006-Gradio中Chatbot通过CSS自适应调整高度。
提升CSS效率：5个实用选择器精炼你的网页设计
本文将分享五个实用的CSS选择器，帮助提升您的CSS编程效率和网页设计技巧。作为网页设计师，我们深知掌握不同类型的CSS语法、兼容性以及如何用最少的代码实现相同的设计效果至关重要。在这篇文章中，我们将深入探讨...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值