欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

多类选择器的运用_html/css_WEB-ITnose

程序员文章站 2022-06-05 11:29:22
...
html

1 

This is urgent warning.

2

Well,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

1 
flag
2
circle

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类选择器详解