• CSS 选择器之基本选择器 属性选择器 伪类选择器


    CSS 选择器

    常见的选择器列表图

    CSS选择器笔记

    基本选择器

    通配符选择器(*)

    元素选择器(E)

    类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。

    id选择器(#ID)

    多元素选择器(E,F)

    后代选择器(E F)

    子元素选择器(E>F)    

    IE6不支持子元素选择器。 子元素选择器,匹配所有E元素的子元素F

    相邻元素选择器(E + F)     

    毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

    同级元素选择器(E ~ F)  

    匹配任何在E元素之后的同级F元素

    属性选择器

    CSS 2.1 属性选择器

    [attribute]               

    用于选取带有指定属性的元素,不考虑该属性的值。

    [attribute=value]    

    用于选取带有指定属性和值的元素。

    [attribute~=value]    

    用于选取属性值中包含指定词汇的元素。

    [attribute|=value]      

    用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。该值必须是整个单词,比如 lang="en",或者后面跟着连字符,比如 lang="en-us"。

    CSS 3 属性选择器

    [attribute^=value]    

    匹配属性值以指定值开头的每个元素。

     [attribute$=value]    

    匹配属性值以指定值结尾的每个元素。

    [attribute*=value]    

     匹配属性值中包含指定值的每个元素。

    伪类选择器

     CSS 2.1中的伪类

    E:first-child    

    匹配父元素的第一个子元素

    E:link            

    匹配所有未被点击的链接       

    链接要按照 link、visited、hover、active 顺序写

    E:visited        

    匹配所有已被点击的链接

    E:hover          

    匹配鼠标悬停其上的E元素

    E:active        

    匹配鼠标已经其上按下、还没有释放的E元素

    E:focus          

    匹配获得当前焦点的E元素

    E:lang(c)        

    匹配lang属性等于c的E元素

    CSS 3中与用户界面有关的伪类

    E:enabled

    匹配表单中激活的元素

    E:disabled

    匹配表单中禁用的元素

    E:checked

    匹配表单中被选中的radio(单选框)或checkbox(复选框)元素

    E::selection

    匹配用户当前选中的元素

    CSS 3中的结构性伪类

    E:root

    匹配文档的根元素,对于HTML文档,就是HTML元素

    E:nth-child(n)

    匹配其父元素的第n个子元素,第一个编号为1

    E:nth-last-child(n)

    匹配其父元素的倒数第n个子元素,第一个编号为1

    E:nth-of-type(n) 与:nth-child()

    作用类似,但是仅匹配使用同种标签的元素

    E:nth-last-of-type(n) 与:nth-last-child()

    作用类似,但是仅匹配使用同种标签的元素

    E:last-child

    匹配父元素的最后一个子元素,等同于:nth-last-child(1)

    E:first-of-type

    匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)

    E:last-of-type

    匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)

    E:only-child

    匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)

    E:only-of-type

    匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

    E:empty

    匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素

    CSS 2.1中的伪元素

    E:first-line 匹配E元素的第一行

    E:first-letter 匹配E元素的第一个字母

    E:before 在E元素之前插入生成的内容

    E:after 在E元素之后插入生成的内容

    CSS 3的反选伪类

     E:not(s)

    匹配不符合当前选择器的任何元素

    CSS 3中的 :target 伪类

    E:target

    匹配文档中特定"id"点击后的效果

    (The End)
  • 相关阅读:
    苹果的HomeKit协议
    广州出游计划
    Qt学习博客推荐
    Log4Qt使用(三)在DailyRollingFileAppender类中增加属性mMaxBackupIndex
    QT中关于窗口全屏显示与退出全屏的实现
    键盘事件-----按下回车键则触发事件
    窗体显示/编码设置/开机启动/文件选择与复制/对话框等
    设置系统日期时间
    输入内容, 列出可选的项: QComboBox
    如何根据安装时缺失的文件查找对应的包
  • 原文地址:https://www.cnblogs.com/oneplace/p/5463315.html
Copyright © 2020-2023  润新知