CSS 选择器

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$=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。用于匹配输入值为非法的元素。