css3 - UI元素状态伪类选择器

最新推荐文章于 2023-04-25 22:33:18 发布

erdouzhang

最新推荐文章于 2023-04-25 22:33:18 发布

阅读量4.2k

点赞数 1

分类专栏： css3

本文链接：https://blog.csdn.net/erdouzhang/article/details/70846721

版权

css3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

特征：指定的样式只有在某种状态下才起作用
共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>

erdouzhang

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
css3 - UI元素状态伪类选择器

特征：指定的样式只有在某种状态下才起作用共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
复制链接

扫一扫

专栏目录