type
status
date
slug
summary
tags
category
icon
password
Property
Mar 31, 2024 04:11 PM
引用
分享总结一下现有的伪类和简单的 demo 源地址：MDN
伪类
:active
匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。
展开查看
鼠标按下就变为红色
:only-child
匹配没有任何兄弟元素的元素。
等效的选择器还可以写成:first-child:last-child 或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点.
展开查看
<div class="haha">
直接的文本也不影响选择
<i>没有兄弟元素,</i>
</div>
<div>
<i>有兄弟</i><br>
<b>有兄弟</b><br>
<span>有兄弟 <span>没兄弟</span></span>
</div>:any-link
选择器代表一个有链接锚点的元素，而不管它是否被访问过，也就是说，它会匹配每一个有href属性的
<a>、<area> 或 <link> 元素。因此，它会匹配到所有的 :link 或 :visited。展开查看
href为空字符串
href为#的div
没有 href
:only-of-type
代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。(子元素中唯一的标签)
展开查看
<div>I am `div` #1.</div>
<p>I am the only `p` among my siblings.</p>
<div>I am `div` #2.</div>
<div>I am `div` #3.
<i>I am the only `i` child.</i>
<em>I am `em` #1.</em>
<b>I am `b` #2.</b>
</div>:blank 火狐验证
没有子节点；仅有空的文本节点；仅有空白符的文本节点。
展开查看
This paragraph is not empty or blank.
This paragraph is not empty or blank.
:empty
代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。
展开查看
<div class="box"><!-- I will be lime --></div>
<div class="box">I will be pink</div>
<div class="box">
<!-- I will be red because of the whitespace around this comment -->
</div>:optional
任意没有 required 属性的
<input>，<select> 或 <textarea> 元素使用它。展开查看
:checked
选择器表示任何处于选中状态的 radio(
<input type="radio">), checkbox (<input type="checkbox">) 或(“select”) 元素中的 option HTML 元素(“option”)展开查看
Yes
No
:hover
光标（鼠标指针）悬停在元素上时提供关联的样式,按照 LVHA 的循顺序声明:link－:visited－:hover－:active。
展开查看
hover
:out-of-range 和:in-range
- out-of-range:表示一个
<input>元素，其当前值处于属性 min 和 max 限定的范围外
- in-range：表一个
<input>元素，其当前值处于属性 min 和 max 限定的范围之内
展开查看
<form action="" id="form1">
<ul>Values between 1 and 10 are valid.
<li>
<input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
<label for="value1">Your value is </label>
</li>
</ul>
</form>:indeterminate
表示状态不确定的表单元素。
展开查看
<input type="checkbox" id="checkbox">
<label for="checkbox">Background should be green</label></br>
<input type="radio" id="radio">
<label for="radio">Background should be green</label>:default
选择设置默认值的元素，该选择器可以在
<button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用。展开查看
<input type="radio" name="season" id="spring" >
<label for="spring">1</label>
<input type="radio" name="season" id="summer" checked>
<label for="summer">2</label>:placeholder-shown
在 placeholader 显示的时候被选择
展开查看
<input placeholder="Type something here!">
</br>
空placeholder<input placeholder="" >
</br>
无placeholder<input>:invalid
表示任意内容未通过验证的
<input> 或其他 <form> 元素展开查看
<form>
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input" />
<br />
<br />
<label for="email_input">Enter an email address:</label>
<input type="email" id="email_input" required/>
</form>:read-only
选择只读的元素
展开查看
<input type="text" value="This is a read-only field." readonly>
<p>不可以编辑的都可以被选中</p>
<p contenteditable="true">可以编辑的p标签就不行</p>
<div class="div">div也一样</div>:read-write
选择可以被用户编辑的元素
展开查看
<input type="text" value="This is a read-only field." >
<p contenteditable="true">可以编辑的p标签也行</p>
<p>不可以编辑的不可以被选中</p>:disabled
选择禁用的元素(表单元素)。
展开查看
<input type="text" value="我被禁用了，尴尬" disabled >
<div disabled >禁用的div</div>:enabled
表示任何被启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的。
展开查看
<input type="text" value="我可以输入，尴尬" >
<div >禁用的div</div>:lang()
基于元素语言来匹配页面元素。
展开查看
<div lang="en"><q>英语语言</q></div>
<div lang="fr"><q>法语语言</div>:not()
用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
展开查看
<p>我是一个段落。</p>
<p class="fancy">我好看极了！</p>
<div>我「不是」一个段落。</div>:focus
:focus 表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
展开查看
:focus-within
表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。（shadow DOM 树中的后代也包括在内）
子元素获得焦点，父元素改变样式
展开查看
:fullscreen
应用于当前处于全屏显示模式的元素。
展开查看
全屏
内容
结语
以上就是本次的全部分享内容，合理的利用伪类可以比较巧妙的实现一些特殊效果。但是部分伪类还是涉及到浏览器的兼容问题，或者还在草案之中，具体的兼容性可以为Can I Use查看
- 作者:Kitety
- 链接:https://www.kitety.com/article/css-pseudoclass-collection-sharing
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
