前端学习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结尾 |
- 本文内容引自廖伟华《图解CSS3：核心技术与案例实战》，未经原作者允许禁止以商业目的转载发布！ ?
以上是关于前端学习CSS选择器的主要内容，如果未能解决你的问题，请参考以下文章