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

2017-09-01 19:00 出处:360java.com 作者:360java  阅读()
  伪类选择器汇总 伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器 它能够根据元素在文档中的位置选择元素, 这类元素都有个

 

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

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

    :root

                            

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

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

     

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

     

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

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

     

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

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

    其他:

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

  3. UI伪类选择器

    :enable

    :disable

     

    html文件

    css文件

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

    效果

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

:checked 勾选的生效

html文件

css文件

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

将被勾选的隐藏起来

:default 默认的生效, 很少用

css文件

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

:valid 合法时生效

:invalid 不合法时生效

html文件

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

css文件

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

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

:required 必填部分生效

optional 不是必填的生效

 

html文件            

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

css文件

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

 

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

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

input:focus

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

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

 

  1. 其他伪类选择器

    :not 反选 重点掌握

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

    不含baidu的超链接为红色

     

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

     

    html文件

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

    替换前

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

    css文件

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

    如果想不影响某些为空的部分,可以指定如

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

     

     

    替换后

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

     

    :lang

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

    :target 页面内定位锚点, 一定位立刻生效

     

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

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

     

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

     

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

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

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

分享到:
本文标签: 伪类, 结构性, 动态, 类和, 其他, valid, check, en

相关文章

发表评论(共条评论)愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

Copyright (C) java学习 360java 360java.com, All Rights Reserved.

苏ICP备16022210号