码迷,mamicode.com
首页 > Web开发 > 详细

CSS--选择器

时间:2016-04-02 17:37:32      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

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 的组合。

CSS--选择器

标签:

原文地址:http://www.cnblogs.com/yuxingyoucan/p/5347796.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!