css 伪元素选择器

1 伪元素选择器
(1)根元素选择器
:root {
boredr:1px solid red;
}
匹配文档中根元素

(2)子元素选择器
ul > li : first-child {
color:red;
}
选择第一个子元素

lu > li : last-child {
color:red;
}

选择最后一个子元素

(3)UI元素选择器
UI 伪类选择器是根据元素的状态匹配元素
:enabled {
border: 1px solid red;
}
选择启用状态的元素

:disabled {
border: 1px solid red;
}
选择禁用状态的元素

:checked {
display: none;
}
选择勾选的input 元素

:default {
display: none;
}
从一组类似的元素中选择默认元素。比如input 被勾选的即默认的

合法
input:valid {
border: 1px solid blue;
}
不合法
input:invalid {
border: 1px solid green;
}
输入验证合法与不合法显示时选择的元素。

input:required {
border: 1px solid blue;
}

input:optional {
border: 1px solid green;
}
根据是否具有required 属性选择元素

2 动态伪类选择器

(1)未访问
a:link {
color:red;
}

(2)已经访问
a : visited {
color : orange;
}

(3)鼠标悬停在超链接上
a : hover {
color:blue;
}

(4)按下激活
a : active {
color : green;
}

(5)获得焦点时
: focus {
border: 1px solid red;
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 伪元素主要有以下六个: ::first-line ::first-letter ::after ::before ...
    流动码文阅读 2,549评论 0 0
  • 选择器 元素选择符 关系选择符 属性选择符 伪类选择符 伪对象选择符 一、元素选择符 通配选择符 (*):选择所有...
    云外之境阅读 1,924评论 0 0
  • CSS简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示HTML 元素...
    MrMagicWang阅读 740评论 0 1
  • 1.CSS简介 Cascading Style Sheet 层叠样式表 主要用来定义页面中的表现,HTML 描述页...
    hyt222阅读 885评论 0 0
  • 献给学习游泳小分队的姐妹们 今天下班走的晚,又去修了鞋,去市场买了菜,回家以后到处找泳衣,好不容易找出来试了一下...
    小Q的大世界阅读 935评论 0 1