今天小编跟大家讲解下有关css 选择器 介绍 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css 选择器 介绍 的相关资料，希望小伙伴们看了有所帮助。
“选择器”是什么 每一条css样式定义由两部分组成 形式如下： 复制代码代码如下: 选择器{样式} 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象 也就是“样式”作用于网页中的哪些元素。 由此可见 “选择器”的功能是从“网页所有的元素”当中选择“部分元素” 因此我们把它称为“选择器”。 “选择器”的种类 前面讲了 “选择器”的功能是指明“样式”作用的“目标元素”。 那如何才能指明这些“目标元素”呢。 我们知道,一个“元素”有“标签名”,“class”,“id”这几个常见属性,那么就可以从这几个属性出发来确定“目标元素”.由此也就诞生了几个最常用的“选择器”--标签选择器,类选择器,id选择器 常用的“选择器” 标签选择器 使用“元素”的“标签名”作为“选择器” 书写形式： 复制代码代码如下: 标签名{} 例如:p{},表示{}中的“样式”的将会作用于“标签名”为"p"的元素 类选择器 依据“元素”的“class”属性来编写“选择器” 书写形式： 复制代码代码如下: .class值{} 解释：点号.后面跟着某些元素的“class”值 例如:.高亮显示{},表示{}中的“样式”的将会作用于“class”取值为"高亮显示"的元素 举例： 复制代码代码如下: <style> .高亮显示{color:red;} </style> <a class="高亮显示">a1</a> <a>a2</a> <p>p1</p> <p class="高亮显示">p2</p> 解释:“样式”会作用于第一个"a"元素和第二个"p"元素.因为它们的“class”属性值都是"高亮显示" id选择器 依据“元素”的“id”属性来编写“选择器” 书写形式： #id值{} 解释：井号#后面跟着某个元素的“id”值 例如:#文章标题{},表示{}中的“样式”的将会作用于“id”取值为"文章标题"的元素 举例： 复制代码代码如下: <style> #文章标题{color:red;} </style> <p>p1</p> <p id="文章标题">p2</p> <p>p3</p> 解释:“样式”会作用于第二个"p"元素.因为它的“id”属性值是"文章标题" “标签选择器”和“类选择器”可以结合使用,形式如下： 标签名.class值{} 例如:p.高亮显示{},表示{}中的“样式”的将会作用于“标签名”为"p"并且“class”属性值为"高亮显示"的元素 举例： 复制代码代码如下: <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”属性值是"高亮显示"
来源：爱蒂网
