【如何使用CSS3中的结构伪类选择器和伪元素选择器】的更多相关文章

CSS伪类与CSS伪元素的区别及由来

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:"这两个是不同的",也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准…

css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择器] 文档的元素是最基本的选择器 html{color: black;} p{color: gray;} h2{color: silver;} [类选择器] 类选择器用于选择一类元素 .div{color: red;} // 单个类的选择 .div1.div2{color: red;} // 多个类…

关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px #fff solid; font-size: 16px; box-shadow: 0 0 21px rgba(97, 104, 124, .15); vertical-align: middle; } input:focus{ border-color: #2bb3ee; } 效果: 给input元…

转贴：CSS伪类与CSS伪元素的区别及由来具体说明

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:“这两个是不同的”,也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章…

前端（六）—— 伪类选择器：a标签的伪类、内容伪类、索引伪类、取反伪类

a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 <style type="text/css"> a { color: #333; text-decoration: none; } /*:link为一个整体,代表超链接的初始状态*/ a:link { color: orange; } /*:hover鼠标悬浮*/ a:hover…

CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

  伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":"1. 根元素选择器 只作用于html等底部标签.很少用 .. :root                          2. 子元素选择器 子元素全选还要更细致                                     ul>li:first-child{ } 增加伪类firs…

css3类选择器之结合元素选择器和多类选择器

css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .p2{font-size:30px;} /*结合元素选择器*/ p.p1{color:rebeccapurple;} /*多类选择器*/ .p1.p…

如何使用CSS3中的结构伪类选择器和伪元素选择器

结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一个子元素. E:nth-child(n) 匹配E元素的第n个子元素. E:nth-child(2n)或者E:nth-child(even) 匹配E元素的偶数子元素. E:nth-child(2n+1)或者E:nth-child(odd) 匹配E元素的奇数子元素. E:only-child 匹配E元素…

css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

后代选择器 祖先元素 后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器 元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器 元素~兄弟元素(该元素之后的所有兄弟元素) <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8">…

CSS中的伪类和为伪元素

伪类: 伪元素:…