首页 > 其他分享 >html元素中class属性值多个空格分格是什么意思?

html元素中class属性值多个空格分格是什么意思?

时间:2022-08-20 16:45:55浏览次数:102  
标签:style 优先级 多个 样式 分格 alert html class

https://www.cnblogs.com/XACOOL/p/5645679.html

即指定多个class,这是bootstrap常干的事,比如 <div class="alert alert-info">

请问,这两个class之间的关系是什么,二者的优先级是怎样的?

我自己定义了一个class ,加在后面,但没起作用,当然,如果写到style里去是可以的。

 

你说的没错,就是指定多个class的意思,在HTML的层面上说的话,这样指定的class是同级的。同级的class需要看CSS文件的先后次序,后加载的css会覆盖前面加载的css。写到style的话因为是最后解析的所以是最高的一个优先级。

 

前面的答案,都是合理的。但依我看,这么干侧重在于 CSS 的模块化设计。.alert 是基础公共层,.alert-info 是个表现扩展层。

像 @Aivier 所说的,它还有可能有 alert-warning,alert-success 等等,假如我们每个分开写的话,小页面没什么问题,但是它在一个大项目里,就显得很笨拙,增加了开发的时间成本。所以,人们为了提高代码的重用性,把类似的结构或功能等等的部件,划为一个模块。然后把它们的共性提炼出来,也就是这段代码前的 .alert,再分开写它们具体的表现样式,即.alert-info

 

多个class你可以理解成一对多的意思,说的是这一块有多个class样式。 css的优先级考虑的地方还算比较多,你这里使用style毫无疑问是优先级最高的,任何情况想style的优先级都是最高的。其次是ID和各种选择器和继承,其实单独一个class的优先级很低的。

 

<div class="alert alert-info">

同时指定了多个CSS样式,这里面的alert-info还可以换成alert-warning,alert-success等,这样分开多个class可以减少重复的代码,alert中的样式只写一次即可,而不用alert-warning,alert-info中都重复一遍

你自己写的样式可以在分号前增加 !important 来强制应用样式

标签:style,优先级,多个,样式,分格,alert,html,class
From: https://www.cnblogs.com/jmbt/p/16608059.html

相关文章

  • HTML之marquee(文字滚动)详解
    https://www.cnblogs.com/smiler/p/4892918.html语法:<marquee></marquee>以下是一个最简单的例子:代码如下:<marquee><fontsize=+3color=red>Hello,World</font><......
  • Java SE 10 Application Class-Data Sharing 示例
    JavaSE10ApplicationClass-DataSharing示例作者:Grey原文地址:JavaSE10ApplicationClass-DataSharing示例Class-DataSharingCDS全称Class-DataSharing。......
  • html页面提交两次才能跳转页面的原因?
    遇到的现象:提交后数据库内容增加了,但页面没有跳转,在网址栏最后多了一个"?"类似于:http://127.0.0.1:8080/test.html?第二次提交才会跳转页面 原因:在form表单中,所......
  • vue项目打包成dist文件以后,index.html加载空白?
    打包成dist文件以后,index.html加载空白没有修改config配置文件,直接打包,系统默认的是’/’(根目录),而不是’./’(当前目录),从而导致路径不对,页面加载不出来。针对vue-cli3.......
  • HTML与CSS(浅学一下)-----6:
    HTML与CSS(浅学一下):JavaScript:Javascript语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码。JS是Netscape网......
  • HTML与CSS(浅学一下)-----5:
    HTML与CSS(浅学一下):选择器:标签名选择器:格式:在head标签里面使用style标签。<!--需求:在所有div标签上修改文字字体颜色为蓝色,字体大小为30个像素,边框为1像......
  • 【Python】使用requests_html解析HTML页面
    1、官网https://pypi.org/project/requests-html/ 2、githubhttps://github.com/kennethreitz/requests-html 3、安装pipinstallrequests-html  4、使用......
  • JQuery_DOM通用属性操作和JQuery_DOM class属性操作
    JQuery_DOM通用属性操作1.attr(): 获取/设置元素的属性2.removeAttr():删除属性3.prop():获取/设置元素的属性4.removeProp():删除属性<!DOCTYPEHTMLPUBLIC"-//W3C......
  • DOM的通用属性操作和class属性操作
    通用属性操作attr():获取/设置元素的属性removeAttr():删除属性prop():获取/设置元素的属性removeProp():删除属性attr和prop区别:1、如果操作的是元素的固有属性,则建......
  • @Transactional注解加不加 rollbackFor = Exception.class 的区别
    先上结论:1.@Transactional只能回滚RuntimeException和RuntimeException下面的子类抛出的异常不能回滚Exception异常2.如果需要支持回滚Exception异常请用@Transactio......