CSS的id、class、pseudo-class（伪类）

来源：互联网发布：网络通讯员职责编辑：程序博客网时间：2024/06/05 12:04

CSS实例

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

这里写图片描述

CSS声明总是以分号(;)结束，声明组以大括号({})括起来:

p{    color:red;    text-align:center;}

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

<!DOCTYPE html><html><head>    <meta charset="utf-8">     <title>id选择器</title>     <style>    #para1    {        text-align:center;        color:red;    }     </style></head><body>    <p id="para1">Hello World!</p>    <p>这个段落不受该样式的影响。</p></body></html>

效果：
这里写图片描述

class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示：

<!DOCTYPE html><html><head>    <meta charset="utf-8">     <title>class选择器</title>     <style>    .center    {        text-align:center;    }    </style></head><body>    <h1 class="center">标题居中</h1>    <p class="center">段落居中。</p>     <p>普通段落</p></body></html>

效果：
这里写图片描述

也可以指定特定的HTML元素使用class。

<!DOCTYPE html><html><head>    <meta charset="utf-8">     <title>class选择器</title>     <style>    p.center    {        text-align:center;    }    </style></head><body>    <h1 class="center">这个标题不受影响</h1>    <p class="center">这个段落居中对齐。</p> </body></html>

效果：
这里写图片描述

Pseudo-class（伪类）

CSS伪类是用来添加一些选择器的特殊效果。
伪类的语法：

selector:pseudo-class {property:value;}selector.class:pseudo-class {property:value;}

示例：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">         <title>伪类选择器</title>         <style>            a:link {color:#000000;}     /* 未访问链接*/            a:visited {color:#00FF00;}  /* 已访问链接 */            a:hover {color:#FF00FF;}    /* 鼠标移动到链接上 */            a:active {color:#0000FF;}   /* 鼠标点击时 */        </style>    </head>    <body>        <p><b><a href="https://www.baidu.com/" target="_blank">这是一个链接</a></b></p>        <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited之后，需要严格按顺序才能看到效果。</p>        <p><b>注意：</b> a:active 必须在 a:hover 之后。</p>    </body></html>

效果：
这里写图片描述

0 0