CSS选择器

阅读数:920 发布时间:2016-06-26 15:39:52

作者:zzl005 标签: CSS 选择器 w3zf

选择器:每一条css样式声明(定义)由两部分组成,形式如下:

选择器{   
         样式;   
}

在{ }之前的部分就是“选择器”,“选择器”指明了{ }中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

类选择器.类选器名称{css样式代码;}
注意:

  1. 英文圆点开头
  2. 其中类选器名称可以任意起名(但不要起中文)

ID选择器 与 类选择器的一些重要的区别:

  1. 为标签设置id="ID名称",而不是class="类名称"
  2. ID选择符的前面是井号(#)号,而不是英文圆点(.)
  3. ID选择器只能在文档中使用一次。
  4. 可以使用类选择器词列表方法为一个元素同时设置多个样式。而ID选择器不可以

子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

选择子元素

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

h1 > strong {color:red;}

子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。

包含(后代)选择器(descendant selector),即加入空格,用于选择指定标签元素下的后辈元素。

根据上下文选择元素

我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:

div h1 {color:red;}   

总结:作用于元素的第一代后代,空格作用于元素的所有后代。

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

选择相邻兄弟

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

h1 + p {margin-top:50px;}  

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素

相关文章推荐: