视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS基础学习九:伪类_html/css
2020-11-27 16:14:33 责编:小采
文档


CSS伪类

CSS语法中伪类用于向某些选择器添加特殊的效果。常见的伪类有:


(1)语法

伪类的语法:

selector : pseudo-class {property: value}

CSS 类也可与伪类搭配使用。

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

(2)锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

a:link {color: #FF0000}	/* 未访问的链接 */a:visited {color: #00FF00}	/* 已访问的链接 */a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */a:active {color: #0000FF}	/* 选定的链接 */
完整的代码为:
无标题文档

这是一个链接。

注释:在CSS定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效!

注释:在CS 定义中,a:active 必须位于 a:hover 之后,这样才能生效!

运行的结果为:1浏览器从未访问过的链接状态为:


2浏览器已访问过的链接状态为:


3鼠标置在链接上的状态为:


4鼠标点击后的链接的状态为:


提示:1在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

2在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

3伪类名称对大小写不敏感。

(3)伪类与 CSS 类

伪类可以与 CSS 类配合使用:

a.red : visited {color: #FF0000}

CSS Syntax

假如上面的例子中的链接被访问过,那么它将显示为红色。

(4):first-child 伪类

您可以使用:first-child 伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解,所以有必要举例来说

明。考虑以下标记:

These are the necessary steps:

  • Intert Key
  • Turn key clockwise
  • Push accelerator
  • Do not push the brake at the same time as the accelerator.

    在上面的例子中,作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。

    给定以下规则:

    p:first-child {color:red;}li:first-child {color:blue;}strong:first-child {color:green;}em:first-child {color:yellow;}
    第一个规则将作为某元素第一个子元素的所有 p 元素设置为红色。第二个规则将作为某个元素(在 HTML 中,

    这肯定是 ol 或 ul 元素)第一个子元素的所有 li 元素变成蓝色。第三个规则将作为某元素第一个子元素的所有 strong

    元素设置为绿色。第一个规则将作为某元素第一个子元素的所有em元素设置为黄色。

    提示:最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。

    注释:必须声明 ,这样 :first-child 才能在 IE 中生效。

    浏览器运行的结果为:


    下面我们再来三个例子详细说明:

    例子 1 - 匹配第一个

    元素

    在下面的例子中,选择器匹配作为任何元素的第一个子元素的 p 元素:

    some text

    some text

    运行的结果为:


    例子 2 - 匹配所有

    元素中的第一个 元素

    在下面的例子中,选择器匹配所有

    元素中的第一个 元素:

    some text. some text.

    some text. some text.

    运行的结果为:


    例子 3 - 匹配所有作为第一个子元素的

    元素中的所有 元素

    在下面的例子中,选择器匹配所有作为元素的第一个子元素的

    元素中的所有 元素:

    some text. some text.

    some text. some text.

    运行的结果为:


    (5):lang 伪类

    :lang 伪类使你有能力为不同的语言定义特殊的规则。

    在下面的例子中,:lang 类为属性值为 no 的 q 元素定义引号的类型:

    无标题文档

    文字段落中的引用的文字文字

    运行的结果为:



    版权声明:本文为博主原创文章,未经博主允许不得转载。

    下载本文
    显示全文
    专题