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。
智能推荐
如何让文字位于图片的右边并垂直居中？_文字在图片右边高度居中-程序员宅基地
文章浏览阅读3.5k次。如何让文字位于图片的右边并垂直居中？首先要知道图片的高度图中的头像height为40px_文字在图片右边高度居中
PWN 栈溢出-程序员宅基地
文章浏览阅读937次。Beginning如果想用栈溢出来执行攻击指令，就要在溢出数据内包含攻击指令的内容或地址，并且要将程序控制权交给该指令。攻击指令可以是自定义的指令片段，也可以利用系统内已有的函数及指令0x01函数调用栈是指程序运行时内存一段连续的区域，用来保存函数运行时的状态信息，包括函数参数与局部变量等。称之为“栈”是因为发生函数调用时，调用函数（caller）的状态被保存在栈内，被调用函数（ca..._pwn 栈溢出
文件下载时文件后缀与contentType对应表_application/x-msdownload对应的文件类型-程序员宅基地
文章浏览阅读6.4k次，点赞2次，收藏9次。文件类型如下:".*"="application/octet-stream"".001"="application/x-001"".301"="application/x-301"".323"="text/h323"".906"="application/x-906"".907"="drawing/907"".a11"="application/x-a11""._application/x-msdownload对应的文件类型
系统更新及疑难处理-程序员宅基地
文章浏览阅读345次。系统更新及疑难处理利用WSUS部署更新程序微软公司的主要补丁类型nHotfix是针对某一个具体的系统漏洞或安全问题而发布的专门解决该漏洞或安全问题的小程序，通常称为修补程序n微软公司会及时地将软件产品中发现的重大问题以安全公告的形式公布于众，这些公告都有一个惟一的编号，即“MS”，如MS04-011n还有一种形式为KB（2003年4月份后用此编号）的编号，这个编..._允许来自internetmicrosoft更新服务位置的签名更新
【论文】ROS系统的无人小车自动跟随方案研究-程序员宅基地
文章浏览阅读3.7k次，点赞3次，收藏45次。本文基于ROS操作系统介绍了一种运动与跟随系统的设计及实现，该跟随系统包括以激光雷达进行全方位角度的距离测量，使用Python语言编写脚本，通过编写激光雷达话题的订阅以及运动话题的发布，完成对目标的运动控制以及对被跟随目标的感知和产生跟随相应的动作。本系统中无论被跟随目标位于跟随机器人的任何方位，均能实现机器人的跟随，无需额外的基站、标签等定位设施，可以减少整个跟随系统成本。基于ROS系统使开发简单快速，适用范围广，具有良好的可移植性和通用性。_ros系统的无人小车自动跟随方案研究
几十款游戏的简单分析_游戏分析-程序员宅基地
文章浏览阅读1.3k次。笔者曾在多个游戏平台上玩过众多游戏，包括fc红白游戏机游戏、网页游戏、单机游戏、客户端游戏、手游等。在游戏过程中，笔者常常从多个角度对游戏进行分析，包括游戏的优缺点、改进方法、数值设计、音效、画面等方面。本篇文章简要但关键地记录了笔者在游戏体验和策略分析方面的一些心得体会。综合以上所述，一款成功的游戏需要满足一些基本要素。首先，它必须是新颖的、有趣的、易于上手的，同时游戏数值、画面、音效等方面也要在合理区间。_游戏分析
随便推点
H3C模拟器配置vlan-程序员宅基地
文章浏览阅读3.3k次，点赞4次，收藏7次。Valn 11组网需求• 交换机GE_2上的VLAN 5 和VLAN 10 为Primary VLAN，其上层端口GigabitEthernet1/0/1需要允许VLAN 5 和VLAN 10 的报文携带VLAN Tag 通过。• 交换机GE_2 的下行端口GigabitEthernet1/0/2 允许Secondary VLAN 2 通过，GigabitEthernet1/0/3 允许Sec..._新华3模拟器vlan配置
img撑满全屏的方法（img非背景图）_img 铺满-程序员宅基地
文章浏览阅读4.7w次，点赞8次，收藏15次。我有一个模板，想按常规做一个div里面放置一个img图片，并且让图片铺满容器，自适应容器大小。HTML结构代码如下（在这个盒模型上，我已经放置了一些不重要的样式）。div style="height:270px;width:400px;border:2px black solid;"> a href="http://www.paipk.com">img src="..." alt="拍_img 铺满
UnicodeDecodeError: ‘utf-8‘ codec can‘t decode byte 0xb0 in position 5: invalid start byte_ebpf bcc unicodedecodeerror: 'utf-8' codec can't d-程序员宅基地
文章浏览阅读947次。UnicodeDecodeError: 'gbk' codec can't decode byte 0xfa in position 4669: illegal multibyte sequenceUnicodeDecodeError: 'utf-8' codec can't decode byte 0xb0 in position 5: invalid start bytewith open('进线汇总20201211.csv',encoding='utf8') as f: t = f._ebpf bcc unicodedecodeerror: 'utf-8' codec can't decode byte 0xb0 in positio
使用条件序列GAN改进NMT_improving neural machine translation with conditio-程序员宅基地
文章浏览阅读1.3k次。使用条件序列GAN改进NMT原文《Improving Neural Machine Translation with Conditional Sequence Generative Adversarial Nets》课程作业，因为要导出pdf所以粘贴到CSDN了，34章是笔者翻译的部分。当一篇post吧，求别喷，有问题请留言我一定改，一定改。摘要本文提出了一种将GANs应用于NMT领域的方..._improving neural machine translation with conditional sequence generative ad
产品周报第33期｜完善铁粉规则，优化原创保护策略，升级创作中心的数据展示，开放业界专家自定义域名权益……_创作者中心铁粉数0-程序员宅基地
文章浏览阅读5k次。目录一、博客产品功能完善1、完善铁粉说明规则2、创作中心专栏数据升级3、发文助手新增「添加模版」指引4、免费开放业界专家自定义域名权益5、其他优化二、问答产品体验优化1、回答链接和链接详情页调整2、PC端提问页优化3、创作中心页面的问答列表优化三、首页热榜及优质内容推进方面的改进四、吐槽提建议直通车，直达CSDN各产品与运营人员查看往期改进hello，大家好，这里是「CSDN产品周报」第33期。本次更新主要涉及博客、问答及首页，欢迎大家详细了解和使_创作者中心铁粉数0
自建网盘之 NextCloud 终极记录-程序员宅基地
文章浏览阅读1.7k次。自建过许多网盘，试过 可道云、Seafile、FileRun、Nextcloud，但Nextcloud的如下特性吸引了我：完整、好用的客户端，包括 windows、mac、android、ios ...强大的插件扩展，如 Talk, Contacts, notes, Maps ...完整的第三方扩展，支持 Amazie S3, OneDrive, ..._可道云 nextcloud seafile