美文网首页
CSS3选择器

CSS3选择器

作者: 碎碎先生 | 来源:发表于2018-05-08 14:45 被阅读0次

    可以参考:
    1、https://blog.csdn.net/q1056843325/article/details/53189526?ref=myread
    2、https://www.cnblogs.com/caoyc/p/5855426.html
    CSS3选择器分为以下五类
    1、基本选择器
    2、层次选择器
    3、伪类选择器(分为六种:动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器)
    4、伪元素
    5、属性选择器

    详细介绍:
    一、基本选择器
    有以下几种: * 、 E 、#id、 .class、selector1,selectorN
    *: 通配选择器,选择所有元素,也可以选择某个元素下的所有元素(例: .demo *{background: red;},此时元素类名为demo下的所有元素都将背景色设为红色)
    E:元素选择器(html、body、p、div、ul、li等等)

    id:ID选择器

    .class:类选择器,这里介绍下多类选择器,通过两个或两个以上类选择器合并,来定义有别于一个类名的元素效果
    (例:.item.important {background: red;} 只对同时包含这两个类名的标签作用,ul.block{background: red;}仅对ul元素类名为block的作用)
    *IE6选择器并不支持多类名选择器,其将以末尾类名为准
    selector1,selectorN: 群组选择器是将具有相同样式的元素分组在一起,每个选择器之间用(,)隔开
    ,省去(,)就成了后代选择器
    二、层次选择器
    主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系: E F、E>F、E+F、E~F
    E F:后代选择器(或包含选择器)例如“E F”,E为祖先元素,F为后代元素,表达的意思就是选择器E元素的所有后代F元素,这里的F元素不管是E元素的子元素、孙辈元素或者更深层次的关系,都将被选中
    E>F:子选择器 只能选择某元素的子元素,其中E为父元素而F为子元素
    E + F:相邻兄弟选择器,可以选择紧接在另一个元素后的元素,他们具有一个相同的父元素,换句话说,E和F是同辈元素,F元素在E元素的后面,并且相邻。
    E~F通用兄弟选择器,是CSS3新增的,用于选择某元素后面的所有兄弟元素
    三、动态伪类选择器
    CSS3伪类选择器可以分为六种:动态伪类选择器、目标伪类选择器、语言伪类、UI元素状态伪类选择器、结构伪类选择器和否定伪类选择器。常见的“:link”、“:visited”、“:hover”、“:active”。
    动态伪类选择器:
    动态伪类早在CSS中就有,并不是CSS3才有的,动态伪类并不存在于HTML中,只有当用于和网站交互的时候才能体现出来。动态伪类包含两种,第一种是链接中常看到的锚点伪类,另一种为用户行为伪类
    E:link 链接伪类选择器,
    E:visited 链接伪类选择器
    E:active 用户行为伪类选择器
    E:hover 用户行为伪类选择器
    E:focus 用户行为伪类选择器
    锚点伪类的设置必须遵守一个“爱恨原则”LoVe/HAte,也就是“link-visited-hover-acticve”
    四、目标伪类选择器
    目标伪类选择器“:target”是众多使用的CSS3特性中的一个,用来匹配文档(页面)的URI中某个标志符的目标元素
    五、语言伪类选择器
    六、UI元素状态伪类选择器
    主要用于form表单元素上,以提高网页的人机交互、操作逻辑以及页面的整体美观
    UI元素的状态一般包括:启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机
    七、结构伪类选择器
    所有的结构伪类都是基于HTML文档树的也称作DOM
    语法: E:first-child、E:last-child、E:root、E F:nth-child(n),其中n可以是整数(1、2、3)关键字(even、odd)可以是公式(2n+1) 、 E F:nth-last-child(n)、E:nth-of-type(n)、E:nth-last-of-type(n)、E:first-of-type、E:last-of-type、E:only-child、E:only-of-type、E:empty

    线性渐变学习网址
    https://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html

    相关文章

      网友评论

          本文标题:CSS3选择器

          本文链接:https://www.haomeiwen.com/subject/vjbvrftx.html