CSS学习笔记（四）：UI伪类选择器（下）

最新推荐文章于 2024-04-14 14:25:59 发布

Ui_none

最新推荐文章于 2024-04-14 14:25:59 发布

阅读量278

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/Ui_none/article/details/115625038

版权

UI伪类选择器

这次的笔记主要涉及到上次介绍的UI伪类选择器剩下的一些部分，剩下的UI伪类选择器有：

:valid
:invalid
:in-range
:out-of-range
:read-only
:read-write

这些UI伪类选择器都可以应用在input元素上。
首先来讲一下:valid和:invalid这两个UI伪类选择器。
:valid和:invalid分别设置当input元素的内容合法和非法的时候的样式。
比如：
（设置input类型为email）

<!-- 忽略部分内容 -->
    <style type="text/css">
      input:valid {
        border: 2px solid green;
      }
      input:invalid {
        border: 2px solid red;
      }
    </style>
</head>
<body>
  <form>
    <p>
      <label>邮箱：</label>
      <input type="email" placeholder="请输入邮箱：">
    </p>
    <button type="submit">提交</button>
  </form>
</body>

效果：

当输入不合法的邮箱地址时边框变红。

而当输入地址为合理的邮箱地址格式时边框变绿。

接下来介绍:in-range和:out-of-range。
:in-range和:out-of-range都是应用在类型为"number"的input元素上的。当输入的数字合法，应用:in-range设置的样式，当输入的数字不合法，应用:out-of-range设置的样式。
例子：

<!-- 忽略部分内容 -->
    <style type="text/css">
      input:in-range {
        border: 2px solid green;
      }
      input:out-of-range {
        border: 2px solid red;
      }
    </style>
</head>
<body>
  <form>
    <p>
      <label>数字：</label>
      <input type="number" min="0" max="99" value="50">
    </p>
    <button type="submit">提交</button>
  </form>
</body>

效果：

当数字在允许范围内的时候，输入框外加了一圈绿色的外边框。

当输入数字在允许范围外的时候，输入框外加了一圈红色的外边框。

最后来介绍:read-only和:read-write。
:read-only和:read-write分别应用在input元素的内容只读、可读可写的情况。
例子：

<!-- 忽略部分内容 -->
    <style type="text/css">
      input:read-only {
        background-color: red;
      }
      input:read-write{
        background-color: green;
      }
    </style>
</head>
<body>
  <form>
    <p>
      <label for="read-write">read-write：</label>
      <input type="text" name="read-write" id="read-write">
    </p>
    <p>
      <label for="read-only">read-only:</label>
      <input type="text" readonly name="read-only" id="read-only">
    </p>
  </form>
</body>