CSS 伪类 |
您所在的位置：网站首页 › focus怎么使用 › CSS 伪类 |
|
w3school 在线教程
HTML 系列教程
浏览器脚本
服务器脚本
编程教程
XML 系列教程
建站手册
参考手册
CSS 基础教程
CSS 教程
CSS 简介
CSS 语法
CSS 选择器
CSS 使用
CSS 注释
CSS 颜色
CSS RGB 颜色
CSS HEX 颜色
CSS HSL 颜色
CSS 背景
CSS 背景图像
CSS 背景重复
CSS 背景附着
CSS 简写背景属性
CSS 边框
CSS 边框宽度
CSS 边框颜色
CSS 边框各边
CSS 简写边框属性
CSS 圆角边框
CSS 外边距
CSS 外边距合并
CSS 内边距
CSS 高度/宽度
CSS 框模型
CSS 轮廓
CSS 轮廓宽度
CSS 轮廓颜色
CSS 简写轮廓属性
CSS 轮廓偏移
CSS 文本
CSS 文本对齐
CSS 文本装饰
CSS 文本转换
CSS 文字间距
CSS 文本阴影
CSS 字体
CSS 字体样式
CSS 字体大小
CSS 谷歌字体
CSS 简写字体属性
CSS 图标
CSS 链接
CSS 列表
CSS 表格
CSS 中级教程
CSS Display
CSS max-width
CSS 定位
CSS 溢出
CSS 浮动
CSS 清除浮动
CSS 布局 - 浮动实例
CSS inline-block
CSS 对齐
CSS 组合器
CSS 伪类
CSS 伪元素
CSS 不透明度
CSS 导航栏
CSS 垂直导航栏
CSS 水平导航栏
CSS 下拉菜单
CSS 图片库
CSS 图像精灵
CSS 属性选择器
CSS 表单
CSS 计数器
CSS 网站布局
CSS 单位
CSS 特异性
CSS3 高级教程
CSS 圆角
CSS 边框图像
CSS 背景
CSS 颜色
CSS 渐变
CSS 径向渐变
CSS 阴影
CSS box-shadow
CSS 文本效果
CSS 网络字体
CSS 2D 转换
CSS 3D 转换
CSS 过渡
CSS 动画
CSS 工具提示
CSS 图像样式
CSS object-fit
CSS 按钮
CSS 分页
CSS 多列
CSS 用户界面
CSS 变量
CSS 覆盖变量
CSS 变量 - JavaScript
CSS 变量 - 媒体查询
CSS Box Sizing
CSS Flexbox
CSS 媒体查询
CSS 媒体查询实例
CSS 响应式设计
RWD 简介
RWD 视口
RWD 网格视图
RWD 媒体查询
RWD 图像
RWD 视频
CSS 网格教程
CSS 网格布局模块
CSS 网格容器
CSS 网格项目
CSS 实例
CSS 实例
CSS 测验
CSS 测验
CSS 参考手册
CSS 参考手册
CSS 浏览器支持
CSS 选择器
CSS 函数
CSS 单位
CSS 听觉
CSS 网络安全字体
CSS 可动画制作
CSS 单位
CSS 颜色
CSS 颜色值
CSS 默认值
CSS 实体
建站手册
网站构建
万维网联盟 (W3C)
浏览器信息
网站品质
语义网
职业规划
网站主机
关于 W3School
帮助 W3School
CSS 伪类
CSS 组合器
CSS 伪元素
什么是伪类？
伪类用于定义元素的特殊状态。 例如，它可以用于： 设置鼠标悬停在元素上时的样式 为已访问和未访问链接设置不同的样式 设置元素获得焦点时的样式 请将鼠标悬停在我上面 语法伪类的语法： selector:pseudo-class { property: value; } 锚伪类链接能够以不同的方式显示： 实例 /* 未访问的链接 */ a:link { color: #FF0000; } /* 已访问的链接 */ a:visited { color: #00FF00; } /* 鼠标悬停链接 */ a:hover { color: #FF00FF; } /* 已选择的链接 */ a:active { color: #0000FF; }亲自试一试 注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。 伪类和 CSS 类伪类可以与 CSS 类结合使用： 当您将鼠标悬停在例子中的链接上时，它会改变颜色： 实例 a.highlight:hover { color: #ff0000; }亲自试一试 悬停在 上在 元素上使用 :hover 伪类的实例： 实例 div:hover { background-color: blue; }亲自试一试 简单的工具提示悬停把鼠标悬停到 元素以显示 元素（类似工具提示的效果）： 悬停到我上面来显示元素。 嘿嘿，我在这里！ 实例 p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; }亲自试一试 CSS - :first-child 伪类:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。 匹配首个 元素 在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何 元素： 实例 p:first-child { color: blue; }亲自试一试 匹配所有元素中的首个 元素 在下面的例子中，选择器匹配所有 元素中的第一个 元素： 实例 p i:first-child { color: blue; }亲自试一试 匹配所有首个元素中的所有 元素 在下面的例子中，选择器匹配作为另一个元素的第一个子元素的 元素中的所有 元素： 实例 p:first-child i { color: blue; }亲自试一试 CSS - :lang 伪类:lang 伪类允许您为不同的语言定义特殊的规则。 在下面的例子中，:lang 为属性为 lang="en" 的 元素定义引号： 实例 q:lang(en) { quotes: "~" "~"; }Some text A quote in a paragraph Some text. 亲自试一试 更多实例 为超链接添加不同样式 本例演示如何向超链接添加其他样式。 使用 :focus 本例演示如何使用 :focus 伪类。 所有 CSS 伪类 选择器 例子 例子描述 :active a:active 选择活动的链接。 :checked input:checked 选择每个被选中的 元素。 :disabled input:disabled 选择每个被禁用的 元素。 :empty p:empty 选择没有子元素的每个元素。 :enabled input:enabled 选择每个已启用的 元素。 :first-child p:first-child 选择作为其父的首个子元素的每个 元素。 :first-of-type p:first-of-type 选择作为其父的首个 元素的每个 元素。 :focus input:focus 选择获得焦点的 元素。 :hover a:hover 选择鼠标悬停其上的链接。 :in-range input:in-range 选择具有指定范围内的值的 元素。 :invalid input:invalid 选择所有具有无效值的 元素。 :lang(language) p:lang(it) 选择每个 lang 属性值以 "it" 开头的 元素。 :last-child p:last-child 选择作为其父的最后一个子元素的每个 元素。 :last-of-type p:last-of-type 选择作为其父的最后一个 元素的每个 元素。 :link a:link 选择所有未被访问的链接。 :not(selector) :not(p) 选择每个非 元素的元素。 :nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 元素。 :nth-last-child(n) p:nth-last-child(2) 选择作为父的第二个子元素的每个 元素，从最后一个子元素计数。 :nth-last-of-type(n) p:nth-last-of-type(2) 选择作为父的第二个 元素的每个 元素，从最后一个子元素计数 :nth-of-type(n) p:nth-of-type(2) 选择作为其父的第二个 元素的每个 元素。 :only-of-type p:only-of-type 选择作为其父的唯一 元素的每个 元素。 :only-child p:only-child 选择作为其父的唯一子元素的 元素。 :optional input:optional 选择不带 "required" 属性的 元素。 :out-of-range input:out-of-range 选择值在指定范围之外的 元素。 :read-only input:read-only 选择指定了 "readonly" 属性的 元素。 :read-write input:read-write 选择不带 "readonly" 属性的 元素。 :required input:required 选择指定了 "required" 属性的 元素。 :root root 选择元素的根元素。 :target #news:target 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。 :valid input:valid 选择所有具有有效值的 元素。 :visited a:visited 选择所有已访问的链接。 所有 CSS 伪元素 选择器 例子 例子描述 ::after p::after 在每个 元素之后插入内容。 ::before p::before 在每个 元素之前插入内容。 ::first-letter p::first-letter 选择每个 元素的首字母。 ::first-line p::first-line 选择每个 元素的首行。 ::selection p::selection 选择用户选择的元素部分。 CSS 组合器 CSS 伪元素 CSS 参考手册 CSS 实例 CSS 测验 CSS 课外书 W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。 使用条款 隐私条款 技术支持：赢科 蒙ICP备06004630号 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |