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

2024-04-06 06:28•css•阅读 1366

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 >


<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" >


<h2><a href="#brand">Brand</a></h2>


<p>Lorem ipsum dolor...</p>


</div>


<div class="menuSection" >


<h2><a href="#promotion">Promotion</a></h2>


<p>Lorem ipsum dolor sit amet...</p>


</div>


<div class="menuSection" >


<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结尾

上一篇 »好的博客学习记录1-小火柴之深入理解javascript选择器API系列
下一篇 »CSS 学习笔记，一选择器

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

1 基本选择器

2 层次选择器

3 伪类选择器

3.1 动态伪类选择器

3.2 目标伪类选择器

3.3 语言伪类选择器

3.4 UI元素伪类选择器

3.5 结构伪类选择器

3.6 否定伪类选择器

4 伪元素

5 属性选择器

相关推荐

javascript选择器失效如何解决？

高性能Javascript 选择器API学习笔记

jQuery CSS选择器nth-child

Web前端学习——CSS

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

CSS选择器，CSS3选择器

CSS选择器

前端性能优化-静态资源优化3-CSS