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。
智能推荐
Windows CMD命令大全-程序员宅基地
文章浏览阅读79次。打开cmd快捷键 window键+RCMD命令锦集 1. gpedit.msc-----组策略 2. sndrec32-------录音机 3. Nslookup-------IP地址侦测器 ，是一个 监测网络中 DNS 服务器是否能正确实现域名解析的命令行工具。 它在 Windows NT/2000/XP 中均可使用 , 但在 Wi...
linux 安装dwm界面,ArchLinux dwm的安装和配置-程序员宅基地
文章浏览阅读1.4k次。dwm官网：https://dwm.suckless.org/dwm是一个简洁的平铺式窗口管理器配置简单，使用便捷，没有多少依赖，占用内存非常小总之dwm正合口味安装方法首先在官网下载dwm.tar.gz并解压得到这些东西：BUGS config.mk drw.h dwm.c dwm.png Makefile...我们主要来编辑config.h来进行一些配置和编辑config.mk来正确编译对co..._xxrudwm
Echarts 计算每份占比（等分）_echarts 等分-程序员宅基地
文章浏览阅读814次。option = { series: [ { type: "gauge", startAngle: 190, endAngle: -10, min: 0, max: 100, axisLine: { lineStyle: { width: 15, color: [ [0.3, "#91BB7E".._echarts 等分
Jemeter_jemeter官网下载-程序员宅基地
文章浏览阅读225次。https://www.cnblogs.com/monjeo/p/9330464.html_jemeter官网下载
从工作的角度看 CV/NLP/推荐系统选哪个？-程序员宅基地
文章浏览阅读711次。前言学院第一至第四期具有求职意向的同学中，目前已经有80%的同学拿到了国内外名企的AI算法岗位offer，或者国外名校的AI 硕士、全奖博士录取 offer。在大家的认可下，我们开始了..._cv和nlp哪个好找工作
eNSP网络构建—配置无线网络_ensp无线2个信号访问同一个地址-程序员宅基地
文章浏览阅读1.1w次，点赞14次，收藏117次。需求分析对于小型局域网中, 对于接入设备的需求,需要在局域网中部署无线网络,通过无线控制器AC管理网络中所有的无线AP设备，下发无线配置信息。无线网络发布2 4G和5G信号,满足不同设备的连接使用。拓扑图：注意:防火墙使用USG5500 ,路由器使用AR2220 , AC使用AC6005 , AP使用AP2050。拓扑描述：防火墙连接外网地址为192.168.12.9/24，路由..._ensp无线2个信号访问同一个地址
随便推点
计算机图形图像处理在教学中的应用,计算机图形图像处理案例教学法运用-程序员宅基地
文章浏览阅读534次。摘要：笔者根据计算机图形图像处理课程与中职学生学习的特点，分析了目前中职学校计算图形图像处理课程教学中存在的问题，针对如何提高中职学生对计算机图形图像处理课程的学习兴趣和解决实际问题的能力，提出了案例教学法在该课程中的具体实施办法，并对其实践进行了进一步的讨论。关键词：计算机图形图像处理；案例教学；中职当今世界电子商务发展迅速，计算机平面设计这门技术在很多领域都得到广泛应用。《Photoshop图..._图像分类在教育中的应用
python资源文件嵌入exe_pyinstaller将资源文件打包进exe中-程序员宅基地
文章浏览阅读921次。在网上看了很多博客，终于找到了符合自己智商可理解的打包资源文件方法，现引用如下https://www.cnblogs.com/darcymei/p/9397173.htmlhttps://blog.csdn.net/sinat_27382047/article/details/81304065"""终于把资源文件加载进去了，就是当exe文件移植后，它运行的时候会产生一个临时文件夹，把资源文件存储到..._pyinstaller如何将_internal添加进exe
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