之前写了一篇 《详解 CSS 属性 - :before && :after》 的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @riophae 兄指正了我的错误，所以今天打算好好研究下两者的区别。 首先，阅读 w3c 对两者的定义： CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。 可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css ...
在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？ 首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id。 比如需要选择出input标签中具有value属性的内容，就可以按以下方式 // css input[value]{ ???color: #333; }// html <input type="text" value="请输入用户名">...
html5+css3，html不会再出第六版。css3是里面是分模块的，比如字体模块，盒子模块等等这些。每个模块都有各自不同的版本，所以css3是统一命名的，不用纠结。回顾 回顾一下网页的三个部分：结构（html）、表现（css）、行为（JavaScript）。 之前的h标签等等其他标签，样式都是浏览器默认的，改变样式就是css的工作内容。 只要是表现就应该用css来改变，而不是着重于标签的样式,因为标签的样式是浏览器默认的，html标签只关注语义。...
在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？ 首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id比如需要选择出input标签中具有value属性的内容，就可以按以下方式// css input[value]{color: #333; }// html <input type="text" value="请输入用户名"> <input ...
伪类伪类更多的定义的是状态，如:hover，或者说是一个可以使用CSS进行修饰的特定的特殊元素，如:first-child伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。虽然它和普通的 CSS 类相似，可以为已有的元素添加样式，但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 伪元素伪元...
用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用） 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏...