美文网首页
伪类选择器

伪类选择器

作者: 周周很可爱 | 来源:发表于2019-06-18 23:15 被阅读0次

在 CSS3 中,选择器是一种模式,用于选择需要添加样式的元素。
那么如何使用伪类选择器呢
元素未被点击时

a:link{ color: green; }

鼠标悬停时

a:hover{ color: pink; }

鼠标在元素上按下时

a:active{ color: blue; }

元素被点击过后

a:visited{ color: red; }
  1. 多元素触发:

鼠标移动到box1的p上面p改变

.box1 p:hover{ background: green;}

鼠标移动到box1上面p改变

.box1:hover p{ background: blue;}

鼠标移动到box1上面p相邻的span改变

.box1:hover p+span{ background: blue;}

注意: 一个标签只可以触发它包含的元素.

相关文章

  • CSS3选择器

    1CSS选择器的分类 基本选择器 层次选择器 伪类选择器 动态伪类选择器 目标伪类选择器 语言伪类选择器 UI元素...

  • CSS3 积累(2)之结构伪类选择器

    介绍 伪类选择器主要有动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器和伪元素等,这篇主要讲讲什么是结构伪类...

  • CSS选择器(2)

    伪类选择器 伪类选择器实例

  • CSS-常用选择器

    常用选择器 子代和父代选择器 伪类选择器 伪元素 属性选择器 孩子选择器 兄弟选择器 否定伪类 优先选择器 a的伪类

  • jQuery之选择器

    基本选择器 层级选择器 简单伪类选择器 与内容相关的伪类选择器 与元素状态相关的伪类选择器 匹配子元素的伪类选择器...

  • C3选择器

    属性选择器 兄弟选择器 伪类选择器 伪类target 伪元素before,after 其他伪元素

  • css3-新增选择器

    本文目录 1.属性选择器 2.伪类选择器(普通伪类、目标伪类、链接伪类) 3.伪元素选择器 1.属性选择器 E[a...

  • CSS伪类选择器总结

    CSS伪类选择器总结 动态伪类选择器:link, 链接伪类选择器,超链接未被访问前:visited, 链接伪类选择...

  • CSS进阶知识点--CSS3伪类选择器和伪元素

    伪类选择器 动态伪类(锚点伪类、用户行为伪类) UI元素状态伪类 CSS3结构伪类 否定选择器 伪元素 动态伪类 ...

  • 精通CSS高级Web标准解决方案读书笔记-02为样式找到应用目标

    常用选择器(类型选择器,后代选择器)p #id .class 伪类链接伪类:link :visited 动态伪类:...

网友评论

      本文标题:伪类选择器

      本文链接:https://www.haomeiwen.com/subject/jvrcqctx.html