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 来强制应用样式
html元素中class属性值多个空格分格是什么意思?的更多相关文章
- html元素中class属性值多个空格分格
问题: 比如 <div class="alert alert-info"> 回答: 同时指定了多个CSS样式,这里面的alert-info还可以换成alert-warn ...
- javascript_获取iframe框架中元素节点的属性值
1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...
- <s:property="a" value=""/>取的<s:debug></s:debug>中的value stack中的属性值
<s:property="a" value=""/>取的<s:debug></s:debug>中的value stack中 ...
- LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!
LinearLayout的gravity属性以及其子元素的layout_gravity何时有效:RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayou ...
- 将source类中的属性值赋给target类中对应的属性
/** * 对象的属性值拷贝 * <p> * 将source对象中的属性值赋值到target对象中的属性,属性名一样,类型一样 * <p> * example: * <p ...
- Spring中使用@Value读取porperties文件中的属性值方法总结及注意事项
本文为博主原创,转载请注明出处. 此前曾总结过使用工具类读取properties文件中的属性值,有兴趣的可以看一下. 如何快速获取properties中的配置属性值:https://www.cnblo ...
- 【Python】获取翻页之后的各页面中的属性值。
如何获取翻页之后的页面中的html标签中的属性值? # coding=utf-8 from selenium import webdriver if __name__=="__main__& ...
- ajax取到数据后如何拿到data.data中的属性值
今天遇到的ajax取到数据后如何拿到data.data中的属性值的问题 比如拿到了数据 我要取出data中的name 题外话:当然取名最好别取什么奇怪的xiaobi
- Implement Property Value Validation in the Application Model 在应用程序模型中实现属性值验证
In this lesson, you will learn how to check whether or not a property value satisfies a particular r ...
随机推荐
- sql convert() 函数
convert: 时间格式转换为其他时间格式的函数 CONVERT ( data_type [ ( length ) ] , expression [ , style ] ) data_type: ...
- MVC视图路径修改方法
http://wenku.baidu.com/link?url=MwAaKgGevU7hfRuTyCL95ZbJuDsNc4b__jEWisY9GuzAJzEUgEdoj7uQ-wurbYtz1IQj ...
- python修炼4
---恢复内容开始--- 集合 建立 set() ={},集合没有顺序,由不可改变的数字 ,字符串,元组构成 #交集print(a&b) #a.intersection(b) #并集prin ...
- java 生成证书用于https
在jdk的bin目录下运行: keytool -genkeypair -alias "tomcat" -keyalg "RSA" -keystore " ...
- Asp.Net MVC2.0 Url 路由入门---实例篇
本篇主要讲述Routing组件的作用,以及举几个实例来学习Asp.Net MVC2.0 Url路由技术. 接着上一篇开始讲,我们在Global.asax中注册一条路由后,我们的请求是怎么转到相应的Vi ...
- 一:python入门
Python简介 这点就不做陈述了,相信各位朋友已经已经有了一定的了解. Python特色: 1:简单 第一次接触Python给我的感觉它的语法阅读就像是阅读一本英文书的目录一样,简单易懂,它的语法要 ...
- Scala学习---数组
1.编写一段代码,将a设置为一个n个随机整数的数组,要求随机数介于0(包含)和n(不包含)之间 /** * Created by vito on 2017/1/11. */ object ex1 { ...
- AngularJs应用
引用angularjs文件 AngularJS 应用组成如下:View(视图), 即 HTML.Model(模型), 当前视图中可用的数据.Controller(控制器), 即 JavaScript ...
- xss框架的一些想法
今天pybeef作为一个课程设计答辩完成了,向老师介绍了很多xss利用相关的场景和技术. 先说一下已经实现了什么, 1, 浏览器版本的判断 这方面只能判断IE和firefox 火狐判断只判断了user ...
- 小程序--改变子级别页面导航栏信息 / navigationBarTitleText
微信小程序在公共文件app.json中设置了导航栏相关样式如下: 其中 navigationBarTitleText 为设置导航栏名称,若是想子级页面和父页面的header页面不同,则在子级文件中新 ...