Css3新增选择器概述

最新推荐文章于 2023-01-24 12:38:08 发布

青珣墨笠

最新推荐文章于 2023-01-24 12:38:08 发布

阅读量301

点赞数

分类专栏： web前端html css 文章标签： css3 选择器文档

本文链接：https://blog.csdn.net/zhangli2513/article/details/77162000

版权

web前端html css 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

CSS3选择器：

Ele1~Ele2:选择Ele1后面的每一个Ele2
Ele[key(^ $*)=value]选择对应的元素（^开头$ 结束*包含）
:root选择文档的根元素
:empty选择文档中的所有空元素
:target选择激活的元素
:disabled选择禁用的输入元素
:enabled选择没有禁用的输入元素
:checked选择每个选中的元素
:not选择并非某个元素的元素
::selection选择元素中用户选中的元素
:out-of-range选择在指定区间外的input元素
:in-range选择在指定区间内的input元素
:read-write选择可以读写的元素
:optional选择可选的元素
:invalid用于匹配输入值非法的元素

参考文档：菜鸟教程

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/CSS3.css"/>
    </head>
    <body>
        <div>
            <h3>num</h3>
            <h4>111</h4>
            <h4>222</h4>
            <h4>333</h4>
            <a href="http://blog.csdn.net/zhangli2513">BBB</a>
        </div>
        <a href="#">AAA</a>
        <a href="http://blog.csdn.net/zhangli2513">BBB</a>
        <div>
            <input type="text" placeholder="水果店"/>
            <p>内容1</p>
        </div>
        <div>
            <input type="text" placeholder="香蕉"/>
            <p>内容2</p>
        </div>
        <div>
            <input type="text" placeholder="苹果"/>
            <p>内容3</p>
        </div>
        <ul>
            <li>aaa</li>
        </ul>
        <ul>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
        <a href="#target">点我</a>
        <div id="target">点死他</div>
        <input type="submit" disabled/>
        <input type="checkbox"/>
        <input type="checkbox" checked/>
        <input type="checkbox" checked>
    <form>
        <input type="text"/>
        <input type="text" required/>
    </form>
    </body>
</html>

/*h3后的所有h4颜色  ~兄弟选择器*/
h3 ~ h4 {color: red;}
/*a标签 href以#号开头的颜色*/
a[href='#']{color: greenyellow;}
/*以#结束的颜色*/
a[href$='#']{color: yellow;}
/*包含tt的颜色*/
a[href*='tt']{color: blue;}
/*input的placeholder值包含果的后边的p标签的字体颜色*/
input[placeholder*='果'] ~ p{color: red;}
/*div里第一个h4元素字体大小*/
div h4:first-of-type{font-size: 20px;}
/*div里最后一个h4元素边框*/
div h4:last-of-type{border: 2px dashed #799aff;}
/*div里倒数第三个h4元素边框*/
div h4:nth-last-of-type(3){border: 1px solid black;}
/*div里顺数第三个h4元素边框*/
div h4:nth-of-type(3){padding: 10px;}
/*div里唯一的一个a标签 下划线放上边*/
div a:only-of-type{text-decoration: overline;}
/*ul里只有一个li的颜色为绿色*/
ul li:only-child{color: green;}
/*选择文档的根元素背景颜色*/
:root{background-color: #799;}
/*每个没有任何子级的元素(包括文本节点)border样式(3个input)*/
:empty{ border: 3px solid #FC06F5;}
/*选择激活的元素 #targer点击a锚点后激活背景颜色改变*/
:target{background-color: #FC06F5;}
/*选择每一个禁用的输入元素*/
:disabled{border: 5px solid #9A7A34;}
/*选择每一个已启用的输入元素*/
:enabled{color: #9A7A34;}
/*选择每个选中的输入元素*/
:checked{width: 20px;height: 20px;}
/*匹配元素中被用户选中或处于高亮状态的部分颜色为白色*/
::selection{color: white;}
/*用于匹配可选的输入元素*/
form :optional{color: red;}
/*用于匹配设置了 "required" 属性的元素*/
form :required{color: blue;}

这里写图片描述

青珣墨笠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css3新增选择器概述

参考文档：菜鸟教程<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title></title> <link rel="stylesheet" type="text/css" href="css/CSS3.css"/> </head> <body> <d
复制链接

扫一扫