CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他…

2018-06-24 01:29:21来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

?

  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之后一样的.

    ?

    ?

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

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

    ????

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:模态框中水平垂直居的问题

下一篇:(生产)vue-lazyload - 图片延迟加载