在下面的例子中,有两个类选择器important和warming
结果如图
17行的p标签中同时出现了两个类名并用空格隔开,同时有了两个类的样式
如果在style标签中增加一行“.important.warning {background:silver;}”
“.important.warning {background:silver;}”就表示当类important和warning同时存在时的样式
类的嵌套我们再来做一个测试
<!DOCTYPE html><html><head><meta charset="utf-8"><title>class选择器</title><style type="text/css">.important {font-weight:bold;}.warning {font-style:italic;}.important .warning {background:silver;}</style></head><body><p class="important">This paragraph is very important.</p><div class="important"><p class="warning">This is a warning.</p></div><p class="warning">This is a warning.</p><p class="important warning">This paragraph is a very important warning.</p><p>This is a paragraph.</p><p>...</p></body></html>结果
???发生了什么
这次更改是将“.important.warning {background:silver;}”改为“.important .warning {background:silver;}”就是两个类中间多了一个空格,下面的div标签中含有类important,其中的p标签含有warning,当这两级类嵌套时就出发了“.important .warning {background:silver;}”(有空格)的样式。
小结 在头部定义css类选择器样式是n个类写在一起定义样式(无空格隔开)在同时使用这n个类(同时使用时用空格隔开)将会触发该样式在头部定义css类选择器样式是n个类写在一起定义样式(有空格隔开)在这n个类嵌套(同时使用时用空格隔开)中的内容将会触发该样式在头部定义css类选择器样式是n个类写在一起定义样式再加一个标签(空格隔开),可以为嵌套其中的标签单独设计样式class选择器这一特性可以将样式设计精准定位到每个标签