css 选择器 介绍

“选择器”是什么？
每一条css样式定义由两部分组成，形式如下

在{}之前的部分就是“选择器”。
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
由此可见，“选择器”的功能是从“网页所有的元素”当中选择“部分元素”，我们把它称为“选择器”。
“选择器”的种类
前面讲了，“选择器”的功能是指明“样式”作用的“目标元素”。
那如何才能指明这些“目标元素”呢。
我们知道,一个“元素”有“标签名”,“class”,“id”这几个常见属性,那么就可以从这几个属性出发来确定“目标元素”.由此也就诞生了几个最常用的“选择器”--标签选择器,类选择器,id选择器
常用的“选择器”
标签选择器
使用“元素”的“标签名”作为“选择器”
书写形式


例如:p{},表示{}中的“样式”的将会作用于“标签名”为"p"的元素
类选择器
依据“元素”的“class”属性来编写“选择器”
书写形式


解释点号.后面跟着某些元素的“class”值
例如:.高亮显示{},表示{}中的“样式”的将会作用于“class”取值为"高亮显示"的元素
举例


解释:“样式”会作用于第一个"a"元素和第二个"p"元素.因为它们的“class”属性值都是"高亮显示"
id选择器
依据“元素”的“id”属性来编写“选择器”
书写形式
#id值{}
解释井号#后面跟着某个元素的“id”值
例如:#文章标题{},表示{}中的“样式”的将会作用于“id”取值为"文章标题"的元素
举例


解释:“样式”会作用于第二个"p"元素.因为它的“id”属性值是"文章标题"
“标签选择器”和“类选择器”可以结合使用,形式如下
标签名.class值{}
例如:p.高亮显示{},表示{}中的“样式”的将会作用于“标签名”为"p"并且“class”属性值为"高亮显示"的元素
举例


解释:“样式”只会作用于第二个"p"元素.因为它的“标签名”为"p"并且“class”属性值为"高亮显示"
组合选择器
前面列出的“标签选择器”,“类选择器”,“id选择器”在书写时,只涉及到一个元素,也就是“目标元素”,这几个“选择器”可以被称为"基本选择器".
而“组合选择器”在书写时,涉及到多个"基本选择器"
并列选择器
书写形式
a,b{}
a和b都是"基本选择器",两者用逗号,分开,表明两者是并列关系，它们使用同一个样式
例如:a,.高亮显示{},表示{}中的“样式”的将会作用于“标签名”为"a"或者“class”属性值为"高亮显示"的元素
举例


后代选择器
书写形式
a b{}
a和b之间用至少一个空格分开，a选择器代表“目标元素”的“祖先元素”,b选择器指的是“目标元素”本身.
对于这种选择器，可以粗略的理解为{}中的“样式”的将会作用于a元素中的b元素
例如:p .高亮显示{},表示{}中的“样式”的将会作用于“祖先元素”为"p元素",而自身的“class”属性值为"高亮显示"的元素.也可以说,{}中的“样式”的将会作用于“class”属性值为"高亮显示",并且祖先元素为"p元素"的那些元素
举例


解释:“样式”会作用于"p"元素中的第一个"a"元素,也会作用于"span"元素中的"a"元素.因为这两个元素的“祖先元素”为"p元素",并且它们自身的“class”属性值是"高亮显示"