html类选择器和id选择器,HTML+CSS：css选择器介绍之标签选择器、类选择器以及ID选择器...-程序员宅基地
技术标签： html类选择器和id选择器
原标题：HTML+CSS：css选择器介绍之标签选择器、类选择器以及ID选择器
上篇文章给大家说了css的三种不同的引入方式，今天给大家说一下css的三种选择器：标签选择器、类选择器和ID选择器。
那么有人就会问了，什么是选择器？我们写的css样式声明(定义)由两部分组成，形式如下：选择器{ 样式；}，在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如我们之前写的span{ color:#f00; }中的span就为一个选择器。
(1)标签选择器
标签选择器其实就是我们经常说的html代码中的标签。例如html、span、p、div、a、img等等；比如我们想要设置网页中的p标签内一段文字的字体和颜色，那么css代码就如下所示：
上面的css样式代码的作用：为p标签内的文字设置颜色为红色，字体的大小为16px；(具体的css样式我们会在后边讲解，这里先了解下即可)
(2)类选择器
类选择器在我们今后的css样式编码中是最常用到的，它是通过为元素设置单独的class来赋予元素样式效果。
使用语法：(我们这里为p标签单独设置一个类选择器.content,代码就如下所示)
1、类选择器都是使用英文圆点(.)开头；
2、每个元素可以有多个类名，，名称可以任意起名(但不要起中文，一般都是与内容相关的英文缩写)
3、类选择器只会改变类下的元素样式，而不会改变其它标签的默认样式；
我们上边的页面在浏览器上显示的效果就如下所示：(content下的文字内容颜色变成了红色，字体变成了16px)
(3)ID选择器
ID选择器类似于类选择符，作用同类选择符相同，但也有一些重要的区别。
详细讲解：
1、ID选择器为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是符号为井号(#)，而不是英文圆点(.)。
3、ID选择器的名称是唯一的，即相同名称的id选择器在一个页面只能出现一次；
对于css的三种选择器我们今天就先介绍到这里，大家在平时可以自己多加练习练习，多熟练下class的使用方式与技巧。
你今天的努力，是幸运的伏笔，当下的付出，是明日的花开。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。返回搜狐，查看更多
责任编辑：
智能推荐
logback标签说明_logback中logger标签对应的name-程序员宅基地
文章浏览阅读460次，点赞6次，收藏5次。logback的配置，需要配置输出源appender，打日志的logger（子节点）和root（根节点），实际上，它输出日志是从子节点开始，子节点如果有输出源直接输入，如果无，判断配置的additivity，是否向上级传递，即是否向root传递，传递则采用root的输出源，否则不输出日志。鉴别器，常用的鉴别器是JaninoEventEvaluato，也是默认的鉴别器，它以任意的java布尔值表达式作为求值条件，求值条件在配置文件解释过成功被动态编译，布尔值表达式返回true就表示符合过滤条件。_logback中logger标签对应的name
asp.net 基本控件_asp.net控件-程序员宅基地
文章浏览阅读1k次，点赞16次，收藏17次。最经典的图标按钮就是Windows的最小化、最大化、关闭、前进后退、刷新按钮。属性：纯图标按钮的形状本身就具有很形象的解释力，光标悬浮在按钮上时经常会弹出更详细的说明信息框，用来具体解释此按钮实现的功能。点击命令按钮产生的响应有弹出新窗口、弹出框体、弹出新页面、切换或弹出菜单(结合菜单栏)、弹出列表框(结合下拉列表)、刷新、放大/缩小/收起/关闭窗口等等。属性：纯图片按钮就是一张图片可以点击产生响应，不同于图标按钮，图片更有预览意义，图片内容不代表功能，同一功能可能因为场景、对象不同而图片内容不同。_asp.net控件
Python图像处理库PIL的滤波_ImageFilter_简述pil对图像进行滤波处理有哪些滤波器?-程序员宅基地
文章浏览阅读4.4k次，点赞10次，收藏36次。 Python图像处理库PIL的滤波_ImageFilterImageFilter模块提供了滤波器相关定义;这些滤波器主要用于Image类的filter()方法。一、ImageFilter模块所支持的滤波器当前的PIL版本中ImageFilter模块支持十种滤波器:1、 BLURImageFilter.BLUR为模糊滤波,处理之后的图像会整体变得模糊。..._简述pil对图像进行滤波处理有哪些滤波器?
Qt Quick 常用元素：RadioButton(单选框)，CheckBox(复选框) 与 GroupBox(分组框)_qml radiobutton-程序员宅基地
文章浏览阅读125次。先介绍一下 ExclusiveGroup。ExclusiveGroup (互斥分组）本身是不可见元素，用于将若干个可选择元素组合在一起， 供用户选择其中的一个选项。你可以在 ExclusiveGroup 对象中定义 RadioButton、CheckBox、Action 等元素，此时不需要设置它们的 exclusiveGroup 属性；_qml radiobutton
vue处理json数据的原理_vue中json处理方法-程序员宅基地
文章浏览阅读2.7k次。json后端给我的数据，现在要将 标准陪练-5节 这条数据不展示。我的想法第一想法是要么隐藏，要么处理json删除这条数据。我用delete，但是发现原json长度不变只是变空了，而且在v-for渲染的时候报错了{{item.lesson_name}}var app = new Vue({el:"#myapp",data:function(){return{json:[{"type_name":"..._vue如何将json数据变为空
JSON提取器-程序员宅基地
文章浏览阅读4.2k次，点赞3次，收藏24次。1.创建json提取器、相关配置及使用Variable names：保存的变量名，后面使用${Variable names}引用JSON Path expressions：调试通过的json path表达式Match Numbers：匹配数字（0代表随机，1代表第一个，-1代表所有）Default Values：找不到时默认值，一般设置为NOT FOUNDCompute concate..._json提取器
随便推点
STM32 MFRC522 IC读卡 程序及原理图_rc522电路原理图-程序员宅基地
文章浏览阅读6.9k次，点赞3次，收藏41次。https://blog.csdn.net/cxw312864660/article/details/89384584【RC522芯片简介】 MF RC522是应用于13.56MHz非接触式通信中高集成度的读写卡芯片，是NXP公司针对“三表”应用推出的一款低电压、低成本、体积小的非接触式读写卡芯片，是智能仪表和便携式手持设备研发的较好选择。 MF RC522利用了先进的调制和解调概念，完..._rc522电路原理图
用Node + EJS写一个爬虫脚本每天定时女朋友发一封暖心邮件_87982117-程序员宅基地
文章浏览阅读1.7k次。本文首发于个人博客：Vince'Blog项目源码：NodeMail，欢迎star，说不定哪天脱单了就能用到了写在前面自从用邮箱注册了很多账号后，便会收到诸如以下类似的邮件,刚开始还以为是一张图片，后来仔细一看不是图片呀，好像还是HTML呀，于是好奇宝宝我Google一下，查阅多篇资料后总结出怎么用前端知识和Node做一个这样的“邮件网页”。确认主题知道怎么..._87982117
【C语言初阶】C语言%（%d,%c...）_c语言引导符大全-程序员宅基地
文章浏览阅读1.2w次，点赞38次，收藏271次。C语言%（%d,%c...）_c语言引导符大全
使用Let's Encrypt申请永久免费通配符证书_不能直接用域名后缀申请通配符证书!-程序员宅基地
文章浏览阅读5.1k次，点赞3次，收藏11次。由于现在网络安全形势的影响，大多数网站都启用了https。本文介绍一种申请永久免费的通配符证书的方法，可以适配一个域名下的所有站点（例如：www.abc.com和子域名ss.abc.com都可以用一个证书启用https）。我所使用的申请证书的环境是Centos7,因为这个是官方提供的是一个python的程序，有一些依赖的库，要pip下载，因为有些链接容易超时，还是建议把pip的源改到中国来。申..._不能直接用域名后缀申请通配符证书!
SDL2.0自己整理的学习教程+自己的学习笔记_sdl2 教程 pdf-程序员宅基地
文章浏览阅读2.4k次。网上大多教程教的比较浅 以下部分是我结合教程和自己上SDL官网一个一个找出来翻译的写的比较乱见谅第一章hello喜欢先发代码在分析 #include "SDL2\SDL.h"#include "SDL2\SDL_image.h"#undef mainint main(int argc, char* args[]){SDL_Window *p = NULL;/*窗口*_sdl2 教程 pdf
tensorboard 如何显示两个模型的对比？_tensorboard 对比不同模型训练-程序员宅基地
文章浏览阅读2.3k次。我将两组模型一个用softmax分类器分类，一个直接线性输出，想比较一下训练过程中的参数变化.一个放到了./json/下，一个放到了./json/Acc下试用的网上的语句失败tensorboard --logdir = run1:"./json/" , run2:"./json/Acc/"这样的路径，每次要么直接乱码，要么直接就找不到文件。后来发现去掉 --logdir 后面的”=“直接输入大的文件夹./json/tensorboard --logdir ./json/_tensorboard 对比不同模型训练