文档分值:0

css >>> css >>> 选择器

课程目录

选择器
指令
注释
样式
文字排版
颜色
长度
属性
布局模型
盒子模型
CSS动画
CSS选择器

选择器:每一条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中所有标签元素

[ 该条目创建时间:2016-06-26 15:39:52 ]