免费资源
享你所想

从零开始自学入门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) 打赏
未经允许不得转载:无梦博客 » 从零开始自学入门CSS(2):css选择器
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无梦博客

币池塘关于本站

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