CSS组合选择符

1. 通配选择符：*

适配文档中所有html对象
用于定义html文档中所有对象的基础样式（消除浏览器默认设置的基础样式）
根据就近原则，要放在css代码的首行
最常用的用法：* {margin:0;padding:0;} /* 消除所有html标签默认存在的内边距 */

2.包含选择符：父级对象a 子级对象b

根据html对象的嵌套关系，指定某个元素的子级元素样式
选择符对象可以是多重包含，即一层层包含下去，样式仅仅作用于最后的内部对象。
元素对象之间用空格分隔
如：div p {color:red;} /* div对象中所有p对象被指定了红色样式 */
如：#box p a {color:blue;} /* id为box的对象中p对象中的a对象被指定蓝色样式 */

3. 群组选择符：对象a，对象b，对象c……

将同样的样式用于多个选择符对象，选择符对象之间用逗号隔开。

/* no grouping 单个选择符*/
h1`{color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping 群组选择符*/
h1, h2, h3, h4, h5, h6 {color:blue;}

4. 指定选择符：标签名.class类名

将class类选择符和标签选择符结合在一起使用
主要适用于在使用了某个class类的所有html对象中特别指定某一类标签。
如<h1>和某个<p>标签调用了important这个类，只想给调用了important的p对象添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .important {font-weight:bold;}
        p.important{color:blue;}
    </style>
</head>
<body>
<h1 class="important">This heading is very important.</h1>
<p  class="important">This paragraph is very important.</p>
<p>This paragraph is normal.</p>
<p>This paragraph is normal.</p>
</body>
</html>

效果如下所示：

CSS组合选择符

CSS组合选择符

猜你喜欢