CSS选择器的常用规则

最新推荐文章于 2022-06-18 18:04:02 发布

淡淡的一抹

最新推荐文章于 2022-06-18 18:04:02 发布

阅读量99

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/ych4513979/article/details/84664039

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

[color=darkred][b][size=large]CSS选择器的常用规则[/size][/b][/color]

[size=medium][b](1) 组规则[/b][/size]
语法：选择符1，选择符2，...，选择符n{属性1：值1；属性2：值2；...；属性n:值n；}
示例：


/*定义H1的格式*/
H1 {
    font-weight: bold;/*字体的粗细，bold指粗体*/
    font-size: 12pt;/*字体尺寸，现在一般使用px，并不使用pt*/
    font-family: helvetica;/*字体类型，如宋体、黑体*/
    font-variant: normal;/*设置小型大写字母，normal为正常。*/
    font-style: normal;/*字体风格，例如斜体。normal代表标准字体。*/
}

[size=medium][b]（2）继承规则[/b][/size]
当对一个HTML标签定义了CSS样式后，样式会自动继承给这个节点的所有子节点。

[size=medium][b]（3）类规则[/b][/size]
通过“.”+类名对该类进行定义。
示例：


<!--通过类名设置标题的颜色-->
.list{color: red;}
<body>
    <h1 class="list">标题1</h1>
    <h1 class="list">标题2</h1>
    <h1 class="list">标题3</h1>
</body>

[size=medium][b]（4）ID规则[/b][/size]
通过“#”+ID号对该元素进行设置。
示例：


#header{
    width: 800px;
    height: 125px;
    color: red;
}

<body>
    <div id="header">顶部横条</div>
</body>

[size=medium][b]（5）嵌套规则[/b][/size]
嵌套规则可以指定一个路径来定义一个样式，规则中的选择符可以是类、ID或者基本选择符。
实例1：


<!-- 设置类“.reddish”的标签中的H1标签的样式 -->
.reddish h1{
    color: red;
}

<body>
    <div class="reddish">
        <h1>标题1</h1>
    </div>
</body>

示例2：


<!-- 改变继承关系 -->
p{color: red;}
p b{color: blue;}

<body>
    <p>
        红色
        <b>蓝色</b>
    </p>
</body>

淡淡的一抹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器的常用规则

[color=darkred][b][size=large]CSS选择器的常用规则[/size][/b][/color][size=medium][b](1) 组规则[/b][/size]语法：选择符1，选择符2，...，选择符n{属性1：值1；属性2：值2；...；属性n:值n；}示例：[code="js"]/*定义H1的格式*/H1 { font-wei...
复制链接

扫一扫