标签:
1.类和ID选择器的区别
相同点:可以应用于任何元素
不同点:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 以空格分隔的词列表)
2.属性选择器:[属性]
根据一个或者多个属性元素来选择,h1[class]{color:red;} a[class] [title]{color:red;}
根据具体属性值来选择,a[class="a1"]{color:red;}
根据部分属性值来选择。p[class~="title"]{color:red;}表示p标签的class中只要包含title就使颜色变成红色。"~="能用于任何属性。
子串匹配属性选择器:
[foo^="bar"]选择foo属性值以“bar”开头的所以元素
[foo$="bar"]选择foo属性值以“bar”结尾的所以元素
[foo*="bar"]选择foo属性值包含子串“bar”的所以元素
特定属性选择器:例:*[lang|="en"]{color="blue";}这个规则会选择lang属性以en或者en-开头的所有元素。这种属性选择器最常见的用途是匹配语言值。
3. * 子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。
*包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
*要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以用相邻兄弟结合符(adjacentsibling combinator),这表示为一个加号(+)。
例:h1 +p {margin-top:0px;}选择紧接在一个h1元素后出现的所以段落,h1 要和p元素有共同的父元素。
4.伪类选择器:
链接伪类:静态:
:link 未访问的地址超链接 a:link{color:bule}
:visited 已访问的地址超链接 a:visited{color:red}
以上两例子等同于<body link="blue" vlink="red">
动态伪类:(可以运用到任何元素)
:focus 指示当前拥有输入焦点的元素,也就是说可以接受键盘输入或者能以某种方式激活的元素。
:hover 指示鼠标指针停留悬停的情况
:active指示被用户输入激活的元素。例鼠标点击情况。
*伪类的顺序“link-visited-focus-hover-active”
*选择第一个子元素 :first-child
例:p:first-child {color:red;}将作为某元素第一个子元素的所有p元素设置为粗体。常见的错误是认为first-child 之类的选择器会选择p元素的第一个子元素。
*可以在同一个选择器中结合使用伪类。结合顺序并不重要,但不用把互斥的伪类放在一起。
例:a:link:hover:lang(de){color:red}或者a:hover:link:lang(de){color:red}将未点击过的语言为德语的超链接鼠标悬停时的颜色变为红色。
5.伪元素选择器 伪元素都必须放在出现该伪元素选择器的最后面
*设置首字母样式 :first-letter
*设置第一行样式 :first-line
*设置之前和之后的样式 :before :after
6.可以兼容所有浏鉴器的“伪类选择符”就是 a 标签(伪类选择符有很多,尤其是 css3 中,但是不能兼容所有浏览器),例如 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。
标签:
原文地址:http://www.cnblogs.com/yuxingyoucan/p/5347796.html