选择器

CSS2

有关 CSS2.1 及以下的选中器, CSS3 中的新选择器请见 css3新增选择器

id选择器( #myid) 类选择器(.myclassname) 标签选择器(div, h1, p) 紧邻同胞选择器 h1 + p(选的是h1后紧跟的那个p) 一般同胞选择器 h1 ~ p(选择所有跟在h1后的p)[css3] 子选择器(ul > li) 后代选择器(li a) 通配符选择器( * ) 属性选择器(a[rel = "external"]) 伪类选择器(a:hover, li:nth-child)

CSS3选择器

1. 属性选择器

对CSS2中的属性选择器进行了扩展,新增了3个属性选择器。

E[attr^="val"]  // 选择匹配元素E,且E元素包含attr属性,其属性值以val开头
E[attr$="val"]  // 选择匹配元素E,且E元素包含attr属性,其属性值以val结尾
E[attr*="val"]  // 选择匹配元素E,且E元素包含attr属性,其属性值含有val串(任意位置)

2. :root

表示匹配所在文档的根元素。在HTML文档中,根元素始终是,所以:root选择器等同于元素。

3. :not

否定选择器,表示选择除某个元素之外的所有元素。
比如,给除submit按钮之外的input元素添加边框

input:not([type="submit"]){
    border: 1px solid #ccc;
}

4. :empty

该选择器用来选择没有任何内容的元素(空格也不能有)。
比如,隐藏空内容的div,

div:empty {
    display: none;
}

5. :target

目标选择器,用来匹配文档(页面)中活动的目标元素。

6. :first-child

当前元素的父级元素中的第一个元素。

7. :last-child

选择的元素正好与 first-child 相反。

8. :nth-child(n)

该元素的父元素的第n个元素。

:nth-child(1)       // 第一个
:nth-child(2n)      // 偶数行
:nth-child(2n+1)    // 奇数行
:nth-child(even)    // 偶数行
:nth-child(odd)     // 奇数行

注:css中第一行是从1开始的。

9. :only-child

用于匹配属于父元素中唯一子元素的元素(最终还是子元素)。

10. :enabled 和 :disabled

:enabled 表示表单元素中可用的元素。 :disabled 相反,表单元素中设置了 disabled 的元素。

11. :checked

表单元素中,选中状态的单选按钮和复选按钮元素。

12. ::selection

表示在页面上选中的文字内容。

13. :read-only 和 :read-write

:read-only 表示只读元素,即设置了readonly的元素。 :read-write 选择器刚好与:read-only选择器相反,主要用来指处于非只读状态时的元素。

14. ::before 和 ::after

::before和::after这两个主要用来给元素的前面或后面插入内容,经常和content使用,用来清除浮动或者下时iconFont。

Copyright & copy https://www.zhuyuntao.cn 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-11-03 12:36:28

results matching ""

    No results matching ""