CSS笔记（三）：UI伪类选择器

最新推荐文章于 2023-01-13 22:58:36 发布

Ui_none

最新推荐文章于 2023-01-13 22:58:36 发布

阅读量587

点赞数

文章标签： css html

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

版权

UI伪类选择器

那么这次就来做下关于UI伪类选择器的笔记。

图片引用自鱼C-小甲鱼的Web开发系列网课

既然名为UI伪类选择器，那么基本上就应用在带框、按钮、表单等可视、可交互的元素上。
首先来谈谈:enabled和:disabled这两个伪类选择器。
部分元素如输入框、密码框、复选框等都具有:enabled和:disabled这两种状态。通过设置这两种状态下的样式可以看到表单元素在这两种状态下的外观。
例子：

<!-- 照样忽略了html等标签 -->
    <style type="text/css">
      :enabled {
        outline: 1px solid green;
      }
      :disabled {
        outline: 1px solid red;
      }
    </style>
</head>
<body>
  <form>
    <p>
      <label for="enabled">可用：</label>
      <input type="text" name="enabled">
    </p>
    <p>
      <label for="disabled">禁用：</label>
      <input type="text" name="disabled" disabled>
    </p>
    <button>可用按钮</button>
    <button disabled>禁用按钮</button>
  </form>
</body>

效果：

如图所示，可用的元素在外边框上多了一条绿线，而禁用了的元素则在外边多了一条红线。

接下来介绍一下:checked伪类选择器。
:checked伪类选择器适用于单选框、复选框以及下拉列表。可以通过:checked伪类选择器设置当选项被选中之后的样式。

<!-- 依旧忽略html等标签 -->
    <style type="text/css">
      :checked+span {
        color: orange;
        background-color: grey;
      }
    </style>
</head>
<body>
  <form>
    <input type="radio" name="gender" value="male"><span>男人</span><br/>
    <input type="radio" name="gender" value="female"><span>女人</span><br/>
  </form>
</body>

效果如下：

需要注意的是，在:checked后面加上span是为了能修改到单选框后span元素的内容，这称为相邻兄弟选择器。

接下来讲一下:required选择器和:optional选择器，这两个选择器适用于必选和可选的元素。

当input元素设置了required的时候，说明这个内容是必填的，不填写则无法提交表单。默认情况下是optional，不填写也能提交表单。

例子：

<!-- 忽略部分内容 -->
    <style type="text/css">
      :required {
        outline: 1px solid red;
      }
      :optional {
        outline: 1px solid green;
      }
    </style>
</head>
<body>
  <form>
    <p>
      <label for="required">必选：</label>
      <input type="text" name="required" required>
    </p>
    <p>
      <label for="optional">可选：</label>
      <input type="text" name="optional">
    </p>
    <button type="submit">提交</button>
  </form>
</body>

效果：

接下来介绍一下:default伪类选择器。
:default伪类选择器可以选中所有默认元素，比如按钮就是一个默认元素。
稍微修改一下上面的代码：

<!-- 忽略部分代码 -->
    <style type="text/css">
      :default {
        outline: 3px solid red;
      }
    </style>

效果如下：

可以看到按钮被:default伪类选择器选中并在外围添加了一个红色的外边框。

好啦，这次的笔记就到这里啦。要好好熟悉各种选择器的使用及搭配。

Ui_none

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记（三）：UI伪类选择器

UI伪类选择器那么这次就来做下关于UI伪类选择器的笔记。图片引用自鱼C-小甲鱼的Web开发系列网课既然名为UI伪类选择器，那么基本上就应用在带框、按钮、表单等可视、可交互的元素上。首先来谈谈:enabled和:disabled这两个伪类选择器。部分元素如输入框、密码框、复选框等都具有:enabled和:disabled这两种状态。通过设置这两种状态下的样式可以看到表单元素在这两种状态下的外观。例子： <style typ
复制链接

扫一扫