css选择器

文章字数：770,阅读全文大约需要3分钟

css选择

1. 基本选择器

选择器	含义
*	通用元素选择器，匹配任何元素
E	标签选择器，匹配所有使用e的标签
.myClass	class选择器
#myId	id选择器

2. 选择器组合

选择器	含义
E,F	多元素选择器，匹配所有E元素或F
E F	后代元素选择器，匹配所有E的后代元素F
E > F	子元素选择器，匹配所有E的子元素F
E + F	毗邻元素选择器，匹配所有紧随E的同级元素F
E ~ F	同级元素选择器，匹配所有E元素之后的同级F

3. 属性选择器

选择器	含义
[att]	匹配所有具有att属性的元素,以下所有选择器都能省略具体元素，代表任意元素
E[att]	匹配所有具有att属性的E元素
E[att=’val’]	匹配所有att属性等于’val’的E元素
E[att~=’val’]	匹配att有多个空格分割的值，其中一个是’val’的E元素
E[att	=’val’]

4. 伪元素选择器

选择器	含义
E:first-line	匹配E元素的第一行
E:first-letter	匹配E元素的第一个字母
E:before	在E元素之前插入内容
E:after	在E元素之后插入内容

5. 模糊搜索元素

选择器	含义
a[att^=’val’]	属性att的值以’val’开头
a[att$=’val’]	属性att的值以’val’结尾
a[att*=’val’]	属性att的值包含’val’

6. 用户界面关系相关的伪类

选择器	含义
E:enabled	表单中激活的元素
E:disabled	表单中禁用的元素
E:checked	表单中被选中的单选和复选框
E::selection	用户当前选中的元素

7. 结构性伪类

选择器	含义
E:root	文档的根元素，对于html文档来说，就是html元素
E:nth-child(n)	匹配E的第n个子元素，从1开始
E:nth-last-child(n)	匹配父元素倒数第n个子元素，从1开始
E:nth-of-type(n)	匹配父元素第n个E元素，从1开始
E:last-child	匹配父元素最后一个子元素，相当于nth-last-child(1)
E:first-of-type	相当于nth-of-type(1)
E:only:child	匹配父元素下仅有的一个子元素，相当于first-child:last-child
E:only-of-type	匹配父元素下使用唯一一个使用相同标签的子元素,相当于E:first-of-type:last-of-type
E:empty	匹配不包含任何子元素的元素

target伪类

选择器	含义
E:target	匹配文档中特定跳转id的元素

<!-- 点击之后页面会跳转到制定id的位置 -->
<a href="#text1">示例文字1</a>
<a href="#text2">示例文字2</a>
<a href="#text3">示例文字3</a>

<!-- div:target 就是指向跳转的那个div -->
<div id="text1">
    <h2>示例文字1</h2>
</div>
<div id="text2">
    <h2>示例文字2</h2>
</div>
<div id="text3">
    <h2>示例文字3</h2>
</div>
<!-- 也可以使用window.location.hash='#text1'，相当于点击了a标签 -->