css3

来源：互联网发布：python recv 字符串编辑：程序博客网时间：2024/06/09 15:50

特征：指定的样式只有在某种状态下才起作用
共11种分别为：E:hover、E:active、E:focus、E:enable、E:disable、E:read-only、E:read-write、E:checked、E:default、E:indeterminate、E:selection

各UI元素状态伪类选择器受浏览器的支持情况

选择器 Firefox Safari Opera IE8 Chrome E:hover √ √ √ √ √ E:active √ √ √ x √ E:focus √ √ √ √ √ E:enable √ √ √ x √ E:disable √ √ √ x √ E:read-only √ x √ x x E:read-write √ x √ x x E:checked √ √ √ x √ E:default √ x x x x E:indeterminate √ √ x √ √ E:selection √ √ √ x √

1. E:hover、E:active、E:focus

下图分别为：鼠标经过、鼠标点击（但未松开）、鼠标获得焦点（点击松开）

这里写图片描述

html：

<p><label for="txt">姓名：</label><input type="text" id="txt"></p><p><label for="address">地址：</label><input type="text" id="address"></p>

css：

<style>    input[type="text"]:hover { /*鼠标经过（悬停）*/      background-color: pink;    }          input[type="text"]:focus { /*鼠标获得焦点（点击）并进行文字输入时*/      background-color: #ccc;    }    input[type="text"]:active { /*鼠标按下（按下还未松开）*/      background-color: yellow;    }</style>

解析：顺序不要写反，否则失效；:hover、:focus、:active

2.E:enable、E:disable

点击可用按钮时，文本框背景色为pink；点击不可用按钮时，文本框背景色为灰色；如图：

这里写图片描述

html：

<label for="radio1">可用</label><input type="radio" name="radio" id="radio1" onchange="radio_onchange()"><label for="radio2">不可用</label><input type="radio" name="radio" id="radio2" onchange="radio_onchange()"><br><input type="text" id="txt">

css：

input[type="text"]:enabled {    background-color: pink;}input[type="text"]:disabled {    background-color: #ccc;}

js：

<script>    function radio_onchange(){      var radio = document.getElementById('radio1');//获得可用单选按钮的id      var txt = document.getElementById('txt');//获得文本框id      if(radio.checked){        txt.disabled = "";//选中时文本框为可用      }else{        txt.disabled = "disabled";//否则文本框为不可用      }    }</script>

3.E:checked、E:default、E:indeterminate

E:checked是用来制指定当表单中的radio单选框、checkbox复选框处于选取状态时的样式。

复选框选中时的样式如下：

这里写图片描述

html：

<label for="apple">苹果</label><input type="checkbox" id="apple"><label for="banana">香蕉</label><input type="checkbox" id="banana"><label for="chengzi">橙子</label><input type="checkbox" id="chengzi"><label for="boluo">菠萝</label><input type="checkbox" id="boluo">

css：

<style>   input[type="checkbox"]:checked {     outline: 2px solid red;   }   input[type="checkbox"]:-moz-checked { /*兼容火狐浏览器*/     outline: 2px solid red;   }</style>

E:default选择器Chrome不支持、只有火狐支持

E:indeterminate选择器只有Opera支持

4.E:selection伪类选择器用来指定当元素处于选中状态时的样式

这里写图片描述

html：

<body>  <input type="text" value="这是一个测试表单">  <p>这是一段测试文字</p>  <table border="1" cellpading="0" cellspacing="0">    <tr>      <td>单元格A</td>      <td>单元格B</td>      <td>单元格C</td>    </tr>    <tr>      <td>单元格D</td>      <td>单元格E</td>      <td>单元格F</td>    </tr>  </table></body>

css：

<style>    input[type="text"]::selection { /*IE8不兼容*/      color: red;      background-color: #ccc;    }    p::selection {      background-color: pink;      color: red;    }    p::-moz-selection { /*兼容火狐浏览器*/      background-color: pink;      color: red;    }    td::selection {      background-color: pink;      color: red;    }</style>

0 0