简单的CSS选择符
* 所有元素
#id 带有给定ID的元素
element 给定类型的所有元素
.class 带有给定类的所有元素
a, b 与a或b匹配的元素
a b 作为a后代b匹配的元素
a > b 作为a子元素的b匹配的元素
a + b 作为a后面直接同辈元素的b匹配的元素
a ~ b 作为a后面同辈的b匹配的元素
在同辈元素间定位
:nth-child(index) 作为其父元素第index个子元素的元素(从1开始计数)
:nth-child(even) 作为其父元素第偶数个子元素的元素(从1开始计数)
:nth-child(odd) 作为其父元素第奇数个子元素的元素(从1开始计数)
:nth-child(formula) 作为其父元素第n个子元素的元素(从1开始计数)。formula(公式)的格式为an + b,a、b为整数 (这个我也不大懂,了解的朋友希望评论告诉我一下,谢谢)
:nth-last-child() 与:nth-child()相同,只不过是从最后一个元素开始倒计数
:first-child 作为其父元素第一个子元素的元素
:last-child 作为其父元素最后一个子元素的元素
:only-child 作为其父元素唯一一个子元素的元素
:nth-of-type() 与:nth-child()相同,只不过只计相同元素
在匹配的元素间定位
:first 结果集中的第一个元素
:last 结果集中的最后一个元素
:not(a) 结果集中与a不匹配的所有元素
:even 结果集中的偶数元素(从0开始计数)
:odd 结果集中的奇数元素(从0开始计数)
:eq(index) 结果集中索引为index的元素(从0开始计数)
:gt(index) 结果集中所有位于给定索引之后(大于该索引)的元素(从0开始计数)
:lt(index) 结果集中所有位于给定索引之后(小于该索引)的元素(从0开始计数
表单
:input 所有<input>、 <select>、<textarea>和<button>元素
:text type = 'text'的<input>元素
:password type = 'password'的<input>元素
:file type = 'file'的<input>元素
:radio type = 'radio'的<input>元素
:checkbox type = 'checkbox'的<input>元素
:submit type = 'submit'的<input>元素
:image type = 'image'的<input>元素
:reset type = 'reset'的<input>元素
:button type = 'button'的<input>元素及<button>元素
:enabled 启用的表单元素
:disabled 禁用的表单元素
:checked 选中的复选框和单选按钮元素
: selected 选中的<option>元素
其他自定义选择符
:root 文档的根元素
:header 标题元素(如<h1>、<h2>)
:animate 其动画正在播放的元素
:contains(text) 包含给定文本text的元素
:empty 不包含子节点的元素
:has(a) 后代元素中至少有一个与a匹配的元素
:parent 包含子节点的元素
:hidden 隐藏的元素,包括通过css隐藏的元素及<input type = 'hidden' />
:visible 与:hidden匹配的元素相反
:focus 获得键盘焦点的元素
:lang(language) 具有给定(在元素的lang属性或<meta>标签中声明的)语言代码的元素
:target URI标识符指向的目标元素
其他
^=:表示以什么开头
$=:表示以什么结尾
~=:表示包含什么
id:表示按id选择
评论 (0)