css中id选择器怎么用(id选择器和class选择器的区别)

 分类:div+css教程时间:2023-03-10 07:30:01点击:


一、id选择器怎么用

  • 我们之前给一个段落中添加斜体的标识的时候我们会在CSS里面这样做,这次我们将学习使用ID选择器来实现这项功能

  • 我们在之前的代码中给标签添加id

<p id="author">
  <strong>劳拉·琼斯 (Laura Jones)</strong> 于 2027 年 6 月 21日星期一发布
</p>
  • CSS代码是这样的,相信你能明白这是什么意思,相当于给这个段落起名字一样

#author {
  font-style: italic;  
  font-size: 18px;
}

相同的道理,我们给版权信息也用这种方法去写;如下所示:

<footer>
   <p id="copyright">版权所有 © 2023 tangjiusheng.cn</p>
</footer>

二、class类选择器

  • 除了id选择器,还有类选择器。那么这两个选择器有什么区别呢?id选择器不允许id名字有相同的,而类选择器可以多种元素使用同一个这样的选择器。

  • 举个例子,我们现在将下方的几个作者添加同样的类选择器

        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去学习网页开发</a>
          <p class="related-author">作者:乔纳斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者:吉姆.狄龙</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">为什么 JavaScript 很棒</a>
          <p class="related-author">作者:玛蒂尔达</p>
        </li>

在CSS上,我们这样写

.related-author {
  font-size: 18px;  
  font-weight: bold;
}
  • 如上图所示,这些无序列表的黑点看上去实在难看,如何将它去除呢?如下

ul{
  list-style: none;
}

但是如果html中有多个无序列表,这个时候我们就需要使用类选择器去做这件事情了

HTML代码如下:

<ul class="related">
        <li>
          <img
            src="img/related-1.jpg"
            alt="related-1"
            width="75px"
            height="75px"
          /><a href="#">如何去学习网页开发</a>
          <p class="related-author">作者:乔纳斯·施梅德特曼</p>
        </li>
        <li>
          <img
            src="img/related-2.jpg"
            alt="related-2"
            width="75px"
            height="75px"
          />
          <a href="#">CSS 的未知力量</a>
          <p class="related-author">作者:吉姆.狄龙</p>
        </li>
        <li>
          <img
            src="img/related-3.jpg"
            alt="related-3"
            width="75px"
            height="75px"
          />
          <a href="#">为什么 JavaScript 很棒</a>
          <p class="related-author">作者:玛蒂尔达</p>
        </li>
      </ul>

CSS代码如下:

.related {
  list-style: none;
}
  • 疑问:为啥上面的不用id选择器,而是用class呢?

  • 因为当我们不止一个元素需要使用CSS样式的时候,我们通常都会选择类选择器

三、id选择器和class选择器的区别

在实际的生活中,我们都会使用类选择器,因为在id选择器只能使用一次,如果你后续使用同样的css样式会增加你的代码量,所以即使是一个CSS,也建议使用类选择器,而不是id选择器。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: