CSS选择器

203 阅读2分钟

* 选择所有元素;
# id 选择指定id元素;
. class 选择指定类名元素;
element 选择指定element标签元素;
element1,element2 选择指定element1,element2标签元素;
element1 element2 选择指定element1内部的element2标签元素;
element1 > element2 选择指定element1内部子元素是element2标签元素;
element1 + element2 选择指定element1之后的element2标签元素;
element1 ~ element2 选择前面有element1的element2标签元素;
[ attribute ] 选择带有attribute属性的元素;
[ attribute = value ] 选择attribute属性值为value的元素;
[ attribute ~= value ] 选择attribute属性值包含value的元素;
[ attribute |= value ] 选择attribute属性值以value开头的元素;
[ attribute ^= value ] 选择attribute属性值以value开头的元素;
[ attribute $= value ] 选择attribute属性值以value结尾的元素;
[ attribute *= value ] 选择attribute属性值包含value的元素;
: link 选择未被访问的链接;
: visited 选择已被访问的链接;
: hover 选择鼠标悬停其上的链接;
: active 选择被选择的链接;
: focus 选择获得焦点的input元素;
: first-letter 选择指定元素的首字母;
: first-line 选择指定元素的首行;
: first-child 选择属于父元素的第一个子元素的每个指定元素;
:before 在被选元素的内容前面插入内容,使用content属性来指定要插入的内容;
:after 在被选元素的内容后面插入内容,使用content属性来指定要插入的内容;
: lang( language ) 选择带有language开头的lang属性的每个指定元素;
: first-of-type 选择属于其父元素的首个指定元素的每个指定元素;
: last-of-type 选择属于其父元素的最后指定元素的每个指定元素;
: only-of-type 选择属于其父元素的唯一元素的每个指定元素;
: only-child 选择属于其父元素的唯一子元素的每个指定元素;
: nth-child( n ) 选择属于其父元素的第n个子元素的每个指定元素;
: nth-last-child( n ) 选择属于其父元素的倒数第n个子元素的每个指定元素;
: nth-of-type( n ) 选择属于其父元素的第n个子元素的每个指定元素;
: nth-last-of-type( n ) 选择属于其父元素的倒数第n个子元素的每个指定元素;
: last-child 选择属于其父元素最后一个子元素的指定元素;
: root 选择文档的根元素;
: empty 选择没有子元素的指定元素( 包括文本节点 );
: target 选择当前活动的指定元素;
: enabled 选择每个启用的 input 元素;
: disabled 选择每个禁用的 input 元素;
: checked 选择每个被选中的 input 元素;
: not( selector ) 选择非selector的元素;
:: selection 选择用户选取的元素部分;