标签选择器
标签选择器的优先级比较低
id选择器
语法:#myid{}
id选择器可以单独使用也可以用来创建派生选择器
#myid p{}
类选择器
.myclass{}
可以单独使用也可以用来创建派生选择器
属性选择器
描述 | |
---|---|
[attribute] | 用于选取带有指定属性的元素。 |
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
派生选择器
后代选择器——后代选择器(descendant selector)又称为包含选择器。 后代选择器可以选择作为某元素后代的元素。
选择器之间的空格是一种结合符(combinator)。规则左边的选择器一端包括两个或多个用空格分隔的选择器
有关后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。
例如,如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。
子选择器
语法:h1>strong h1d下的strong
后代选择器对所有子元素有效(孙子,曾孙子元素,子子孙孙无穷匮也)
子选择器只对儿子有效,爷爷管不了孙子
后代选择器是所有浏览器都兼容的,都可使用。
子选择器在IE6、IE7、IE8中则是不被支持的选择器,各自bug!
相邻兄弟选择器——选择相邻兄弟
语法:h1+p{}
两者有相同的父元素时有效,符合h1后面的第一个p标签生效
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
语法二:p+p{}
所有符合语法的p标签都生效
分组选择器