从零开始自学入门CSS(2):css选择器

躺赚乐

前一篇文章中,曾讲过css的使用方法,就是选择器+声明,不过我们当时的选择器选择的都是元素标签,更改元素标签后,html文档中所有该标签都使用同一个样式,很显然,只凭借该选择器无法支撑起现代流行网页的美观。所以我们就需要使用另外两个选择器:Id选择器和class选择器。

id选择器

要使用id选择器,要在需要改变的元素标签中加入键值对形式的id属性,如:

<p id="test">id选择器</p>

这样我们就为<p>标签定义了id属性,要改变<p>标签的样式也很简单,在样式中使用#id的方式就行了,如:

#test {color:red;}

这里我们为id="test"的<p>标签添加了颜色:红色。html文档中其他的<p>标签则不会改变颜色。

注意:id选择器只能使用一次,也就是不能为多个标签设置同一个id。

class选择器

class选择器,又叫类选择器,可以用在多个元素标签中。用法和id选择器雷同,首先在元素标签中加入键值对形式的class属性,如:

<h1 class="cla">class选择器</h1>
<p class="cla">class选择器</p>

然后在样式表中使用.class来添加样式,如:

.cla {color:red;}

这里包含有class="cla"的<h1>标签和<p>标签都会被改变颜色。而不包含该class的元素标签则不在此列。

id选择器和class选择器

id选择器和class选择器最大的不同在于id选择器只能使用一次,而class可以作用在多个不同的元素标签中。

class,又叫类,意思就是同一类、一组,在html文档中尽量多使用class选择器。id选择器更多的是与JavaScript一起使用。

本文由 躺赚乐 作者:躺赚乐 发表,其版权均为 躺赚乐 所有,文章内容系作者个人观点,不代表 躺赚乐 对观点赞同或支持。如需转载,请注明文章来源。
躺赚乐

评论:

0 条评论,访客:0 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

发表评论