前端学习CSS选择器

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端学习CSS选择器相关的知识,希望对你有一定的参考价值。

 

CSS选择器

 
 

CSS选择器

 

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


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

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

以上是关于前端学习CSS选择器的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段6——CSS选择器

前端学习CSS选择器

web前端学习-CSS

web前端学习-CSS

黑马程序员前端学习的总结HTML+CSS

前端基础css 选择器