zoukankan      html  css  js  c++  java
  • 初学CSS3选择器的学习小结(不全面的,只是阶段小结)

    CSS选择器汇总
    一、基本选择器
    1.通配选择符 (*)
    使用:*{...}
    描述:会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用
    2.html选择器
    使用:Ele{...}
    描述:以文档语言对象类型作为选择符。
    3.id选择器
    使用:#id名 {...}
    描述:以唯一标识符id属性作为选择符。
    4.class选择器
    使用:.类名{...}
    描述:以class属性作为选择符。
    二、关系选择器
    1.包含选择器:
    使用:E F{...}(E包含F)
    描述:选择所有被E元素包含的F元素,包含选择器将会命中所有符合条件的后代,包括儿子,孙子,孙子的孙子...
    2.子选择器
    使用:E>F {...}
    描述:选择所有作为E元素的子元素F。
    3.相邻选择器
    使用:E+F {...}
    描述:选择紧贴在E元素之后F元素(即紧挨着E元素之后的第一个F元素),元素E与F必须同属一个父级。
    4.兄弟选择器
    使用:E~F {...}
    描述:选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级。
    三、属性选择器
    1. E[att]{...}
     描述:选择具有att属性的E元素。
     如:img[alt]{...}
     (alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息)
    2. E[att="val"]
     描述:选择具有att属性且属性值等于val的E元素。
     如:input[type="button"]{...}
    3. E[att~="val"] {...}
     描述:选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素(包含只有一个值且该值等于val的情况)。
    4. E[att^="val"] {...}
     描述:选择具有att属性且属性值为以val开头的字符串的E元素。
    5. E[att$="val"]
     描述:选择具有att属性且属性值为以val结尾的字符串的E元素。
    6. E[att*="val"] {...}
     描述:选择具有att属性且属性值为包含val的字符串的E元素。
    7. E[att|="val"] {...} 
     描述:选择具有att属性,其值是以val开头并用连接符"-"分隔的字符串的E元素;如果值仅为val,也将被选择。

    学会用不同的角度看待每个问题!
  • 相关阅读:
    Linux shell 获取当前时间之前N天
    python 连接oracle 数据库
    Python 连接mysql
    python字符串反转
    java基础之数据类型转换
    java 基础之数据类型
    使用sublime编辑器编辑eclpse跑tomcat的项目不及时更新问题的解决方法
    日常git命令
    快速排序,按某个属性,或按“获取排序依据的函数”,来排序
    Gulp初识
  • 原文地址:https://www.cnblogs.com/nisiweiLIQIYONG/p/9152548.html
Copyright © 2011-2022 走看看