怎么使用css选择器

css选择器一般可分为：全局作用类、标签选择器、id选择器、类选择器、层级选择器、组选择器、伪类选择器与伪元素

全局作用类范围最广，但开发过程基本不使用

标签选择器，范围较大，针对所有类型标签可以更改样式

id选择器仅针对id属性生效，又因为id一般不可重复，所以作用的样式很少，一般也很少使用

类选择器使用广泛，可以定义多个，针对不同的类属性

层级选择器在开发中使用广泛，也是用的最多的选择器，但是层级最好不超过四层，否则性能会下降

组选择器，可以将同类的公有样式写在一起，不同处单独写类样式，简化代码复杂度，增加可读性

伪类选择器作用于标签页a上，大多用于鼠标悬停标签时能够改变样式显示

伪元素可以在元素的前后增加字段，且字段不可被选中

<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>css选择器</title><style>/*css选择器介绍*/*{/*此样式影响所有的标签*/}div{/*标签选择器，影响范围较大，影响所有的div标签*//*font-size:20px;*//*color:green;*/}#div1{font-size: 70px;/*根据id为div1去使用该样式，下面的样式会覆盖上面的样式*/color:#FF00FF;}.green{color:green;/*类选择器*/}.big{font-size: 40px;/*类选择器*/}.box{font-size: 25px;line-height: 30px;text-indent: 40px;}.box span{/*层级选择器*/color:red;font-weight: bold;}.box .hello span{/*层级选择器最好不超过4个*/color:#98FB98;font-size: 50;}.box01,.box02,.box03{/*组选择器，共同部分放在此处*/font-size: 20px;text-indent: 40px;}.box01{/*组选择器不同部分单独写*/color: #BA55D3;}.box02{color: #D2691E;}.box03{color: #FF0000;}.link{/*针对a标签进行伪类*/font-size: 50px;text-decoration: none;color:#4B0082;}.link:hover{/*伪类选择器，鼠标悬停变色加粗倾斜*/color:#7FFF00;font-weight: bold;font-style: italic;}.box04,.box05{font-size: 20px;color:pink;}.box04:before{content: \"在前面加文字:  \"}.box05:after{content: \":  在后面加文字\"}</style></head><body><!-- css颜色值主要有三种表示方法：1. 颜色名表示，比如：red红色，gold金色2. RGB表示法，比如color:rgb(255,0,0)3. 16进制数值表示，比如：#ff0000表示红色，这种可以简写成#f00--><div style=\"font-size:50px;color:#f00;\"> <!-- 单标签设定的样式会对主style中的样式修改，即以单标签的为主 -->这是第一个演示的div</div><div id=\"div1\">这是第二个div标签</div><div class=\"big\">这是第三个div标签</div><div class=\"green\">这是第四个div标签</div><div class=\"big green\">这是第五个div标签</div><br><br><br><div class=\"box\"><span>hahah</span>自1990年以来，HTML就一直被用作WWW的信息表示语言，<span>使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。</span>事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。</div><br><br><div class=\"box\"><div class=\"hello\"><span>HTML、CSS、JavaScript这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。</span></div></div><p><div class=\"box01\">num1</div><div class=\"box02\">num2</div><div class=\"box03\">num3</div></p><p><a href=\"CSS/\" class=\"link\">CSDN主页</a></p><br><div class=\"box04\">第一个伪元素</div><div class=\"box05\">第二个伪元素</div></body></html>