CSS--选择器

Posted Heroine.z

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS--选择器相关的知识,希望对你有一定的参考价值。

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--选择器的主要内容,如果未能解决你的问题,请参考以下文章

css都有哪些选择器

CSS3选择器入门

css都有哪些种类的选择器

详解CSS样式选择器都有哪些?

夯实基础--CSS=> 基础选择器

CSSCSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )