鱼C论坛

 找回密码
 立即注册
查看: 2587|回复: 0

[学习笔记] 036-UI伪类选择器(I) | css3

[复制链接]
发表于 2020-3-1 21:24:01 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 liuzhengyuan 于 2020-3-10 09:02 编辑

《零基础入门学习web开发》第37讲 初学CSS的噩梦III | 学习笔记



伪类选择器:
伪类选择器.png

UI伪类选择器:
037-1.png

1, :enable / disable
就是,设置必填/选填元素样式

stlye:
:enabled {
            outline: 1px solid green;
        }
        :disabled {
            outline: 1px solid red;
        }

main:
<label>enable: <input type="text" name="enable"></label> <br><br>
    <label>disable: <input type="text" name="disable" disabled></label><br><br>

    <button>enable</button>
    <button disabled>disable</button>

就是这样:
037-2.png

2,:checked
被选中元素样式,( + ... 就是设置 cheked 之后的元素)

stlye:
:checked + span {
            background-color: cornflowerblue;
            color: blue;
        }

main:
<br><br><br>
    <input type="radio" name="numbers" value="first"><span>1</span><br>
    <input type="radio" name="numbers" value="second"><span>2</span><br><br>

    <input type="checkbox" name="fruits" value="watermelon"><span>西瓜</span><br>
    <input type="checkbox" name="fruits" value="stawberry"><span>草莓</span><br>
    <input type="checkbox" name="fruits" value="apple"><span>苹果</span><br>

效果:
037-3.gif

3,:optional / :required
设置可选/不可选元素的样式

stlye:
:optional {
            background-color: cornflowerblue;
        }
        :required {
            background-color: lightcoral;
        }

main:
<form>
        <label>optianal: <input type="text" name="optional"></label><br><br>
        <label>required: <input type="text" name="required" required></label><br><br>
        <button type="submit">submit</button><br><br>
    </form>

效果:
037-4.png

4,:default
默认元素的样式,比如按钮之类的(实在想不出还有什么别的~)

stlye:
:default {
            background-color: black;
            color: white;
        }

main:
<form>
        <label>optianal: <input type="text" name="optional"></label><br><br>
        <label>required: <input type="text" name="required" required></label><br><br>
        <button type="submit">submit</button><br><br>
    </form>

效果:
037-5.png

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-23 17:38

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表