前言以前学习和使用过link、::after、content等零星的伪类和伪元素选择器。决定再研究深一??点，下面是伪类部分的整理。伪类伪类选择器本质上是让设计者根据元素的具体状态设置不同的视觉效果。具体来说，:link,:visited,:hover,:active,:focus,:focus-within,:target,:root和:checked。HTMLAnchorElement的四个经典伪类：link，用于设置链接初始状态的样式；:visited，用于设置链接被点击后的样式；:hover，用于设置鼠标悬停在链接上时链接的样式；：active，用于设置鼠标按钮按下但未松开时的链接样式。想必大家都和我一样吧。最先接触的就是上面的四个伪类吧？！但也冻结并记住他们的设置顺序（LVAH），哈哈。为当前目标元素设置样式还记得URL中的井号吗？从井号（#）到URL的末尾称为URL的散列或片段，用于在页面中定位某个资源。假设现在页面上有一个Target元素，只要地址栏输入#title，浏览器就会一直滚动（滚动不一定有补间效果），直到elementh3#title位于视口的具体位置。（注意：请不要与UIRouting混淆）上述定位的页面资源称为目标元素或当前活动元素！它可以通过:target设置样式。兼容性：IE9支持。示例：//当前URL是http://foo.com#1:target{color:red;}.title{color:blue;&:target{border:solid1pxred;}}.title{I'mnottargetelement.}.title#1{Yes,I'm.}设置元素获得焦点时的样式：focus用于设置元素处于焦点状态时的样式。兼容性：IE8支持。那么哪些元素支持焦点状态呢？那么我们首先要弄清楚哪些操作可能会实现焦点。它们是：鼠标点击；制表键；通过JavaScript的HTMLElement.prototype.focus()方法。那么传统上支持焦点状态的元素肯定是a、button、input、select、textareas。在HTML5中，当元素设置了contenteditable或tabindex属性时，元素支持焦点状态。即匹配以下选择器的元素都支持焦点状态。a、button、input、select、textarea、[contenteditable]、[tabindex]注意：如果tabindex属性的值小于0，则无法通过Tab键获得焦点。但是元素可以通过鼠标点击或脚本获得焦点。JS获取当前获得焦点的元素/**加载完成时默认返回body*如果一个元素获得了焦点，则返回该元素*/document.activeElement::HTMLElement还有一个误导属性//用于检测文档是否被focused，即用户是否在与页面进行交互//当页面仅在屏幕可见区域，用户未与其进行交互时，返回false。document.hasFocus::Void->Boolean设置子元素获得焦点时元素的样式：focus-within，用于设置子元素处于焦点状态时元素的样式。兼容性：从Chrome63开始支持。例：第二次确认密码时，密码框高亮显示。form-control{&:focus-within>input{&:focus{border:solid1pxskyblue;}&:not(:focus){border:solid1pxorange;}}}.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]其他：root，用于设置元素的样式，从IE9开始支持。:checked，用于设置radio和check控件的checked样式，IE9支持。结合伪元素::before和content属性可以实现灵活高效的自定义radio和check控制。:empty，用于没有子元素的样式元素。div{}是带有TEXT_NODE子节点的元素，div{}是没有子节点的元素。:not，将否定的语义表达为谓词。:placeholder-shown，用于设置元素占位符显示时的样式。总结尊重原创，转载请注明出自：https://www.cnblogs.com/fsjoh...^_^胖约翰指的是https://css-tricks.com/almana...https://www。zhangxinxu.com/wo...
