css选择器有哪些，css选择器怎么用
CSS选择器又被称为CSS样式属性、CSS属性选择器，CSS中的“选择器”指明了 “{}” 中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素；常用选择器可分为标签名选择器、类选择器、id选择器、派生选择器、子元素选择器、分组选择器。下面我们就来看看各种选择器的用法。
一、常用的四类选择器（4种）
1、元素选择器
作用：通过标签的名称找到指定标签
语法：标签名{}
实例：<div>标签文字颜色为 red。
div{ color: red;}
2、id选择器
作用：通过id找到标签，一个html文件中id不能重复
语法：#id{}
实例：id为test的元素文字颜色为red
<div id="test"></div>________________________#test{ color: red;}
3、类选择器
作用：通过标签的class属性值选中指定标签,多个标签可以有相同的class值
语法：.class属性值{}
实例：类名为test的元素文字颜色为red。
<div class="test"></div>______________________.test{ color: red;}
4、通配选择器
作用：选中页面中所有元素
语法：*{}
实例：页面中所有元素的背景颜色为blue
*{ background: blue;}
二、复合选择器（2种）
1、交集选择器
作用：选中同时符合多个选择器条件的元素
语法：选择器1选择器2...{}
注意：只能交两个，第一个是元素选择器，第二个是class/id。两者之间无空格
实例：1.类名为red 的<div>元素文字颜色改为red；2.id为blue的<div>元素文字颜色为blue
<div class="red">111</div><div id="red">222</div><p class="red">333</p><div id="blue">444</div>————————————————————div.red { color: red;}div#blue { color: blue;}
2、并集选择器
作用：同时选中对应选择器的元素，可以并集多个，各个之间用，隔开。
语法：选择器1，选择器2，选择器3...{}
实例：类名为 red，类名为 yellow， id为blue，li元素里的字体颜色为orange。
<div class="red">111</div><div class="yellow">222</div><i id="blue">444</i><li>555</li>————————————————.red,.yellow,#blue,li { color: orange; }
三、关系选择器（3种）
1、后代选择器
作用：类似于路径，找到符合要求的标签，会匹配所有的后代标签。
语法：.father .grandson{}，每个选择器之间用空格隔开。
注意：有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。例如，如果写作.father .grandson{}，这个语法就会选择.father下的.grandson，而不论.grandson 的嵌套层次多深。
实例：在类名为father的元素中找到类名为grandson的元素，字体颜色改为red。
<div class="father"> <div class="children"> <div class="grandson"></div> <div></div>————————————————.father .children{ background-color: red;}
本文地址：IT问答频道 https://www.hkm168.com/itwenda/930903.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
