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

 

1. 伪类选择器汇总
   伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其余伪类. 具体以下

2. 结构性伪类选择器结构性伪类选择器
   它可以根据元素在文档中的位置选择元素, 这类元素都有个前缀":"
   1. 根元素选择器 只做用于html等底部标签.不多用 ..

   :root

                           

   
   2. 子元素选择器 子元素全选还要更细致                                    

   ul>li:first-child{ } 增长伪类first-child 第一个

   ul>li:last-child{ } 增长伪类last-child 最后一个    

   ul>li:only-child{ } 增长伪类only-child 那些只有一个的,影响这个独生子

   div>p: only-of type{ } 增长伪类only-of-type 选择指定类型的那个子元素, 其实功能和 单单的div>p相似

    

    

   伪类都须要加上前置选择器来限制范围

    

   3. ul>li:nth-child(2) { } ul下的li 的第二个子元素

   ul>li:nth-last-child(2) { } …. 倒数第二个

   其余:

3. UI伪类选择器

   :enable

   :disable

    

   html文件

   css文件

   效果

:checked 勾选的生效

html文件

css文件

将被勾选的隐藏起来

:default 默认的生效, 不多用

css文件

:valid 合法时生效

:invalid 不合法时生效

html文件

css文件

填对了数字, 就变成绿色了.

:required 必填部分生效

optional 不是必填的生效

 

html文件            

css文件

 

a:link 做用于a 标签间的文本

input:focus

切换文本输入光标, 输入框变了颜色

 

1. 其余伪类选择器

   :not 反选 重点掌握

   不含baidu的超连接为红色

    

   :empty 做用空标签, 有点像word的替换空格的意思

    

   html文件

   替换前

   css文件

   若是想不影响某些为空的部分,能够指定如

   p:empty{ } 那css就只影响p下的空标签

    

    

   替换后

    

   :lang

   :target 页面内定位锚点, 必定位马上生效

    

   name 或者id 均可以的, 锚点是能够设置在任何标签的, 至于超连接<a href=#锚点名称>只不过是一个超连接,这里直接在浏览器输入#锚点名称效果就是跟按了href以后同样的.

    

    

   测试的时候, 在最末尾加上"# 锚点名称"

   效果(实际上定位锚点更可能是在一些很长的页面, 一点就定位到. 并且边成红色了.)