大内高手社区

标题: CSS 分组和嵌套选择器 [打印本页]

作者: 半糖不加冰 时间: 2021-9-27 14:10
标题: CSS 分组和嵌套选择器

[attach]63[/attach]

（图片来源于公开网络，若涉及侵权联系尽快删除！）

　　一、分组选择器
　　在样式表中有很多具有相同样式的元素。
　

[CSS] 纯文本查看 复制代码

h1 {

    color:green;

}

h2 {

    color:green;

}

p {

    color:green;

}

　　为了尽量减少代码，你可以使用分组选择器。
　　每个选择器用逗号分隔。
　　在下面的例子中，我们对以上代码使用分组选择器：
　　实例

[CSS] 纯文本查看 复制代码

h1,h2,p

{

    color:green;

}

　　二、嵌套选择器
　　它可能适用于选择器内部的选择器的样式。
　　在下面的例子设置了四个样式：
　　p{}:为所有p元素指定一个样式。
　　.marked{}:为所有class="marked"的元素指定一个样式。
　　.markedp{}:为所有class="marked"元素内的p元素指定一个样式。
　　p.marked{}:为所有class="marked"的p元素指定一个样式。
　　实例

[CSS] 纯文本查看 复制代码

p

{

    color:blue;

    text-align:center;

}

.marked

{

    background-color:red;

}

.marked p

{

    color:white;

}

p.marked{

    text-decoration:underline;

}

作者: 阿莫 时间: 2021-9-27 14:26

欢迎光临大内高手社区 (https://bbs.tedu.cn/)