CSS从入门到精通——基础选择器(一)

最新推荐文章于 2024-05-05 01:03:55 发布

Jungle和

最新推荐文章于 2024-05-05 01:03:55 发布

阅读量507

点赞数

分类专栏：前端开发文章标签： css元素选择器

本文链接：https://blog.csdn.net/qq_42212132/article/details/97938744

版权

前端开发专栏收录该内容

10 篇文章 1 订阅

订阅专栏

元素选择器

最常见和易理解的CSS选择器是元素选择器，又称为类型选择器。也就是将HTML文档中的元素，直接作为选择器使用。

例如对于HTML页面：

<body>
  <h1>标题1</h1>
  <h2>标题2</h2>
  <p>普通段落中<a href="#">删除的引用。</a></p>
</body>

使用元素选择器添加元素样式：

<style type="text/css">
    html {color:black;}
    h1 {color:darkcyan;}
    h2 {color:lightSeaGreen;}
    p {color:grey;}
    a {text-decoration:line-through;}
  </style>

显示效果如下：

当我们指定一个元素，并设置样式属性之后，文档中该元素便会应用样式。例如，我们设置p元素的颜色为灰色(grey)，在没有其他样式覆盖的情况下，文档中所有的p元素都将为灰色。

如果想要多种元素应用同一样式，可以直接使用组合元素选择器。将多个要应用样式的元素用逗号隔开，例如：

例如对于HTML页面：

<body>
    <h1>组合选择器</h1>
    <p>组合选择器，可以将样式同时运用于多个元素。</p>
</body>
</html>

使用元素选择器添加元素样式：

<style type="text/css">
/* 组合元素选择器 */
/*将`h1`、`p`元素的颜色同时设置为灰色*/
h1,p {color:grey;}
</style>

显示效果如下：

注意：

多个元素之间的逗号是必不可少的，如果缺失了逗号将表示其他含义。

元素选择器语法

我们可以看出元素选择器的语法规则如下：

/*单个元素选择器*/
元素 {样式声明}
/*组合元素选择器*/
元素1，元素2 {样式声明}

Jungle和

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS从入门到精通——基础选择器(一)

元素选择器最常见和易理解的CSS选择器是元素选择器，又称为类型选择器。也就是将HTML文档中的元素，直接作为选择器使用。例如对于HTML页面：<body> <h1>标题1</h1> <h2>标题2</h2> <p>普通段落中<a href="#">删除的引用。</a></...
复制链接

扫一扫