选择器:每一条css样式声明(定义)由两部分组成,形式如下:
选择器{
样式;
}
在{ }之前的部分就是“选择器”,“选择器”指明了{ }中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
类选择器:.类选器名称{css样式代码;}
注意:
- 英文圆点开头
- 其中类选器名称可以任意起名(但不要起中文)
ID选择器 与 类选择器的一些重要的区别:
- 为标签设置id="ID名称",而不是class="类名称"
- ID选择符的前面是井号(#)号,而不是英文圆点(.)
- ID选择器只能在文档中使用一次。
- 可以使用类选择器词列表方法为一个元素同时设置多个样式。而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中所有标签元素