多语言展示
当前在线:447今日阅读:126今日分享:42

CSS定义选择器的id和类详解和实例教程

CSS第一选择器可以有很多方式来修饰HTML的样式,比如说使用ID选择器来设置或者使用类来设置,这里来用实例来说明如何使用类和ID来设置网页样式
工具/原料
1

CSS基础知识

2

HTML基础知识

方法/步骤
1

首先我们来看看ID定义型来设置CSS样式,这里ID只能在一个页面使用一次,作为某个元素的唯一表示符,这里通过实例来说明,具体代码如下: CSS选择器

用ID来设置字体颜色为红色,具体代码如下。

  可以看到这里使用的是#加上ID名字来设置ID的标题,使用的时候直接用id='id名”就不要前面的#号了。

2

现在来学习使用标记定义型的选择器,使用HTML的标签来直接设置CSS的样式,这里来设置H2这个标签的字体颜色为红色的具体代码如下: CSS选择器

我是第一个H2

我是第二个H2

  如下图可以看到,两个H2的字体颜色都变成红色了,我们在上面只是对H2的设置就好了,不用做其他的额外的设置。

3

我们还可以将选择器和ID结合,选择器是HTML的标签直接来设置CSS的样式的,具体的实现代码如下: CSS选择器

我是H2

我是P

  可以看到代码,p和H2这两个标签添加了title这个ID,只有h2有效果了。

4

在步骤3上面,如果要实现p和h2的字体显示不同颜色我们该怎么做呢?具体的代码如下: CSS选择器

我是H2

我是P

  通过P#title和h2#title来分别设置不同的颜色,具体显示效果如下。

5

如果我们在同一个页面中要使用多个CSS规则样式的时候用ID是满足不了的,因为id是同一个页面强制的只能使用一次的。这里用CSS来设置不同的标签使用同一个css规则样式,这里用类来完成相关的设置,具体代码如下: CSS选择器

我是H2

我是P

  可以看到如下图的样式,类使用.加类名来设置,详细使用方式如上代码所示。

6

这里我们来讨论类和ID结合使用的CSS样式,来完成制定的工作,具体的代码如下: CSS选择器

  • 啤酒
  • 可乐
  • 红茶
  • 绿茶
  可以看到如下的执行效果。

注意事项

CSS的ID选择器一个页面只能出现一次,这个是强制型的

推荐信息