zoukankan      html  css  js  c++  java
  • 06前端css3增加选择器

    跑 ...

    css3新增选择器

    基本选择器选择器

    • 子元素选择器

      [父元素 > 子元素] 选择父元素下子元素

    • 相邻兄弟选择器

      [子元素1 + 子元素2] 匹配子元素1紧跟在后面的子元素2,他们必须有一个相同的父元素

    • 通用兄弟选择器

      [子元素1 ~ 子元素2] 匹配子元素1后面的所有元素2的所有元素,他们必须有一个相同的父元素

    • 群组选择器

      [元素1, 元素] 具有相同样式的元素分组在一起,用逗号隔开

    属性选择器

    • 对带有指定属性的html元素设置样式

    • element[attribute] 匹配所有attribute属性的元素,设置样式

    • element[attribute='value'’] 匹配所有attribute属性值为value的元素,设置样式

    • element[attribute~='value'’] 匹配所有attribute属性值为包含单词value的元素,设置样式

    • element[attribute^='value'’] 匹配所有attribute属性值为以value开头的元素,设置样式

    • element[attribute$='value'’] 匹配所有attribute属性值为以value结尾的元素,设置样式

    • element[attribute*='value'’] 匹配所有attribute属性值为包含value的元素,设置样式

    • element[attribute|='value'’] 匹配所有attribute属性值为value-开头的元素,设置样式

    伪类选择器

    动态伪类

    • :active

    • :link

    • :focus

    • :visited

    • :hover

    状态伪类

    • :checked

    • :enabled

    • :disabled

    结构类

    • :first-child 匹配属于其父元素的第一个子元素的每一个element元素

    • :last-child 匹配属于其父元素的最后一个子元素的每一个element元素

    • :only-child 匹配属于其父元素只有一个子元素的每一个element元素

    • :nth-child(N/n) 匹配属于其父元素的N个子元素,不论元素的类型

    • :nth-last-child(N/n) 匹配属于其父元素的N个子元素,不论元素的类型,从最后一个子元素开始计数

    • :fist-of-type匹配属于其父元素的第一个能匹配上type类型的子元素的每一个element元素

    • :last-of-type匹配属于其父元素的最后一个能匹配上type类型的子元素的每一个element元素

    • :nth-of-type(n)匹配属于其父元素能匹配上type类型开始的第n个子元素的每一个element元素

    • :nth-last-of-type(n)匹配属于其父元素能匹配上type类型开始的第n个子元素的每一个element元素,从最后一个子元素开始计数

    • :only-of-type匹配属于其父元素只有一个符合type类型的子元素的每一个element元素

    • :empty匹配属于其父元素没有一个符合type类型的子元素的每一个element元素

    否定选择器

    • :not 匹配非指定元素的每一个元素

    伪元素

    • ::first-line对元素的第一行文本进行格式化,只能用在块元素

    • ::first-letter对元素的第一个字母进行格式化,只能用在块元素

    • ::before 在指定元素前插入内容

    • ::after 在指定元素后插入内容,一般用after清除浮动

    • ::selection 用于设置在浏览器中选中的文本后的背景色和前景色

    css权重

    • 行内样式1000

    • id选择器100

    • 类选择器10

    • 属性选择器、伪类选择器10

    • 元素、伪元素1

    • 通配符* 0

  • 相关阅读:
    自定判断代码的执行环境
    将某个Qt4项目升级到Qt5遇到的问题[转]
    QT 智能提示设置
    c++基础 explicit
    Qt 5.2 Creator 和 vs2012 QT 插件的安装
    servlet乱码问题总结
    c++基础 使用智能指针
    Servlet学习之web服务器Tomcat 详解
    Windows数据类型
    友元类
  • 原文地址:https://www.cnblogs.com/muzihuan/p/13205689.html
Copyright © 2011-2022 走看看