CSS 选择器
-
.class 例如:.className。选择所有class="className"的元素。
-
#id 例如: #idName。选择所有id="idName"的元素。
-
* 例如:* 。选择所有元素。
-
element 例如:span。选择所有<span>元素。
-
element,element 例如:div,span。选择所有<div>元素和<span>元素。
-
element element 例如:div span。选择<div>元素内的所有<span>元素。
-
element>element 例如: div>span。选择所有父级是 <div> 元素的 <span> 元素。
-
element+element 例如: div+span。选择所有紧跟在 <div> 元素之后的第一个 <span> 元素。
-
[attribute] 例如:[target]。选择所有带有target属性元素 。
-
[attribute=value] 例如: [target=-blank]。选择所有使用target="-blank"的元素。
-
[attribute~=value] 例如:[title~=my]。选择标题属性包含单词"my"的所有元素 。
-
[attribute|=language] 例如: [lang|=cn]。选择 lang 属性等于 cn,或者以 cn- 为开头的所有元素。
-
:link 例如: a:link 。选择所有未访问链接。
-
:visited 例如:a:visited。选择所有访问过的链接 。
-
:active 例如:a:active 。选择活动链接 。
-
:hover 例如:a:hover。选择鼠标在链接上面时 。
-
:focus 例如: input:focus。选择具有焦点的输入元素。
-
:first-letter 例如:span:first-letter。选择每一个<span>元素的第一个字母 。
-
:first-line 例如: span:first-line。选择每一个<span>元素的第一行。
-
:first-child 例如:span:first-child。指定只有当<span>元素是其父级的第一个子级的样式。
-
:before 例如:span:before。在每个<span>元素之前插入内容 。
-
:after 例如:span:after。在每个<span>元素之后插入内容。
-
:lang(language) 例如:span:lang(it)。选择一个lang属性的起始值="it"的所有<span>元素。
-
element1~element2 例如: span~ul。选择span元素之后的每一个ul元素。
-
[attribute^=value] 例如:a[src^=“https”]。选择每一个src属性的值以"https"开头的元素 。
-
[attribute = v a l u e ] 例如: a [ s r c =value] 例如:a[src =value]例如:a[src=“.pdf”]。选择每一个src属性的值以".pdf"结尾的元素 。
-
[attribute*=value] 例如:a[src*=“runoob”]。选择每一个src属性的值包含子字符串"runoob"的元素 。
-
:first-of-type 例如:span:first-of-type。选择每个span元素是其父级的第一个span元素。
-
:last-of-type 例如:span:last-of-type。选择每个span元素是其父级的最后一个span元素 。
-
:only-of-type 例如:span:only-of-type。选择每个span元素是其父级的唯一span元素 。
-
:only-child 例如:span:only-child。选择每个span元素是其父级的唯一子元素 。
-
:nth-child() 可以选中任意位置的子元素 , 该选择器后面可以指定一个参数, 指定选定第几个子元素
-
:nth-child(even) 选中偶数位置的子元素 可用于表格隔行变色
-
:nth-child(odd) 选中奇数位置的子元素 可用于表格隔行变色
-
:nth-child(n) 例如: span:nth-child(2)。选择每个span元素是其父级的第二个子元素。
-
:nth-last-child(n) 例如:span:nth-last-child(2)。选择每个span元素的是其父级的第二个子元素,从最后一个子项计数 。
-
:nth-of-type(n) 例如: span:nth-of-type(2)。选择每个span元素是其父级的第二个span元素。
-
:nth-last-of-type(n) 例如:span:nth-last-of-type(2)。选择每个span元素的是其父级的第二个span元素,从最后一个子项计数 。
-
:last-child 例如: span:last-child选择每个span元素是其父级的最后一个子级。
-
:root 例如::root。选择文档的根元素 。
-
:empty 例如: span:empty选择每个没有任何子级的span元素(包括文本节点)。
-
:target 例如: #news:target。选择当前活动的#news元素(包含该锚名称的点击的URL)。
-
:enabled 例如:input:enabled。选择每一个已启用的输入元素 。
-
:disabled 例如: input:disabled。选择每一个禁用的输入元素。
-
:checked 例如:input:checked。选择每个选中的输入元素 。
-
:not(selector) 例如:not(span)。选择每个并非span元素的元素 。
-
::selection 例如:::selection。匹配元素中被用户选中或处于高亮状态的部分 。
-
:out-of-range 例如::out-of-range。匹配值在指定区间之外的input元素 。
-
:in-range 例如: :in-range。匹配值在指定区间之内的input元素。
-
:read-write 例如::read-write。用于匹配可读及可写的元素。
-
:read-only 例如::read-only。用于匹配设置 “readonly”(只读) 属性的元素。
-
:optional 例如::optional。用于匹配可选的输入元素。
-
:required 例如: :required。用于匹配设置了 “required” 属性的元素。
-
:valid 例如: :valid。用于匹配输入值为合法的元素。
-
:invalid , 例如: :invalid。用于匹配输入值为非法的元素。