CSS选择器

2023-05-16

CSS的选择器包括两种:Id和Class、

1、ID选择器

id选择器可以标有特定ID的HTML元素指定特定的样式

HTML元素以ID属性来设置ID选择器,CSS中ID选择器以“#”来定义

以下选择器规则应用于元素属性id="para1"

代码:

<html>
<head>
<meta charset="utf-8"> 
<title>CSS的id选择器</title> 
<style>
#para1
{
    text-align:center;
    color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

输出:

注意: id选择器不要以数字开头、数字开头的选择器在Mozilla/Firefox 浏览器不起作用

2、class选择器

class选择器用于描述一组元素的样式,class和ID选择器不同,class选择器可以在多个元素中使用(因为id是唯一的)

class选择器在HTML中以class属性表示,在CSS中,class选择器以一个“.”号显示

举例:

<html>
<head>
<meta charset="utf-8"> 
<title>CSS的Class选择器</title> 
<style>
.center<!--注意有前面的"."点-->
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

输出:

注意:class选择器的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

 

上述就是css的两种选择器,so easy!!!!!!!!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS选择器 的相关文章

  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是
  • 使用纯 CSS 创建向上和向下箭头图标或按钮

    我正在尝试使用纯 CSS 且无背景图像创建如下所示的 向上和向下 控制按钮 但是当我在 中添加箭头的CSS时li className after or li className before 主盒子的位置移动了 这是我遇到的问题的小提琴 g
  • 如何让CSS选择以字符串开头的ID(不是Javascript)?

    如果 HTML 中有这样的元素 id product42 id product43 如何匹配所有以 product 开头的 id 我已经看到了完全使用 javascript 执行此操作的答案 但是如何仅使用 CSS 执行此操作 id pro
  • chrome 中选择选项元素的额外填充

    我有一个选择元素 用户可以在其中选择分类和描述 仅在 Chrome 浏览器中 我有一个额外的填充 无法使用 padding 0 或其他 css 标签删除它 Chrome 的屏幕 https i stack imgur com m3iIb p
  • 是否可以设置输入文本值的样式?

    我想知道是否可以设置输入框值的样式 such http jsfiddle net aCwhY as
  • Gmail 无法在电子邮件上正确呈现字体

    我已经建立了一个 html 电子邮件并使用了 Google 字体 我已使用以下方法将字体包含在 head 标签中 if mso endif 并使用字体 即我这样做了
  • 闪亮的应用程序包:css 和所有 www/ 目录内容

    我正在尝试将 Shiny 应用程序转换为 R 包 但我在处理有关 www 目录以及 松散 文件的所有问题时遇到了问题 我闪亮的应用程序运行得很好 但是当我尝试 打包它 时 它不起作用 我闪亮的应用程序目录 my shiny app R ut
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS
  • 将输入中每个单词的第一个字符设为大写

    我想知道如何在输入区域自动生成单词的第一个字符 目前我的代码是 Name
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • CSS:水平滚动时背景不存在

    好的 我的背景设置如下 HTML div div CONTENT HERE div div CSS container background url image gif content width 800px margin auto 因此
  • 如何将此 HTML 表格布局解决方案转换为浮动 div 解决方案?

    我经常需要列出各种尺寸的项目images在左边和text在右边 像这样 替代文本 http www deviantsart com upload 7s01l5 png http www deviantsart com upload 7s01
  • 如何为背景图像添加边距?

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • 如何在背景剪辑中包含文本装饰:文本;影响?

    我在用 webkit background clip text border and color transparent在锚标记上 下划线似乎永远不可见 我想要的是将文本装饰包含在背景剪辑中 这是我的CSS background clip
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di

随机推荐

  • Spring框架jar包的下载方法

    1 登录 xff1a http repo springsource org libs release local org springframework spring 4 2 0 RELEASE 选择自己需要的版本 打开 2 进入上图中选中
  • list添加一个对象的时候抛出NullPointerException

    出现这个问题的原因在于 当你定义了一个List时 xff0c 但是没有new该list xff0c 也没有在无参构造方法中去new该list xff0c 就会抛出空指针异常 例如 xff1a private static List lt U
  • sql语句注意事项

    例子 xff1a select deptno avg sal count from emp where deptno 61 20 group by deptno having count gt 3 having 进行二次筛选 order b
  • Vue指令之V-if篇

    v if见名知意 xff0c 就和我们在java中的if功能类似 java中if xff08 条件成立 xff09 执行语句 只不过Vue中将java中的执行语句换成了标签快中的内容 在v if中 xff0c 也是类似的 v if 61 3
  • 安装SFTP/FTP插件快速编辑远程服务器文件

    默认的Sublime Text 3 是没有sftp ftp功能的 xff0c 如果编辑器自带ftp势必会提高开发效率 xff0c 虽然Sublime Text 3 默认是没有ftp功能 xff0c 但是安装sftp插件很容易 下面是我安装步
  • Vue指令之v-else篇

    讲完v if篇 xff0c 那么接下里我们就说说v else喽 对比java中的if 条件 条件成立执行的语句 else 条件不成立执行的语句 我相信你的脑瓜子已经转了90度 xff0c 已经完全搞明白Vue的v else该怎么用了 没错
  • Vue指令之v-for篇

    现在接着来扯v for指令 v for顾名思义 xff0c 和java中的for指令一个用法 xff0c 该指令用来循环遍历一个数组 v for 指令需要以 site in sites 形式的特殊语法 xff0c sites 是源数据数组并
  • Vue指令之v-on篇

    说到v on就立马事件 xff0c 最典型的的例子就是按钮的事件我们可以用v on监听事件 xff0c 并对用户的输入进行响应 先举个例子 xff0c 上代码 xff1a lt html gt lt head gt lt meta char
  • Vue指令之v-bind篇

    v bind指令 xff0c bind中文意思是捆绑的意思 xff0c 额 xff0c 捆绑 其绑定的参数在v bind 指令中的maohao xff08 冒号 xff09 后指明 xff0c 没错就是我标红的那个冒号 v bind指令被用
  • 5分钟认识JSON

    JSON JavaScript Object Notation JavaScript 对象表示法 什么是Json Json是java script 对象表示式 json是轻量级的文本数据交换格式 json对立于语言 xff1a json使用
  • JS中的const、var和let的区别

    看项目的时候遇到了const和let不知道什么意思 xff0c 特写此博客给记忆力不好的我 1 const定义的变量不可以修改 xff0c 而且补习初始化 xff08 相当于java中的常量 xff09 const a 61 2 正确 a
  • SpringMVC执行的流程

    先通过一个流程图来介绍请求 响应的完整流程 该图是SpringMVC请求响应的完整流程 工作流程如下 xff1a 1 用户向服务器发送请求 xff0c 请求被前端控制器DispatcherServlet截获 2 DispatcherServ
  • SpringMVC之@Controller注解

    Spring从2 5版开始引入注解 xff0c 本文说的是SpringMVC 4版 64 Controller注解 Controller注解用于指示Spring类的实例是一个控制器 xff0c 相对于实现Controller接口变得更加简单
  • SpringMVC之@RequestMapping注解

    RequestMapping xff1a org springframework web bind annotation RequestMapping RequestMapping注解类型用来指示Spring用哪一个类或方法来处理请求动作
  • Model和ModelAndView

    在 64 RequestMapping注解的方法中 xff0c 可出现和返回的参数类型中 xff0c 最重要的就是Model和ModelAndView了 SpringMVC在内部使用了一个Model接口存储模型数据 xff0c 它的功能类似
  • 解决 GTS GtsPermissionTestCases 模块 testPreloadedAppsTargetSdkVersion fail 问题

    报错报告截图 xff1a 解决办法 xff1a 重新生成 release platform shared media 4对签名文件替换 span class token number 1 span 重新替换release platform
  • @RequestParam注解

    在一些业务场景下 xff0c 前端发送请求的属性名称和后端方法接收参数名不相同 xff0c 这时候就要用到 64 RequestParam注解将后端的参数名重命名为前端对应的参数名称 xff01 org springframework we
  • Photoshop安装包破解安装教程

    详细的Photoshop安装包获取及破解安装过程 xff0c 请看大神的链接 https blog csdn net cssavage article details 81508689 本人亲测 xff0c 着实可靠 xff01 xff01
  • MySQL连接查询—自身连接

    若一个查询同时涉及两个表及以上的表 xff0c 则称之为连接查询 连接查询是关系数据库中最主要的查询 xff0c 包括等值连接查询 自然连接查询 非等值连接查询 自身连接查询 外连接查询和复合条件查询等 1 等值于非等值连接查询 连接查询的
  • CSS选择器

    CSS的选择器包括两种 xff1a Id和Class 1 ID选择器 id选择器可以标有特定ID的HTML元素指定特定的样式 HTML元素以ID属性来设置ID选择器 xff0c CSS中ID选择器以 来定义 以下选择器规则应用于元素属性id