伪类的功能和一般的DOM中的元素样式相似，但和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。
文/小伊评科技
作为一个半资深的前端工程师，你这个问题问的非常的没有道理，这个问题就好比是在问：男人那么能干，为什么不能取代女人呢？因为CSS和Javascript完全是两个不同的概念，其工作职责也是不同的，CSS控制的样式表，是偏向静态表现得，他的核心功能最强大的功能其实就是定义样式，虽然目前CSS3加入了很多动画效果，比如配合transtion/transform以及animation可以制作很多简单甚至相当复杂的动画效果，但是说白了也只是静态展示，想要做成动态的人机交互效果，还是需要Javascript所提供的各种交互事件来配合完成，CSS+HTML所能提供得交互方式太过于单薄。
而且Javascript是一个实打实的编程语言，他的作用可不仅限于操作DOM元素这么简单，他还是沟通前台和后台得一个重要沟通工具，没有JS你的页面就只是一个静态页面罢了。笔者举一个最简单的例子，如果你需要页面中某一个方面要引用后台的数据，那么用CSS怎么实现？根本无法实现，所以这个时候就需要用到AJAX技术了，而一旦用到AJAX技术，就必须要使用到Javascript。
只会html+CSS的前端人员充其量只能算是一个网页设计师罢了
HTML+CSS所能做出来的只不过是静态的页面，并不具备可交互性，也基本上无法满足商用的要求。所以对于一个前端工程师来说JS才是重中之重。目前主流的三大框架React、Vue、Angular也都是基于Javascript深度开发的产物。只会HTML+CSS的前端工程师目前已经基本被淘汰了，或者说没有特别的用武之地。因为大部分UI设计师对于Html+CSS的掌握都非常优秀，配置静态页面不成问题而如果想要成为更进一步的前端工程师，甚至前端高级工程师，Javascript是必须要熟练掌握的，在掌握了Javascript之后再去学习三大框架，学习AJAX，学习
Node.Js
等才会更加的游刃有余。end 希望可以帮到你
BCDB 比如class类型 class = “nav”的话 那么CSS对应 .nav{}C 比如 body input 就是直接对应 body{} input{}D ID选择器 id=”name” 那么css对应 #name{}
基本选择器
1.标签选择器：直接用元素的标签来进行选择
span { // 直接选择span标签
size:16px;
}
1
2
3
1
2
3
2.ID选择器：通过设置id名字，进行精确的选择，用#来定义
# div1 { //通过id名字来进行选择
color:red;
}
<div>1</div>
1
2
3
4
1
2
3
4
3.类选择器:通过类名来进行选择，选择范围比id选择器大，用’.来定义
.div1 { //所有类名为div1的都被选择了
color:red;
}
<div>1</div>
<div>1</div>
<div>1</div>
1
2
3
4
5
6
1
2
3
4
5
6
4.通配符选择器：范围更大，作用于所有标签，用*来定义
不建议使用，对页面加载负担大
高级选择器
1.后代选择器：定义用空格隔开
div span { //选择的是div标签下的span标签，当然后代顾名思义可以不止隔一代，可以隔多代进行选择
color：red；
}
<div><span>1</span></div>
1
2
3
4
1
2
3
4
2.交集选择器：与后代选择器定义的不同是，没有空格隔开，两个元素紧挨着
span#a1 { //选择的是两个条件1.既是span标签的 2.id名是a1的元素，两个条件缺一不可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
3.并集选择器：定义用逗号隔开
span，#a1 { //选择的是1.是span标签的 2.id名是a1的元素，两个条件满足一个即可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
4.伪类选择器：
1.静态伪类：点击连接之前（link），点击连接之后(visited)这样的
2.动态伪类：鼠标移入（hover），点击之后（focus）
![《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]](https://200zi.50zi.cn/uploadfile/img/14/729/8b33157b99f92353f9810a20d7710f60.jpg)
