【前端学习】【CSS选择器】

2023-01-31 07:13:45

CSS选择器

CSS（Cascading Style Sheets）是一项出色的技术，它使得网页的结构和表现样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML（HyperText Markup Language）结构。
要使某个样式应用于特定的HTML元素，首先需要找到该元素。在CSS中，执行这一任务的表现规则称为CSS选择器1。

CSS选择器

1 基本选择器

基本选择器是CSS中使用最频繁、最基础，也是CSS种最早定义的选择器，这部分选择器在CSS1中就定义了。

选择器	类型	功能描述
*	通配选择器	选择文档中所有的HTML元素
E	元素选择器	选择指定的类型的HTML元素
#id	ID选择器	选择指定ID属性值为”id”的任意类型元素
.class	类选择器	选择指定class属性值为”class”的任意类型的任意多个元素
selector1,selectorN	群组选择器	将每一个选择器匹配的元素集合并

2 层次选择器

层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟集中关系，通过其中某类关系可以方便快捷地选定需要的元素。

选择器	类型	功能描述
E F	后代选择器（包含选择器）	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是所匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元后素的所有匹配的F元素

3 伪类选择器

3.1 动态伪类选择器

动态伪类并不存在与HTML中，只有当用户和网站交互的时候才能体现出来。

选择器	类型	功能描述
E:link	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接锚点上
E:visited	链接伪类选择器	选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接锚点上
E:active	用户行为伪类选择器	选择匹配的E元素，且匹配元素被激活。常用于锚点与按钮上
E:hover	用户行为伪类选择器	选择匹配的E元素，且用户鼠标停留在元素E上。
E:focus	用户行为伪类选择器	选择匹配的E元素，且匹配的元素获得焦点

3.2 目标伪类选择器

目标伪类选择器“:target”是众多实用的CSS3特性中的一个，用来匹配文档（页面）的URI中某个标识符的目标元素。在Web页面中，一些URL拥有片段标识符，它由一个#后跟一个锚点或元素ID组合而成，可以链接到页面的某个特定元素。

