css 选择器 介绍

2020-05-11 08:00:50易采站长站整理

举例:


<style>
p.高亮显示{color:red;}
</style>
<a class=”高亮显示”>a1</a>
<a>a2</a>
<p>p1</p>
<p class=”高亮显示”>p2</p>

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


<style>
a,.高亮显示{color:red;}
</style>
<a>a1</a>
<a>a2</a>
<p>p1</p>
<p class=”高亮显示”>p2</p>

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


<style>
p .高亮显示{color:red;}
</style>
<p>
<a class=”高亮显示”>a1</a>
<a>a2</a>
<span>
<a class=”高亮显示”>a3</a>
</span>
</p>
<div>
<a class=”高亮显示”>a1</a>
<a>a2</a>
</div>

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