css（1）基础选择器

最新推荐文章于 2022-06-01 10:20:39 发布

买代码v 18327244279

最新推荐文章于 2022-06-01 10:20:39 发布

阅读量301

点赞数

分类专栏： Web 文章标签： css

本文链接：https://blog.csdn.net/zcy_inspire/article/details/106962849

版权

Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS 元素选择器

元素选择器

样式指定到文档元素
最常见和易理解的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>

元素选择器语法

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

CSS 类选择器

类选择器

样式指定到类
类选择器允许以一种独立于文档元素的方式来指定样式。通常情况只希望应用样式，而不考虑具体的元素时，会使用类选择器。
例如，对于HTML页面:

<body>
<div class="main">
  <article class="news">
    <h1>地震自救指南</h1>
    <p>大的晃动时间约为1分钟左右。这时首先应顾及的是您自己与家人的人身安全。首先，在重心较低、且结实牢固的桌子下面躲避，并紧紧抓牢桌子腿。在没有桌子等可供藏身的场合，无论如何，也要用坐垫等物保护好头部。</p>
  </article>
</div>
</body>

 <style type="text/css">
  .main {
    background-color: ivory;
    margin: 10px;
  }
  .news {
    padding: 10px;
    color: black;
    font-weight: bold;
  }
  p {
    color: grey;
  }
  </style>

与元素选择器不同，对同一类的元素应用样式，需要在类名前加上一个点号（.），然后书写相应的样式声明。

类选择器语法

将html中想要应用类样式的元素，指定类名；

<元素名 class="指定的类名"></元素名>
<元素名 class="指定的类名">

书写相应类的样式

.指定的类名 {样式声明}

CSS id选择器

id选择器

样式指定在id上
id选择器时，使用的是关键字id

<body>
  <h1 id="important">温馨提示</h1>
  <p>少一串脚印，多一份绿意。</p>
</body>

在样式表中，指定对应id名元素的样式，使用#符号，也称为棋盘号或井号

#important {
    color: red;
    font-weight: bold;
}

id选择器语法

<元素名 id="指定的id名"></元素名>
<元素名 id="指定的id名">

#指定的id名 {样式声明}

类选择器与id选择器的区别

在一个 HTML 文档中，可以为任意多个元素指定类，但id选择器只能使用一次，一个id只能运用于一个元素。
类选择器样式可以多用
ID选择器样式专用

买代码v 18327244279

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css（1）基础选择器

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

扫一扫