实例如下：手风琴效果：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> 垂直手风琴 </title>
    <style type="text/css">
        .accordionMenu {
            background: #fff;
            color:#424242;
            font: 12px Arial, Verdana, sans-serif;
            margin:0 auto;
            padding: 10px;
            width: 500px;
        }
        .accordionMenu h2 {
            margin:5px 0;
            padding:0;
            position: relative;
        }
        .accordionMenu h2:before {/* 制作向下三角效果 */
            border: 5px solid #fff;
            border-color: #fff transparent transparent;
            content:"";
            height: 0;
            position:absolute;
            right: 10px;
            top: 15px;
            width: 0;
        }
        .accordionMenu h2 a {/* 制作手风琴标题栏效果 */
            background: #8f8f8f;
            background: -moz-linear-gradient( top, #cecece, #8f8f8f);
            background: -webkit-gradient(linear, left top, left bottom,
            from(#cecece), to(#8f8f8f));
            background: -webkit-linear-gradient( top, #cecece, #8f8f8f);
            background: -o-linear-gradient( top, #cecece, #8f8f8f);
            background: linear-gradient( top, #cecece, #8f8f8f);
            border-radius: 5px;
            color:#424242;
            display: block;
            font-size: 13px;
            font-weight: normal;
            margin:0;
            padding:10px 10px;
            text-shadow: 2px 2px 2px #aeaeae;
            text-decoration:none;
        }
        .accordionMenu :target h2 a, /* 目标标题的效果 */
        .accordionMenu h2 a:focus,
        .accordionMenu h2 a:hover,
        .accordionMenu h2 a:active {
            background: #2288dd;
            background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
            background: -webkit-gradient(linear, left top, left bottom,
            from(#6bb2ff), to(#2288dd));
            background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);
            background: -o-linear-gradient( top, #6bb2ff, #2288dd);
            background: linear-gradient( top, #6bb2ff, #2288dd);
            color:#FFF;
        }
        .accordionMenu p {/* 标题栏对应的内容 */
            margin:0;
            height: 0;/* 默认栏目内容高度为 0，达到隐藏效果 */
            overflow: hidden;
            padding:0 10px;
            -moz-transition: height 0.5s ease-in;
            -webkit-transition: height 0.5s ease-in;
            -o-transition: height 0.5s ease-in;
            transition: height 0.5s ease-in;
        }
        /* 这部分是显示内容的关键代码 */
        .accordionMenu :target p {/* 展开对应目标内容 */
            height:100px;/* 显示对应目标栏内容 */
            overflow: auto;
        }
        .accordionMenu :target h2:before {/* 展开时标题三角效果 */
            border-color: transparent transparent transparent #fff;
        }
    </style>
</head>
<body>
<div class="accordionMenu">
    <div class="menuSection" id="brand">
        <h2><a href="#brand">Brand</a></h2>
        <p>Lorem ipsum dolor...</p>
    </div>
    <div class="menuSection" id="promotion">
        <h2><a href="#promotion">Promotion</a></h2>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class="menuSection" id="event">
        <h2><a href="#event">Event</a></h2>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>
</body>
</html>

3.3 语言伪类选择器

语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从CSS指定。

3.4 UI元素伪类选择器

UI元素状态伪类选择器也是CSS3选择器模块组中的一部分，主要用于form表单元素上，以提高网页的人机交互、操作逻辑以及页面的整体美观，使表单页面更具个性与品位，而且使用户操作页面表单更便利和简单。

选择器	类型	功能描述
E:checked	选中状态伪类选择器	匹配选中的复选按钮或单选按钮表单元素
E:enabled	启用状态伪类选择器	匹配所有启用的表单元素
E:disabled	不可用状态伪类选择器	匹配所有禁用的表单元素

3.5 结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child	作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root	选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配符的内容相同
E F:nth-child(n)	选择父元素E的第n个子元素F。其中n可以是整数（1、2、3）、关键字（even、odd）、可以是公式（2n+1 、 -n+5），而且n值起始值为1，而不是0
E F:nth-last-child(n)	选择元素E的倒数第n个子元素F。同上
E:nth-of-type(n)	选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	同上
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type	选择父元素只包含一个同类型的子元素，且该子元素匹配E元素
E:empty	选择没有子元素的元素，而且该元素也不包含任何文本节点

3.6 否定伪类选择器

否定选择器“:not()”是CSS3的新选择器，类似jQuery中的“:not()”选择器，主要用来定位不匹配该选择器的元素

选择器	功能描述
E:not(F)	匹配所有除元素F外的E元素

4 伪元素

CSS3中对伪元素进行了一定的调整，在以前的基础上增加一个冒号，也就相应的变成了“::first-letter”、“::first-line”等

为什么要使用两个冒号？
主要用来区分伪类和伪元素。

选择器	功能描述
::first-letter	用来选择文本块的第一个字母。通常用于给文本元素添加排版细节，例如下沉字母或首字母
::first-line	用来匹配元素的第一行文本。也常用于文本排版方面
::before ::after	不是指存在于标记中的内容，而是可以插入额外内容的位置
::selection	用来匹配突出显示的文本。用于用鼠标选定一段文本时候可以修改它的样式

5 属性选择器

在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。

选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素。其中E可以省略，表示选择定义了attr属性的任意类型元素
E[attr=val]	选择匹配具有属性attr的E元素，并且attr的属性值为val，同样E元素省略时表示选择定义了attr属性值为val的任意类型元素
E[attr\|=val]	选择匹配E元素，且E元素定义了属性attr，attr属性值具有多个空格分隔的值，其中一个值等于val。常用于lang元素
E[attr~=val]	attr属性值具有多个空格分隔的值，其中一个值等于val
E[attr*=val]	attr属性值任意位置包含了val
E[attr^=val]	attr属性值以val开头
E[attr$=val]	attr属性值以val结尾

本文内容引自廖伟华《图解CSS3：核心技术与案例实战》，未经原作者允许禁止以商业目的转载发布！ ↩

码农公寓