首页 > 编程知识 正文

css选择器类选择器,css多类名选择器

时间:2023-05-06 01:18:36 阅读:270739 作者:4631

多类选择器


在下面的例子中,有两个类选择器important和warming

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>class选择器</title>        <style type="text/css">            .important {font-weight:bold;}            .warning {font-style:italic;}        </style>    </head>    <body>        <p class="important">This paragraph is very important.</p>        <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>

结果如图

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选择器这一特性可以将样式设计精准定位到每个标签

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。