位置:电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程:CSS入门到精通 > CSS 分组和嵌套
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 所有填充属性 padding 下一篇: CSS 尺寸 (Dimension)

分组选择器

在样式表中有很多具有相同样式的元素。

h1
{
    color:green;
}
h2
{
    color:green;
}
p
{
    color:green;
}

为了尽量减少代码,你可以使用分组选择器。

每个选择器用逗号分隔。

实例

在下面的例子中,我们对以上代码使用分组选择器

代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>分组选择器</title>
<!--定义内部样式-->
<style>
     /*分组选择器:几个元素同样的样式写在一起*/
     h1,h2,p{
             color: green;/*字体颜色:绿色*/
     }
</style>    
</head>
<body>
    
     <h1>CSS入门到精通课程</h1>
     <h2>黄菊华老师</h2>
     <p>有全套Web全栈学习视频</p>
 
</body>
</html>
效果图

小白教程网www.2d5.net

image.png


嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了几个样式:

n  p{ }: 为所有 p 元素指定一个样式。

n  .marked{ }: 为所有 的元素指定一个样式。

n  .marked p{ }: 为所有 元素内的 p 元素指定一个样式。

n  p.marked{ }: 为所有 p 元素指定一个样式。

实例

代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套选择器</title>
<!--定义内部样式-->
<style>
     p{  /*为所有 p 元素指定一个样式*/
             color:blue;
             text-align:center;
     }
     .marked{ /*为所有 的元素指定一个样式*/
             background-color:gray;
     }
     .marked p{ /*为所有 元素内的 p 元素指定一个样式*/
             color:white;
     }p.marked{ /*为所有 的 p 元素指定一个样式*/
             color: red;
     }
</style>    
</head>
<body>
    
     <p>这个段落是蓝色文本,居中对齐。</p>
    
     <div>
             <p>这个段落不是蓝色文本。</p>
     </div>
    
     <p>所有元素内的 p 元素指定一个样式,但有不同的文本颜色。</p>
    
     <p>红色文字</p>
 
</body>
</html>
效果图

小白教程网www.2d5.net

image.png

上一篇: 所有填充属性 padding 下一篇: CSS 尺寸 (Dimension)
毕业设计网             广告联系QQ:45157718(微信同号)