CSS3学习笔记-选择器
一、基本选择器
通过基本选择器可以确定HTML中大多数DOM元素节点
选择器 | 类型 | 功能 |
---|---|---|
* | 通配选择器 | 选择文档中的所有HTML元素 |
E | 元素选择器 | 选择指定类型的HTML元素 |
id | ID选择器 | 选择指定ID属性值为”id”的任意类型唯一元素 |
.class | 类选择器 | 选择指定class属性值为”class”的任意类型多个元素 |
二、层次选择器
通过HTML的DOM元素进的层次关系获取元素,包括后代 父子 相邻.
选择器 | 类型 | 功能 |
---|---|---|
E F | 后代选择器 | 指定F,选择E元素中的所有F元素 |
E>F | 子选择器 | 指定F,选择E元素的直接子元素中的F元素 |
E+F | 相邻选择器 | 指定F,选择紧跟E元素后面的F元素 |
E~F | 通用选择器 | 指定F,选择E元素后的所有F元素 |
三、属性选择器
选择器 | 所指 |
---|---|
E[attr] | 有属性attr的元素 其中可省略E 选择任意类型的attr元素 |
E[attr=val] | 有属性attr且等于val的元素 其中可省略E |
E[attr|=val] | 有属性attr且值等于val或以val-开头的元素 |
<p lang='en-us'> p[lang|=en] |
|
E[attr~=val] | 有属性attr且以空格隔开的值中有val的元素 |
<p title='just do it'> p[title~=do] |
|
E[attr*=val] | 有属性attr且值在任意位置有val的元素 |
` p[data*=java] | |
E[attr^=val] | 有属性attr且值以val开头的元素 |
E[attr$=val] | 有属性attr且值以val结尾的元素 |
四、伪类选择器
(1)动态伪类选择器
锚点 或 用户行为的伪类
选择器 | 所指 |
---|---|
:link | 元素被定义了超链接,并未被访问过 |
:visited | 元素定义了超链接,被访问过 |
:active | 元素被激活,用于a,button被点击时 |
:hover | 鼠标停留在元素上时 |
:focus | 元素获得焦点时,一般指表单元素 |
(2)UI元素状态伪类选择器
根据form表单中元素的状态选择
选择器 | 所指 |
---|---|
:clicked | 选中状态(复选框,单选框) |
:enabked | 启用状态的表单元素 |
:disabled | 禁用状态的表单元素 |
(3)结构伪类选择器
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
:first-child 和 :last-child
父元素的第一个(最后一个)元素
li:first-child{color: red;} /*1为红色*/
li:last-child{color: red;} /*6为红色*/
:nth-child(n) 和 nth-last-child(n)
父元素的第n个(倒数n个)元素,若为此类型则选中 索引从1开始
关键字 (odd,even)奇偶
公式 (2n+1) 奇数 (2n)偶数 (n+length) 第length个之后
li:nth-child(even){color: red;} /*2,4,6为红色*/
li:nth-child(2n){color: red;} /*2,4,6为红色*/
li:nth-child(odd){color: red;} /*1,3,5为红色*/
li:nth-child(2n+1){color: red;} /*1,3,5为红色*/
li:nth-child(n+3){color: red;} /*3,4,5,6为红色*/
li:nth-child(3n+1){color: red;} /*1,4为红色*/
分析: (3n+1)
- n = 0 时 3 * 0 + 1 = 0;
- n = 1 时 3 * 1 + 1 = 4;
- n = 2 时 3 * 2 + 1 = 7;
:nth-of-type和:nth-last-of-type
父元素的第n个(倒数n个)此类型元素 索引从1开始
<ul>
<h2>0<h2>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
li:nth-child(1){color: red;} /*没有元素变红*/
li:nth-of-type(1){color: red;} /*li{1}为红色*/
:only-child和:only-of-type
父类中的唯一个元素
<ul>
<li>1</li>
</ul>
li:only-child{color: red;} /*li{1}为红色*/
li:only-of-type{color: red;} /*li{1}为红色*/
<ul>
<h2>0<h2>
<li>1</li>
</ul>
li:only-child{color: red;} /*没有元素变红*/
li:only-of-type{color: red;} /*li{1}为红色*/
:empty
没有任何内容的元素(空格都不行)
ul:empty{border:1px solid red;} /*一条红线*/
<ul></ul> <!-- 一条红线 -->
<ul> </ul> <!-- 有空格 , 无效果 -->
<ul>
</ul> <!-- 有回车 , 无效果 -->
:root
文档根元素 在HTML中始终为
(4)否定伪类选择器
:not(F) F为其他的选择器 表示过滤掉F选择到的元素 的其他元素
(5)其它伪类选择器
选择器 | 类型 | 所指 |
---|---|---|
:target | 目标伪类 | 匹配文档中URI某个标识符的目标元素(非常有用) |
:lang(language) | 语言伪类 | 匹配应用指定语言的元素(用语多语言网页) |
<a href='#target'>点击</a>
<div id='target'></div>
div:target{border: 1px solid red;} /*点击<a>出现一条红线*/
五、伪元素
用”::”两个引号 为于伪类相区别, : ,:: 都被支持 css3 建议使用”::”两个引号
选择器 | 所指 |
---|---|
::first-letter | 文本快的第一个字母(用于首字下沉) |
::first-line | 文本快的第一行 |
::before | 在元素前插入内容(不属于DOM) |
::after | 在元素后插入内容 |
content属性 可以是字符串或图片或特殊符号 | |
::selection | 匹配光标选中的文本 |
小结:
选择器是CSS3的核心内容,应熟练掌握并精通使用,为以后的学习打下基础.
部分浏览器的兼容问题没有说明,希望大家能在实践中尝试.
来源:CSDN
作者:凌波ling
链接:https://blog.csdn.net/u012507347/article/details/47126203