CSS3 新选择器

Like_Frost
619 阅读6分钟

在 CSS2.1 中，常用的选择器有：元素选择器、id 选择器、class 选择器、群组选择器和层次选择器，在 CSS3 中，新增了属性选择器、结构伪类选择器、UI 伪类选择器，新选择器可以提高开发效率。

一、属性选择器

属性选择器指的是通过元素的属性来选择元素的一种方式，如下面这句代码：<input id="btn" type="button" value="按钮"> 中的 id、type、value 就是 input 元素的属性。常用属性选择器如下：

选择器说明
E[attr^="xxx"]选择元素 E，其中 E 元素的 attr 属性是以 xxx 开头的任何字符
E[attr$="xxx"]选择元素 E，其中 E 元素的 attr 属性是以 xxx 结尾的任何字符
E[attr*="xxx"]选择元素 E，其中 E 元素的 attr 属性是包含 xxx 的任何字符

使用场景：在某些网站上，会根据元素的某个属性在文字前面展示图标，就可以使用这个属性，有如下示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            a[href$="doc"]::before{
                content: url(word.svg);
            }
            a[href$="pdf"]::before{
                content: url(pdf.svg);
            }
            a[href$="ppt"]::before{
                content: url(ppt.svg);
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="doc.doc" download>下载 doc 文件</a></li>
            <li><a href="doc.pdf" download>下载 pdf 文件</a></li>
            <li><a href="doc.ppt" download>下载 ppt 文件</a></li>
        </ul>
    </body>
</html>

在浏览器中效果如下：

image.png

这种写法有点类似于数组下标和正则表达式，::before 是伪元素，代表在此元素之前插入。

二、子元素伪类选择器

子元素伪类选择器，指的是某一个元素下的子元素，在 CSS3 中，子元素伪类选择器有两大类：

1、:first-child、:last-child、:nth-child(n)、:only-child

2、:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

1、:first-child、:last-child、:nth-child(n)、:only-child

第一类子元素伪类选择器如下：

选择器说明
E:first-child选择父元素下的第一个子元素，该子元素为 E
E:last-child选择父元素下的最后一个子元素，该子元素为 E
E:nth-child(n)选择父元素下的第 n 个子元素或者奇偶元素，该子元素为 E，n 取值为数字或 odd 、even
E:only-child选择父元素下唯一的子元素，该父元素只有一个子元素 E

有以下示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            li{
                height: 50px;
                width: 300px;
            }
            ul li:first-child{
                background-color: blueviolet;
            }
            ul li:nth-child(2){
                background-color: coral;
            }
            ul li:nth-child(3){
                background-color: cornflowerblue;
            }
            ul li:last-child{
                background-color: forestgreen;
            }
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

在浏览器中效果如下：

image.png

要想实现以上效果，如果使用 class 或者 id 选择器，会增加许多冗余代码，不利于后期维护，而使用子元素伪类选择器，可以使结构和样式分离，使得 HTML 文档更加清晰。

2、:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

第二类子元素伪类选择器如下：

选择器说明
E:first-of-type选择父元素下的第一个 E 类型的子元素
E:last-of-type选择父元素下的最后一个 E 类型的子元素
E:nth-of-type(n)选择父元素下的第 n 个 E 类型的子元素或者奇偶元素，n 取值为数字或 odd 、even
E:only-of-type选择父元素下唯一的 E 类型的子元素，该父元素可以有多个子元素

第一类子元素伪类选择器和第二类子元素伪类选择器的区别在于：第一类伪元素选择器不仅要区分元素类型，还指定了被选择元素在所有子元素中的位置；第二类伪元素选择器区分元素类型，但指定的是被选择元素在同类子元素中的位置，举个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            p,span{
                display: block;
                height: 50px;
                width: 300px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div>
            <p>p 元素</p>
            <span>span 元素1</span>
            <span>span 元素2</span>
        </div>
    </body>
</html>

在浏览器中的效果：

image.png

有三个内容块，如果想要让 span 元素 1 所在的块有背景颜色，使用伪类子元素选择器可以写为（div 的第二个元素，第一类子元素伪类选择器）：

        div span:nth-child(2){
            background-color: aquamarine
        }

效果如下：

image.png

使用第二类子元素伪类选择器可以写为：

        div span:nth-of-type(1){
            background-color: aquamarine;
        }

在浏览器中的效果相同：

image.png

由此可见，第一类选择的是第几个 child ，第二类选择的是指定 type 中的第几个，一般情况下只使用第一类。

三、UI 伪类选择器

UI 伪类选择器指的是针对元素的状态来选择元素的一种伪类选择器，UI 全称 User Interface，也就是用户界面，元素的状态包括：可用、不可用、选中、未选中、获取焦点、失去焦点等。UI 伪类选择器的共同特点是：对于指定的样式，在默认情况下不起作用，只有当元素处于指定状态时才起作用。另外，大多 UI 伪类选择器都是针对表单元素的。

UI 选择器主要包括五类： :focus、::selection、:checked、:enabled 和 :disabled、:read-write 和 :read-only。

1、:focus

可以使用这个选择器来定义元素获取焦点时使用的样式，并不是所有的 HTML 元素都有焦点样式，具有获取焦点和失去焦点特点的元素只有两种：表单元素（按钮、单选框、复选框、文本框、下拉列表）和超链接。

如何判断一个元素是否有焦点？ 打开一个页面后按 Tab 键，能够被选中的就是带有焦点特性的元素。

有如下示例，当元素获取焦点时，为元素添加一个轮廓线：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            input:focus{
                outline: 1px red solid;
            }
        </style>
    </head>
    <body>
        <div><label>账号：</label><input type="text"/></div>
        <div><label>密码：</label><input type="password"/></div>
    </body>
</html>

在浏览器中有如下效果：

image.png

2、::selection

默认情况下，当页面中文字被选中时，文本内容都是以蓝色背景，白色字体来显示的，我们可以使用 ::selection 选择器来定义页面中被选中文本的样式。（单冒号往往是伪类，双冒号往往是伪元素）。

为单个标签设置选中样式，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            p::selection{
                color: white;
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <p>这是示例文字</p>
    </body>
</html>

在浏览器中的效果：

image.png

为整个页面文字设置选中样式:

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            ::selection{
                color: white;
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <p>这是 p</p>
        <div>这是 div</div>
        <span>这是 span</span>
    </body>
</html>

所有文字都被设置了选中效果：

image.png

3、:checked

单选框 radio 和复选框 checkbox 都有选中和未选中的状态，可以使用 :checked 选择器来定义单选框或复选框被选中时的样式，有如下示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            input:checked{
                background-color: yellowgreen;
                font-size: large;
            }
        </style>
    </head>
    <body>
        <form>
            <label><input type="radio" name="fruit" checked/>苹果</label>
            <label><input type="radio" name="fruit"/>香蕉</label>
            <label><input type="radio" name="fruit"/>橘子</label>
        </form>
    </body>
</html>

此选择器的兼容性不好，只有 Opera 浏览器支持，故简单了解。

4、:enabled 和 :disabled

某些表单元素如文本框、单选框、复选框等，都有可用和不可用两种状态，也可以定义他们的样式：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            input:enabled{
                background-color: aquamarine;
            }
            input:disabled{
                background-color: black;
            }
        </style>
    </head>
    <body>
        <form>
            <p><label>可用：<input type="text"/></label></p>
            <p><label>禁用：<input type="text" disabled/></label></p>
        </form>
    </body>
</html>

在浏览器中的效果：

image.png

5、:read-write 和 :read-only

某些表单元素如单行文本框、多行文本框等，都有可读写和只读这两种状态，样式也可定义，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            input:read-write{
                background-color: aquamarine;
            }
            input:read-only{
                background-color: black;
            }
        </style>
    </head>
    <body>
        <form>
            <p><label>读写：<input type="text"/></label></p>
            <p><label>只读：<input type="text" readonly/></label></p>
        </form>
    </body>
</html>

效果如下：

image.png

四、其他伪类选择器

1、:root

使用此选择器选择 HTML 页面的根元素，使用 :root{} 和 html{} 是等价的，选中整个页面。

2、:empty

使用这个选择器来选中不包含任何子元素和内容的元素，也就是选择一个空元素，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            table,tr,td{
                border: 1px black solid;
            }
            td{
                height: 50px;
                width: 50px;
                text-align: center;
                background-color: rgb(36, 133, 100)
            }
            td:empty{
                background-color: rgb(204, 231, 240);
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td></td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td></td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

将 table 中所有的空元素的背景颜色设为浅蓝色：

image.png

3、:target

此选择器可以用来选取页面的某一个 targrt 元素，targrt 元素指的是 id 被当成页面的锚点链接来使用的元素，有如下示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            :target{
                color:lightcoral;
            }
        </style>
    </head>
    <body>
        <div>
            <a href="#div1">div1</a><br/>
            <a href="#div2">div2</a>
        </div>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <div id="div1">
            <h3>标题1</h3>
            <p>div1</p>
        </div>
        <div id="div2">
            <h3>标题2</h3>
            <p>div2</p>
        </div>
</html>

当点击某个锚点链接时，对应的内容会变色：

image.png

如果只想让被点击锚链链接内部的标题变色，可以写为：

            :target h3{
                color:lightcoral;
            }

效果如下：

image.png

4、:not()

使用此选择器来选择某一个元素之外的所有元素，重点掌握，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            ul{
                list-style-type: none;
            }
            li:not(.first){
                color: lightcoral;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="first">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
</html>

在浏览器中效果如下：

image.png

avatar
文章
阅读
粉丝