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

2025-05-31 16:42:33

1、首先我们来看看ID定义型来设置CSS样式,这里ID只能在一个页面使用一次,作为某个元素的唯一表示符,这里通过实例来说明,具体代码如下:<html> <head> <title>CSS选择器</title> <style type="text/css"> #title{ color:red; } </style> </head> <body> <p id="title">用ID来设置字体颜色为红色,具体代码如下。</p> </body></html>可以看到这里使用的是#加上ID名字来设置ID的标题,使用的时候直接用id="id名”就不要前面的#号了。

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

3、我们还可以将选择器和ID结合,选择器是HTML的标签直接来设置CSS的样式的,具体的实现代码如下:<html> <head> <title>CSS选择器</title> <style type="text/css"> h2#title{ color:red; } </style> </head> <body> <h2 id="title">我是H2</h2> <p id="title">我是P</p> </body></html>可以看到代码,p和H2这两个标签添加了title这个ID,只有h2有效果了。

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

5、如果我们在同一个页面中要使用多个CSS情写硎霈规则样式的时候用ID是满足不了的,因为id是同一个页面强制的只能使用一次的。这里用CSS来设置不同的标签使用同一个css规则样式,这里用类来完成相关的设置,具体代码如下:<html> <head> <title>CSS选择器</title> <style type="text/css"> .title{ color:red; } </style> </head> <body> <h2 class="title">我是H2</h2> <p class="title">我是P</p> </body></html>可以看到如下图的样式,类使用.加类名来设置,详细使用方式如上代码所示。

CSS定义选择器的id和类详解和实例教程
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