css伪类总结—《CSS选择世界》读书笔记二

后续6章节都是关于伪类的，另开一篇记录。

1、用户行为伪类

（1）:hover，手型经过伪类，只适用于PC端，移动端不适用。当:hover效果出现遮挡、:hover元素和显示元素之间有间隔导致用户体验不佳时，可以使用visibility实现元素隐藏显示。具体使用如下：

img { visibility:hidden;transition:visibility .2s;} a:hover img, img:hover { visibility: visible;}

（2）:hover优化无鼠标访问（比如触屏设备、智能电视）需要添加:foucs或者:foucus-within的相同css内容来优化体验，或者在实现:hover效果时，保证点击事件也能触发相同的效果。

（3）:active支持任意html元素，点击按下触发状态，点击抬起取消状态。在IE浏览器中有actie样式无法冒泡、html/body元素设置之后无法还原，在safari移动端下，:active默认无效，需要设置任意的touch事件才能支持，还可以用-webkit-tap-highlight-color来实现触摸高亮反馈。

 （4）:active可以实现css数据上报，比如记录按钮点击频率，用::active::before { content:url('./XXX地址'),display:none}

（5）:focus匹配当前处于聚焦状态的元素，默认只能匹配特点的元素：表单元素、包含href的a元素、area、summary、设置了contenteditable属性的普通元素、设置了tabindex的普通元素。使用div/span实现按钮效果会导致键盘无障碍访问、屏幕阅读器无法识别，也无法提交表单,因此可以使用 label+input来模拟或者尽量使用button来实现

（6）:focus-within:不兼容IE，移动端支持。当前元素或者任意子元素处于聚焦状态的时候会匹配

（7）:foucs-visible:元素聚焦，同时浏览器认为聚焦轮廓应该显示。用于点击鼠标的时候outline不出现，键盘访问的时候需要显示。:focus:not(:focus-visible)

 

2、URL定位伪类

（1）:link匹配页面上href链接没有访问过的a元素，使用:link,一般和:visited一起使用,比起直接使用a标签来改变设置样式, :link只能匹配有href属性的a标签，即可以识别真链接，直接使用[href]实现更佳。

（2）love-hate：:link :visited :hover :active

（3）:visited只支持部分css，如color,bgcolor等，伪元素不支持，bg不支持rgba,同时visited中的属性只能重置，不能凭空设置

（4）:any-link匹配所有设置href的链接元素(a\link\area)，匹配所有匹配:link或者:visited伪类的元素（IE不支持）

（5）:target ie9+ ，url锚点可以和页面中id匹配的元素进行锚定，浏览器默认触发滚动定位，同时进行:target伪类匹配。实际应用：展开收起、选项卡切换

 

3、输入伪类

（1）:disabled伪类，可以设置禁用状态下的输入框样式

（2）:enabled 对于常见的表单元素，选中的元素和上一个伪类选中的相反。元素设置visibility：hidden和display: none都可以匹配(1)\(2)这两个伪类

（3）:read-only 只读属性  :read-write 可读可写  这两个伪类只作用于input和textarea两个元素，且IE浏览器不支持

（4) :placeholder-shown 占位符显示伪类，表示当输入框placeholder显示的时候，IE浏览器不支持，实际应用a、material-design, .input:not(:placeholder-shown) 匹配placehodler不显示的时候；b、匹配空值

（5）:default 作用于表单元素，让用户在选择一组数据时，依然知道默认选项是什么，比如select multiple的selected、radio的checked,IE浏览器不支持，js的快速修改对:default渲染无影响，实际应用：推荐标记

（6）:checked只匹配标准表单控制元素， 而[checked]属性选择会选中其他元素，同时checked属性的变化并非实时的(js设置checked属性后，dom中不会立即添加checked属性，页面已经正确渲染)，伪类还可以正确的匹配从祖先元素那里继承过来的状态

（7）:indeterminate 半选中状态  只能通过js设置半选状态 checkbox.indeterminate = true ，几个相同name的单选radio没有被选中时，也会匹配这个伪类，因此可以用来提示还未选中内容。progress元素在没有设置值的时候也能匹配

（8）:valid :invalid :in-range :out-of-range :required :optional 都是输入值验证伪类

 

