CSS 伪类合集分享 | Kitety别样

type

status

date

slug

summary

引用

分享总结一下现有的伪类和简单的 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为#

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.

: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

: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查看