【css伪类选择器及伪元素选择器】的更多相关文章

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

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

前端（六）—— 伪类选择器：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…

关于伪类“: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 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

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

CSS选择器之通配符选择器和多元素选择器

1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段html代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head>…

CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器.例如 <html> <head> <style type="text/css"> ul em {color:red;…

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…

css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测试文字显示黄色,标签选择器的结果被属性选择器覆盖了,起作用的是属性选择器 结论:id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器(id选择器和class选择器可以自行验证), 一般相等权重的按位置覆盖,不同权重的选择器,位置变了也不会覆盖…

前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器.例如 <html> <head> <style type="text/css"> ul em {color:red;…

H5 14-后代选择器和子元素选择器

14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-后代选择器和子元素选择器</title> </head> <body> <!-- 1.后代选择器和子元素选择器之间的区别? 1.1 后代选择器使用空格作为连接符号 子元素选择器使用>作…