zoukankan      html  css  js  c++  java
  • css3选择符

    css属性选择器: 通过html属性选择对应的标签

    ​ 1 选择符[属性名] { } 当一个元素有当前html属性值名称则匹配成功.

    ​ 2 选择符[属性名="属性值"] 属性和属性名都匹配成功才做选中

    ​ 3 选择符[属性~="属性值"] 当前属性的属性值为一个词列表(多个单词以空格隔开) , 只要有当前指定的词就能匹配.

    ​ 4 选择符[属性^="字符"] 当这个属性值开头的时候被匹配(只要开头匹配就行)

    ​ 5 选择符[属性$="字符"] 当这个属性值结尾的时候被匹配(只要结尾匹配就行)

    ​ 6 选择符[属性*="字符"] 只要属性值里面包含这个字符就能匹配

    ​ 7 选择符[属性|="字符"] 属性值仅有当前字符 或者 以字符-开头的 (left-con)

    结构性伪类选择器 : 通过第几个进行查找

    假如把父元素比作一个动物园,把元素比作一只狮子,假如狮子每次出来的时候排队,产生一个虚拟的编号,:

    (1)假如狮子按序排在最前面,其他动物排在后面,那么查找第几只狮子的语法如下:

    ​ h2:first-child { } 选中 h2所在 整个 集合(父元素)里面 第一个h2

    ​ h2:last-child { } 选中 h2所在 整个 集合(父元素)里面 最后一个h2

    ​ h2:nth-child(第几个){} 通过第几个进行查找 (第几个) even(偶数)/ odd(奇数)/ 2n(偶数) /2n + 1(奇数)

    ​ h2:nth-last-child(倒数第几个) { } 查找倒数第几个

    ​ h2:only-child { } 当前集合(父元素)里面只有一个h2才会被选中

    (2)假如在一群狮子里面有其他动物,所以选中狮子的前提要先把其他的动物排除掉,然后再通过第几只进行查找

    ​ h2:first-of-type { } 选中 h2所在 整个 集合里面 第一个h2

    ​ h2:last-of-type { } 选中 h2所在 整个 集合里面 最后一个h2

    ​ h2:nth-of-type(第几个){} 通过第几个进行查找 (第几个) even odd 2n 2n + 1

    ​ h2:nth-last-of-type(倒数第几个){ }

    ​ h2:only-of-type { } 当前集合里面只有一个h2才会被选中

    上述2种的区别:判断当前同级元素是否为一类,如果非一类的情况下 选用of-type选择

    元素状态伪类

    :enabled 表单元素可用的时候执行的样式

    :disabled 表单元素禁用的时候执行的样式

    :checked 表单选中(用于单选 多选按钮选中的时候)

    ::selection 文本选中的时候的样式.

    动态伪类

    (1)a:link

    ​ 链接伪类选择器 (常用于链接描点上)

    ​ 选择匹配的a元素,而且a元素被定义了超链接并未被访问过。

    (2)a:visited

    ​ 链接伪类选择器(常用于链接描点上)

    ​ 选择匹配的a元素,而且a元素被定义了超链接并已被访问过。

    (3)a:active

    ​ 用户行为选择器

    ​ 选择匹配的a元素,且匹配元素被激活。常用于链接描点和按钮上

    (4)a:hover

    ​ 用户行为选择器

    ​ 选择匹配的a元素,且用户鼠标停留在元素a上。IE6及以下浏览器仅支持a:hover

    (5)a:focus

    ​ 用户行为选择器

    ​ 选择匹配的a元素,a当元素获取焦点时的样式

    层级选择器

    ​ 1):子选择器

    ​ 父元素选择器>子元素选择器 选中只是父元素最近一层的子元素。

    ​ 2):兄弟元素选择器

    ​ 元素1+元素2 同级 选中元素1同级离得最近的下面的兄弟元素

    ​ 3):通用选择器

    ​ 元素1~元素2 同级 选中元素1同级下面的所有的元素2

  • 相关阅读:
    谈谈严格模式
    javascript回调函数那些事~
    border-radius:50%和100%究竟有什么区别
    canvas浅谈 实现简单的自旋转下落
    js中关于this的理解
    对js 面对对象编程的一些简单的理解
    ios中 input 焦点光标不垂直居中
    只能输入数字的正则表达式在火狐的兼容问题解决方法
    关于margin、padding 对内联元素的影响
    element ui 表格的合并
  • 原文地址:https://www.cnblogs.com/cupid10/p/15617844.html
Copyright © 2011-2022 走看看