CSS3学习笔记-选择器

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的核心内容,应熟练掌握并精通使用,为以后的学习打下基础.
部分浏览器的兼容问题没有说明,希望大家能在实践中尝试.