精华内容
下载资源
问答
  • CSS3选择器

    2019-12-25 20:24:23
    css3选择器兄弟选择器(~)属性选择器(E[att])伪类选择器(:)伪对象选择器 我们都知道在css中选择器有CLASS选择器,ID选择器,E标签选择器,*通配符,>子代选择器,+兄弟选择器等等,但是这些在实际开的的...


    我们都知道在css中选择器有CLASS选择器ID选择器E标签选择器*通配符>子代选择器+兄弟选择器等等,但是这些在实际开的的过程中使用起来还是不够方便,于是在CSS3中增加了很多方便我们使用的选择器。

    兄弟选择器(~)

    我们在前面已经有过了一个+兄弟选择器,同样都是兄弟选择器,他们有什么区别呢?

    .p + p{
    	background-color: red;
    }
    

    在这里插入图片描述

    .p ~ p{
    	background-color: red;
    }
    

    在这里插入图片描述
    +兄弟选择器选择的是他的下一个兄弟
    ~兄弟选择器选择的是他所有的兄弟

    属性选择器(E[att])

    属性选择器就是去获取设置了属性的元素
    
    选择符 描述
    E[att] 选择具有att属性的E元素。
    E[att=“val”] 选择具有att属性且属性值等于val的E元素。
    E[att~=“val”] 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。
    E[att^=“val”] 选择具有att属性且属性值为以val开头的字符串的E元素。
    E[att$=“val”] 选择具有att属性且属性值为以val结尾的字符串的E元素。
    E[att*=“val”] 选择具有att属性且属性值为包含val的字符串的E元素。
    E[att|=“val”] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择。

    伪类选择器(:)

    选择器 描述
    E:linkE:link 设置超链接a在未被访问前的样式。
    E:visited 设置超链接a在其链接地址已被访问过时的样式。
    E:hover 设置元素在其鼠标悬停时的样式。
    E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
    E:focus 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。
    E:not(s) 匹配不含有s选择符的元素E。
    E:root 匹配E元素在文档的根元素。
    E:first-child 匹配父元素的第一个子元素E。
    E:last-child 匹配父元素的最后一个子元素E。
    E:only-child 匹配父元素仅有的一个子元素E。
    E:nth-child(n) 匹配父元素的第n个子元素E。
    E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
    E:first-of-type 匹配父元素下第一个类型为E的子元素。
    E:last-of-type 匹配父元素下的所有E子元素中的倒数第一个。
    E:only-of-type 匹配父元素的所有子元素中唯一的那个子元素E。
    E:nth-of-type(n) 匹配父元素的第n个子元素E。
    E:nth-last-of-type(n) 匹配父元素的倒数第n个子元素E。
    E:empty 匹配没有任何子元素(包括text节点)的元素E。
    E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
    E:enabled 匹配用户界面上处于可用状态的元素E。
    E:disabled 匹配用户界面上处于禁用状态的元素E。
    E:target 匹配相关URL指向的E元素。

    伪对象选择器

    选择器 描述
    E:first-letter 设置对象内的第一个字符的样式
    E:first-line 设置对象内第一行的的样式
    E:before 设置对象前的内容
    E:after 设置对象后的内容
    E::placeholder 设置对象文字占位符的样式
    E::selection 设置对象被选择时的颜色
    展开全文
  • CSS3 选择器

    2018-04-28 22:44:46
    css3 选择器 基本选择器 兼容性: 层次选择器 动态伪类选择器 UI元素状态伪类选择器 结构伪类选择器 否定伪类选择器 属性选择器 ...

    css3 选择器


    基本选择器


    这里写图片描述
    兼容性:
    这里写图片描述
    层次选择器


    这里写图片描述
    这里写图片描述
    动态伪类选择器


    这里写图片描述
    这里写图片描述
    这里写图片描述

    UI元素状态伪类选择器


    这里写图片描述
    这里写图片描述
    结构伪类选择器


    这里写图片描述
    这里写图片描述
    这里写图片描述
    否定伪类选择器
    这里写图片描述
    这里写图片描述
    属性选择器


    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

    展开全文
  • css3选择器

    2016-07-27 18:09:18
    前端必须掌握30个CSS3选择器 征服高级CSS选择器 前端必须掌握30个CSS3选择器
    展开全文
  • css3 选择器

    2017-09-09 08:17:12
    1 CSS3选择器 1.1属性选择器 E[attr ^= “value]: 找到以value开头的属性值。 E是标签名可以不写,attr是属性例如id、class。 E[attr $= “value]: 找到以value结尾的属性值。 E是标签名可以不写,attr是属性...

    Html5我们已经学习完毕了,下面我们进行下一项css3学习。

    首先学习一下选择器的应用:

    1 CSS3选择器

    1.1属性选择器
    E[attr ^= “value]: 找到以value开头的属性值。 E是标签名可以不写,attr是属性例如id、class。
    E[attr $= “value]: 找到以value结尾的属性值。 E是标签名可以不写,attr是属性例如id、class。
    [title~=“tt”] 选择设置了title属性包含完整tt的单词。必须有独立的tt。
    [title*=“tt”] 选择设置了title属性包含tt的元素。


    1.2伪类选择器
    1、和用户页面相关
    E:enable{}:元素被激活的时候触发,比如搜索框获得焦点。
    E:disabled{}:元素被禁用的时候触发,比如不可获得焦点。
    E:checked{}:当元素被选中的时候触发,比如radio或checkbox元素的选中。
    p::selection :选中的时候触发,比如一大段字被选中的时候,给选中文字设置字体。
    注意:只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。
    2、结构性伪类
    E:root,在HTML文档中就是HTML元素。
    Body的高度到底是啥?当我们没有对HTML元素设置背景颜色的时候,HTML会自动读取body的背景颜色。
    E:empty:当一个元素没有内容(没有子元素)的时候触发。
    E:nth-child(index):所有元素的父元素的第index孩子,孩子的编号是从一开始的,同时编号的顺序不管 什么类型的元素 依次递增。
    E:nth-of-type(index){}:所有元素的父元素的第index孩子,孩子的编号根据统一类型的元素进行编号,如果一个元素有多种元素(div、H3、p),那么就有多种编号。
    E:first-of –type: == E:nth-of-type(1){}
    E:last-of-type == E:nth-of-type(最后一个){}
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,330
精华内容 7,732
关键字:

css3选择器