多类选择器的运用_html/css_WEB-ITnose
程序员文章站
2022-06-05 11:29:22
...
html
1This is urgent warning.
2Well,This is warning.What else?
css
1 .warning{font-weight:bold;}2 .urgent{font-style:italic;}3 .warning.urgent{background:silver;}
效果
说明
由以上可知,一个class值内包含一个词列表时,该类就成了多类选择器。css中对类(.warning)定义属性时,如果类名存在于多类的词列表(.urgent warning)中,多类也会被定义。而.warning.urgent的写法限定了class值内既要有warning,又要有urgent,所以该定义对第二行(.warning)并无作用。
在兼容性方面,多类选择器在IE7以上的版本中不能被正确的处理。
html
1flag2circle
css
1 .red{2 width:70px;3 height:70px;4 background:red;5 margin:10px;6 color:white;7 text-align:center;8 line-height:70px;9 }
效果
需求
将circle变成红色的圆。
说明
如果将circle的class改为一个新的class(.circle), 然后将相同样式并在一起(.red,.circle),再单独写一个.circle{border-radius:35px}不失为一种解决办法。
而如果运用多类选择器,给circle的class值内加一个circle(.red circle),然后单独写一个.red.circle{border-radius:35px}同样可以解决问题。
两相比较,在这种情况下,使用多类选择器更为快捷,省去了不必要的代码冗余,并且更有利于扩展。
参考资料:
CSS类选择器详解
上一篇: 函数block与inline有哪些区别
下一篇: php获取http状态的两个方法
推荐阅读
-
HTML5新增的Css选择器、伪类介绍
-
HTML连载63-a标签的伪类选择器
-
HTML5中的伪类选择器实现一张图片翻转特效(代码实例)
-
前端开发HTML&css入门——伪类选择器和一些特殊的选择器
-
css3中关于伪类的使用_html/css_WEB-ITnose
-
WebForm 获取实体类的数据,填充页面(用session传值)_html/css_WEB-ITnose
-
支持多浏览器的镜像反转css效果_html/css_WEB-ITnose
-
css代码中的加号(+)相邻选择器的作用_html/css_WEB-ITnose
-
初学HTML 常见的标签(三) 插入类标签_html/css_WEB-ITnose
-
超链接的那些事(一): 伪类_html/css_WEB-ITnose