CSS3选择器详解二

来源：互联网发布：桶装水管理软件编辑：程序博客网时间：2024/05/29 18:05

伪类(基于某些共同特征选择元素提供方便)

选择器

1 :root根选择器

<style type="text/css">    :root {        border: thin black solid;        padding: 4px;    }</style>

2 :first-child :last-child :only-child :only-of-type

案例1：    <style type="text/css">    :first-child {        border: thin black solid;        padding: 4px;    }</style>案例2：<style type="text/css">    p > span:first-child {        border: thin black solid;        padding: 4px;    }</style>案例3：<style type="text/css">    :last-child {        border: thin black solid;        padding: 4px;    }</style>案例4：<style type="text/css">    :only-child {        border: thin black solid;        padding: 4px;    }</style>案例5：<style type="text/css">    :only-of-type {        border: thin black solid;        padding: 4px;    }</style>

3 :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) n从1开始

<style type="text/css">    body > :nth-child(2) {        border: thin solid black;        padding: 4px;    }</style>

4 UI伪类选择器
:enabled
:disabled
:checked
:default
:valid(valid input)
:invalid(invalid input)
:in-range
:out-of-range
:required(匹配有required input)
:optional(匹配有optional input)

案例1：<style type="text/css">    :enabled {        border: thin black solid;        padding: 4px;    }</style>案例2：<style type="text/css">    :checked + span {        background-color: red;        color: white;        padding: 4px;        border: medium black solid;    }</style>案例3：<style type="text/css">    :default {        outline: medium solid black;    }</style>案例4：<style type="text/css">    input:invalid {        outline: medium solid red;    }    input:valid {        outline: medium solid green;    }</style>案例5：<style type="text/css">    #name:invalid {        outline: medium solid red;    }    #name:valid {        outline: medium solid green;    }</style>案例6：<style type="text/css">    :in-range {        outline: medium solid green;    }    :out-of-range {        outline: medium solid red;    }</style>案例7：<style type="text/css">    :required {        outline: medium solid red;    }    :optional {        outline: medium solid green;    }</style>

5 动态伪类选择器
:link
:visited
:hover
:active
:focus

案例1：<style type="text/css">    a:link {        border: thin black solid;        background-color: lightgrey;        color: red;    }    a:visited {        background-color: yellow;        color: white;    }    a:hover {        background-color: aqua;        color: red;    }    a:active {        background-color: blue;        color: red;    }    :focus {        border: medium solid red;        padding: 4px;    }</style>

6 其他伪类选择器

否定选择器:(:not(<selector>))<style type="text/css">    a:not([href*="baidu"]) {        border: medium solid black;        padding: 4px;    }</style>:empty选择器:lang(en)  <style type="text/css">    :lang(en) {        border: thin black solid;        padding: 4px;    }</style>:target(可以为URL添加一个片段标识符),通过url#id访问显示<style type="text/css">    :target {        border: solid red medium;        padding: 4px;    }</style>

0 0