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

即指定多个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 来强制应用样式

时间: 2024-10-15 14:38:44

html元素中class属性值多个空格分格是什么意思?的相关文章

html元素中class属性值多个空格分格

问题: 比如 <div class="alert alert-info"> 回答: 同时指定了多个CSS样式,这里面的alert-info还可以换成alert-warning,alert-success等,这样分开多个class可以减少重复的代码,alert中的样式只写一次即可,而不用alert-warning,alert-info中都重复一遍,这么干侧重在于 CSS 的模块化设计..alert 是基础公共层,.alert-info 是个表现扩展层.假如我们每个分开写的话,

javascript_获取iframe框架中元素节点的属性值

1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档. 2. JS原生方法获得iframe的window对象 document.getElementById("ifr").contentWindow; 3. 获取iframe框架的思路: (1)找到iframe框架 (2)获取iframe框架的window对象 (3)获取w

jQuery获取被被点击元素的id属性值

jQuery获取被被点击元素的id属性值:有时候可能需要获取被点击元素的一些信息,本章就以id属性为例子,进行演示一下,当然在实际应用中可能没有如此的简单,不过复杂的功能都是由小的功能组合而成的,下面通过实例代码对此做一下简单介绍.代码如下: $(document).click(function (e){ var v_id=e.target.id; } ) 相关阅读:1.click事件而已参阅jQuery的click事件一章节. 2.target属性可以参阅jQuery的event.target

(三)dom4j+Xpath的简单路径表达式获取节点元素内容和属性值

1.导包 2.创建sys-config.xml <?xml version="1.0" encoding="UTF-8"?> <config> <database-info> <driver-name>com.mysql.jdbc.Driver</driver-name> <url>jdbc:mysql://localhost:3306/sys?serverTimezone=GMT%2B8<

LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!

LinearLayout的gravity属性以及其子元素的layout_gravity何时有效 转自:http://www.cnblogs.com/xiaoran1129/archive/2013/03/26/2982733.html 相信对于Android的初学者来说,大家都曾经被layout里这两个极其相似的属性迷惑过. 简单使用一下搜索工具,我们就不难找到下面这样的答案: layout_gravity 表示组件自身在父组件中的位置 gravity             表示组件的子组件在

读取页面元素的onclick属性值 禁止重定向 获取url重定向后Location头指定的重定向目标

(1) 读取页面元素的onclick属性值 html代码: <a id='linka' onclick="alert('ok');">链接</a> 取出item身上onclick属性的值:alert('ok'); 实现: IHTMLElement *item;// 已经找到该元素 CComQIPtr<IHTMLElement> spElem(item); VARIANT var; spElem->get_onclick(&var); C

将source类中的属性值赋给target类中对应的属性

/** * 对象的属性值拷贝 * <p> * 将source对象中的属性值赋值到target对象中的属性,属性名一样,类型一样 * <p> * example: * <p> * source: * <p> * String name; * String address; * Integer age; * Date birthday; * <p> * target: * String name; * String address; * String

webBrowser控件中获取元素 的class 属性值

html 代码如下: <TR id="t030006" class="sr plus selected"> <TD><INPUT id=cvrgNo030006 value=030006 readOnly CHECKED type=checkbox jQuery1456994811776="96"></TD> <TD>车辆损失险 </TD> <TD style=&quo

关于dom元素上css属性值的取值过程

最近在研究w3c的css标准规范,css2.2版本,虽然早已进入css3时代,但是css3还是继承了很多css2的基础,所以了解css2的很多标准原理,对于理解css核心内容,对写好css,写出高性能的css是很有必要的. 这篇文章写在读了css标准第六章css属性值取值过程相关内容,英文标准地址:https://www.w3.org/TR/CSS22/cascade.html 浏览器渲染页面时,解析dom树之后,一定(标准中用了must)会对每个dom元素都加上css的属性和对应的值: “On