CSS 三种基础选择器_简述css三中基础选择器-程序员宅基地
本节我们来学习 CSS 中的选择器，选择器是 CSS 里面一个很重要的概念，HTML 中的所有标签样式，都是通过不同的 CSS 选择器进行控制的。我们只需要通过选择器，就可以对不同的 HTML 标签进行选择，并指定各种样式声明。
在 CSS 中三三种最基本的选择器，分别是标签选择器、类选择器（class）、ID选择器。
我们知道在 HTML 页面中引入 CSS 样式最好的方法是引入外部样式，也就是将 CSS 代码单独放置到一个 .css 文件内，然后再引入这个 CSS 文件。
标签选择器
我们知道一个 HTML 页面是通过很多标签组成的，CSS 标签选择器就是用来声明这些标签的，因为每一个 HTML 标签的名称都可以作为相应的标签选择器的名称。
示例：
例如我们来看一个例子，下面是一段 HTML 代码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>侠课岛</h3>
<p>你好，侠课岛！</p>
</body>
</html>
如果我们要为这两个标签定义 CSS 样式，就可以直接在 .css 文件内通过标签选择器来声明样式：
h3{
color: red ;
}
p{
color: green;
}
记得在 HTML 中通过 <link> 标签来引入 CSS 文件，此时在浏览器中的演示效果如下所示：
从上述代码中，我们看到，CSS 语法就是由选择器和声明块 {} 组成，每个声明块中可以包含一个或多个样式声明，并且每条声明后面以分号 ; 结尾。
当然除了上述例子中的 p 、h3 标签可以作为标签选择器，其他的例如 html、body、a、img 等所有标签都是可以作为标签选择器的。
但是我们在使用标签选择器的时候会有一个问题，举个例子，我们先来看下面这段代码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>动物园里有什么？</h3>
<p>小白兔</p>
<p>小狮子</p>
<p>小老虎</p>
<p>小猴子</p>
</body>
</html>
在浏览器中的演示效果：
如果我们想要将上述代码中 “小兔子” 字体样式设置为粉色加粗，其他内容不变，要怎么做？ 如果使用标签选择器 p 来设置样式，那上述代码中四个 <p> 标签中的内容样式都会跟着改变呀，所以这时候用标签选择器显然不合适。
要解决这个问题，我们就需要用到 CSS 中的类选择器和 ID 选择器啦。
类选择器
类选择器用于描述一组标签的样式，一个类选择器可以在多个标签上使用。
语法：
.class_name{
属性：属性值;
}
类选择器前面必须有一个点 .，这个点必不可少，是类选择器的标志。类选择器的名称 class_name 是自定义的，选择器中的属性和属性值跟标签选择器中一样。
示例：
例如上述代码中，我们要给“小兔子” 字体样式设置为粉色加粗，可以自定义一个类选择器：
.rabbit{
color: pink;
font-weight: bold;
}
然后在 HTML 标签上通过 class 属性来使用定义好的类样式，格式为：
<标签名 class="类名称">标签内容</标签名>
如下所示：
<p class="rabbit">小白兔</p>
在使用类样式的时候，只需要类样式名，不需要在前面加点。在浏览器中演示效果如下：
类选择器有一个好处就是，我们可以在同一个页面中多个 HTML 标签上，使用同一个类选择器。
示例：
例如我们除了可以在 <p> 标签上使用类选择器 rabbit，也可以在 <h3> 标签上使用：
<body>
<h3 class="rabbit">动物园里有什么？</h3>
<p class="rabbit">小白兔</p>
<p>小狮子</p>
<p>小老虎</p>
<p>小猴子</p>
</body>
在浏览器中演示效果：
ID选择器
ID选择器和类选择器的使用基本差不多，但是还有一些不同的地方：
- ID 选择器的是以井号
#开头来定义的。而类选择器是以点.来定义的。 - ID 选择器在 HTML 中是可以通过
id属性来使用。而类选择器是通过class属性来使用的。 - 同一个页面中一个ID选择器只能在中出现一次，是唯一的。而类选择器可以在多次出现，所以ID选择器的针对性更强。
示例：
通过 # 来定义一个ID选择器，设置背景颜色为粉色的样式：
#only{
background-color: pink;
}
然后在 HTML 中通过 id 属性使用这个ID选择器：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd.com)</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3 class="rabbit">动物园里有什么？</h3>
<p class="rabbit">小白兔</p>
<p>小狮子</p>
<p>小老虎</p>
<p id="only">小猴子</p>
</body>
</html>
在浏览器中演示效果：
我们可以在 HTML 标签中通过 id 属性来使用 CSS 中对应的 ID 选择器。在使用时，ID选择器名称前面不需要带井号#。
总结
当我们想要在 HTML 元素中设置 CSS 样式时，可以通过选择器来实现，最常用的是三种基础选择器。当标签选择器不能满足我们的需求时，我们就可以使用类选择器和ID选择器。
记住在同一个页面中，不允许有相同的 id 出现，但是允许有相同的 class。
智能推荐
在原生php中使用弹窗,如何利用原生js简单封装confirm弹出框-程序员宅基地
文章浏览阅读334次。由于项目需要，做了一个超级简单的弹出框，一打开页面就弹出弹出框。由于项目总监说要尽量小(少引入封装的文件包)，所以采用原生js(发现网上基本上都是用jQuery做的)，话不多说，上代码吧登录确定提醒html,body {margin: 0;padding: 0;font-family: "微软雅黑";}.wrap-dialog {position: fixed;top: 0;left: 0;wid..._封装window.confirm
input type=file不能重复上传同一个文件_input type file 不让选择同一个文件-程序员宅基地
文章浏览阅读1.6k次。input type=file不能重复上传同一个文件把 input 的 type 类型转变为其他input类型，然后再转成 file 类型_input type file 不让选择同一个文件
Redis集群-程序员宅基地
文章浏览阅读1.1k次，点赞30次，收藏21次。为什么需要redis集群？当主备复制场景，无法满足主机的单点故障时，需要引入集群配置。，针对这种情况，我们优化数据库可以采用读写分离的策略。我们可以部 署一台主服务器主要用来处理写请求，部署多台从服务器 ，处理读请求。
硬核分享,靠这套MySQL笔记轻松过了阿里二面，基础架构调优齐全了-程序员宅基地
文章浏览阅读840次，点赞29次，收藏15次。小编在这里分享些我自己平时的学习资料，由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！程序员代码面试指南 IT名企算法与数据结构题目最优解这是” 本程序员面试宝典!书中对IT名企代码面试各类题目的最优解进行了总结，并提供了相关代码实现。针对当前程序员面试缺乏权威题目汇总这一-痛点， 本书选取将近200道真实出现过的经典代码面试题，帮助广“大程序员的面试准备做到万无一失。“刷”完本书后，你就是“题王”!
day01 深度学习介绍-程序员宅基地
文章浏览阅读1k次，点赞27次，收藏24次。1、深度学习机器学习的分支。人工神经网络为基础，对数据的特征进行学习的方法。2、机器学习和深度学习的区别：机器学习：人工的特征抽取。深度学习：自动的进行特征抽取。机器学习：数据少，效果不是很好深度学习：数据多，效果更好图像识别：物体识别、场景识别、人脸检测跟踪、人脸身份认证。自然语言处理技术：机器翻译、文本识别、聊天对话。语音技术：语音识别4、深度学习框架：pytorch。
HTML 前端学习（3）—— CSS 选择器_html 选择框css-程序员宅基地
文章浏览阅读174次。HTML 前端学习（3）—— CSS 选择器CSS 注释CSS 语法结构二级目录三级目录CSS 注释/*单行注释*//* 多行注释 多行注释 多行注释 ... */通常我们在写 CSS 样式的时候也会用注释来划定样式区域（因为 HTML 代码多所以对应的CSS代码会很多） /* 这是首页的 CSS 样式文件 */ /*顶部导航栏样式*/ ... /*左侧菜单栏注释*/ ..._html 选择框css
随便推点
[已解决] 中央仓库jar包上传报错：Event: Failed: Checksum Validation_failed to upload checksum to-程序员宅基地
文章浏览阅读2.5k次。[已解决] 中央仓库jar包上传报错：Event: Failed: Checksum Validation文章目录问题描述解决方案参考资料问题描述最近在向Maven中央仓库上传包后，进行close时，出现如下的问题。Event: Failed: Checksum ValidationypeIdchecksum-stagingfailureMessageRequires one-of SHA-1: /wiki/primo/generator/primo-generat_failed to upload checksum to
Java各坐标系之间的转换（高斯、WGS84经纬度、Web墨卡托、瓦片坐标）-程序员宅基地
文章浏览阅读8.5k次，点赞9次，收藏27次。本文整理了一些地理坐标系之间的转换（Java代码）pom依赖 <dependency> <groupId>com.vividsolutions</groupId> <artifactId>jts</artifactId> <version>1.13</version> </dependency>
大数据正式Zebra1_zebra 大数据 安装 csdn-程序员宅基地
文章浏览阅读1k次。Zebra1进程进程程序加载到内存中之后被cpu所计算的过程，进程是计算机资源分配和任务调度的最小单位三个维度进程物理内存维度：每一个进程都要分配一个连续的内存空间【首尾地址】执行角度/逻辑角度：每个进程都可以被cpu计算，每一个进程都能挂起然后让另外的进程被cpu计算--对于单核cpu而言，每一个时刻只能执行一个进程【对于Windows而言，默认是一个核处理，对于linux而言，有几个核就可以用..._zebra 大数据 安装 csdn
2024年GitHub上那些优秀Android开源库总结，美团架构师深入讲解Android开发-程序员宅基地
文章浏览阅读817次，点赞23次，收藏19次。当系统内存不足时，Android系统将根据进程的优先级选择杀死一 些不太重要的进程，优先级低的先杀死。进程优先级从高到低如下。
Anaconda+python3.7+tensorflow2.4环境配置_python3.7 对应tensorflow-程序员宅基地
文章浏览阅读1.2k次。进入TF2.4环境后输入：pip install --upgrade --ignore-installed tensorflow -i https://pypi.douban.com/simple。5、由于最后模型训练打算在jupyter notebook上弄，所以，要在tensorflow环境（我这里的环境名是TF2.4）中。6、后续会发现有很多的包没有安装，以管理员身份进入jupyter prompt-->进入TF2.4的TensorFlow环境-->4、重新进入终端，进入TF2.4的环境。..._python3.7 对应tensorflow
【tracking.js】前端人脸识别框架 tracking.js 活体检测/拍照在 vue2 的使用-程序员宅基地
文章浏览阅读2.6k次。Tracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件(足够使用了)。做项目要用到活体检测和拍照的实现效果活体检测组件包需到下载 tracking-min.js ..._tracking.js