[快速入门前端 15] CSS 选择器 (5) Pseudo-Classes 伪类 - UI状态伪类、否定伪类、目标伪类

UI 元素状态伪类

是指依照该元素目前的状态(如是否勾选、是否被禁用)作为选择器进行选择，主要分为三种 :checked、:disabled 及 ':enabled'，大部分使用在描述 input 或 select 元素的状态。checked 会选择为勾选状态的单多选框；disabled 是指所以处于禁用状态的元素；而 enabled 则相反，会选择可用状态的元素。

语法：

元素:checked{    属性名: 属性值;}元素:disabled{    属性名: 属性值;}元素:enabled{    属性名: 属性值;}

範例

input:checked { /* 处于勾选状态的 input 元素 */    width: 50px;    height: 50px;}input:disabled { /* 禁用状态的 input 元素 */    background-color: black;}input:enabled { /* 非禁用状态的 input 元素 */    background-color: yellow;}

<input type="checkbox" checked> <!-- 预设打勾 --><input type="checkbox"><input type="text" disabled> <!-- 预设禁用 --><input type="text">

否定伪类

:not 是 CSS 中的否定伪类选择器，可以将基本选择器做为参数放在括号中进行否定选择，语法为 :not(基本选择器)，会选择除了符合 not 参数中选择器之外的元素。

语法：

:not(基本选择器) {    属性名: 属性值;}

範例：(所有及格的人显示绿色)

div>p:not(.fail) { /* 选择 div 中 class 不为 fail 的所有 p 元素 */    color: green;}

<h3>谁及格了？</h3><div>    <p class="pass">王大明 60</p>    <p class="fail">王小明 50</p>    <p class="excellent">王小明 90</p></div>

目标伪类

「目标」，是指锚点所指向的元素。当我们使用 <a> 标籤的 href 将页面跳至某元素中时，会发现 URL 后面多了一个 # 符号(如下图)，这个 # 符号称为锚点，通常指向页面内某个元素，而这个元素就被称为目标元素 (target element)，而 :target 选择器就是用来选取这个目标元素。

语法：

元素:target {    属性名: 属性值;}

範例

div { /* div 预设样式 */    height: 100px;    background-color: rgb(189, 234, 251);}div:target { /* 选择为当前目标的 div */    background-color: rgb(28, 152, 200);}

<a href="#one">跳到第一</a><a href="#two">跳到第二</a><a href="#three">跳到第三</a><div id="one">    我是第一个部分</div><br/><div id="two">    我是第二个部分</div><br/><div id="three">    我是第三个部分</div><br/>

语言伪类

:lang 搭配元素的 lang 属性值做选择，通常用于不同语言元素的样式控制。
语法：

元素:lang(语言) {    属性名: 属性值;}

範例

div:lang(en) { /* 选择 lang 值为 en 的 div*/    backgrounc-color: red;}

<div lang="en">i'm english</div><div>我是中文的</div>

上一篇：[快速入门前端 14] CSS 选择器 (4) Pseudo-Classes 伪类 - 结构伪类
下一篇：[快速入门前端 16] CSS 选择器 (5) 伪元素选择器
系列文章列表：[快速入门前端] 系列文章索引列表