CSS3学习代码之UI伪类选择器

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

老实青年

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

阅读量245

点赞数

分类专栏： CSS3 文章标签： css3 ui

本文链接：https://blog.csdn.net/qq_28695163/article/details/66979717

版权

CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3之UI伪类选择器</title>
    <style>
        /*input[type="text"]:enabled{*/
            /*background:#565656;*/
        /*}可用的type为text的元素*/
        /*input[type="text"]:disabled{*/
            /*background:#565656;*/
        /*}*/
        /*input:read-write{*/
            /*background:#565656;*/
        /*}*/
        /*input:read-only{*/
            /*background:#565656;*/
        /*}*/
        /*div::selection{*/
            /*background:#565656;*/
        /*}div中选中的文字高亮状态,火狐不支持,chrom支持*/
        /*::-moz-selection{*/
            /*background:#565656;*/
        /*}选中的文字高亮状态,火狐支持,chrom不支持*/
        /*input:out-of-range{*/
            /*border: 2px solid red;*/
        /*}*/
        /*input:in-range{*/
            /*border: 2px solid yellow;*/
        /*}*/
        /*p>input[value="text"]:optional{*/
            /*background-color: #AB3456;*/
        /*}p标签下的元素*/
        /*p>input[value="text"]:required{*/
            /*background: #AB9999;*/
        /*}*/
        /*input[type="email"]:valid{*/
            /*background: yellow;*/
        /*}*/
        /*input[type="email"]:invalid{*/
            /*background:red;*/
        /*}*/
/*对于checked，由于大部分浏览器不兼容，所以就不予在代码中体现*/


        /*p~input{*/
            /*background: greenyellow;*/
        /*}在p标签后面的input元素，注意是后面不是里面*/
        /*p:not(radio){*/
            /*background: gold;*/
        /*}*/
        :target{
            border: 2px solid midnightblue;
            background: springgreen;
        }
    </style>
</head>
<body>
<form action="#" name="myForm" method="get">
    姓名:<input type="text" value="尹胜涛"><br>
    国家:<input type="text" disabled="disabled" value="中国"><br>
    <input type="radio" checked="checked" value="male" name="gender"> 男<br>
    <input type="radio" value="female" name="gender">女<br>
    <p>普通的input元素:<br><input value="hello"></p>
    <p>只读的input元素:<br><input readonly value="hello"></p>
    <div>这是div元素的一些文本</div>
    <input type="number" min="5" max="10" value="6">
    <p id="YST">可选的input元素:<br><input value="text"></p>
    <p>必填的input元素:<br><input required value="text"></p>
    <input type="email" value="1257501834@qq.com">
    <p><a href="#YST">YST</a></p>
</form>
</body>
</html>