4、树结构伪类（IE9+）

（1）:root 文档根元素，:root伪类优先级比html高，:root指所有xml格式的文档根元素，xhtml只是其中一种。实际应用：a、滚动条出现页面不跳动，直接把body设置成100vw, 超出隐藏，100vw包含滚动条宽度，100%不包含滚动条。用calc(100vw-100%)就是滚动条的宽度，没看懂这个应用的优点，仅仅因为:root可以区分IE8和IE9+？；b、css变量都写进:root中，html选择器负责样式，约定俗成， :root{ --blue: #2486ff;}

（2）:empty 匹配空标签元素，元素中有注释、空格、或者换行了都无法匹配:empty。实际应用：a、隐藏空元素，元素没有内容时，防止margin等样式依旧生效,.cs-module:empty {display:none}；b、字段缺失智能提示，比如没有内容时提示暂无或者'--'，:empty::before，同时可以使用一个class来维护整站的空内容提示

（3）:first-child(IE7+) :last-child(IE9+):  实际应用 li{margin-top:20px} li:first-child{margin-top:0;}  可以优化成 li:not(:first-child) {margin-top:20px;}

（4）:only-child匹配没有任何兄弟元素的元素，匹配时会忽略文本节点，实际应用：loading text+img/text/img

（5）:nth-child() :nth-last-child(): 里面可以放具体的数字、add（奇数）、even（偶数）、An+B ，实际应用：a、斑马线条纹；b、列表边缘对齐(item固宽)；c、固定区域的列表高亮:nth-child(-n+3) 前3个元素, :nth-child(n+4):nth-child(-n+10) 第4-10个元素；d、动态列表匹配: :first-child:nth-last-child(2) 有2个item  :first-child:nth-last-child(3) 3个item 同时加上相邻兄弟选择符兄弟选择符

（6）:first-of-type :last-of-type 匹配类型子索引伪类在同级列表中相同标签元素之间进行

（7）:only-of-type 匹配唯一标签

（8）:nth-of-type :nth-last-of-type 匹配范围为所有相同标签的相邻元素 :nth-child匹配所有相邻的元素

 

5、逻辑组合伪类&其他

（1）:not() ：优先级是0，由括号内的选择符决定优先级，:not(p):not(div)，实际应用：优化重置

（2）:is()可以把括号中的选择器依次分配出去，选择器优先级由参数里面优先级最高的决定， :is(.p，section) p  优先级等同于.p p，可以用于简化选择器

（3）:where() 伪类用法同上，但是优先级永远是0

（4）:host，:host() shadow树根元素伪类  :host([data-radius])   :host-context()  根据host元素所在的上下文来选择元素

（5）:fullscreen(:full-screen) 移动端匹配全屏元素 设置全屏状态下的元素状态  document.requestFullScreen 让元素全屏 cancleFullScreen取消全屏  :fullscreen .cs-img{}  ， ::backdrop匹配浏览器默认的黑色全屏背景元素

（6）:lang() 匹配语言 匹配html中的lang属性

 

其他延申或零碎知识点

visibility隐藏元素：不会改变dom结构,保存原有位置，不会触发任何事件

opacity隐藏元素：不会改变dom结构，保存原有位置，可以触发事件，可以被键盘聚焦等

display隐藏元素:会改变dom结构,原位置没有元素，不可能触发事件

普通元素设置tableIndex属性只能设置 0 (可以被tab键索引且被点击时触发foucs伪类样式)、-1（不能被tab索引但是可以在被点击时触发foucs）、1（？）

设置了pointer-events:none的元素无法显示title

设置了readonly的输入框不能输入内容，但是可以被表单提交，设置disabled不能输入且不能被表单提交

filedset元素上设置表单状态后，其条内部的表单元素会继承其状态

css属性counter-reset可以用来计数

父元素display:table  子元素display:table-caption;caption-side:top；可以修改caption的位置

xml文档格式:可扩展标记语言，

 

区分IE8和IE9：

(1) /*IE8*/.cs-exmaple{} /*IE9*/ .any-class:enabled .cs-exmaple

(2)/*IE8*/.cs-exmaple  /*IE9*/ :root .cs-exmaple