CSS3总结——选择器

来源：互联网发布：大学老师知乎编辑：程序博客网时间：2024/06/16 11:41

基本选择器

子元素选择器（IE8+）

语法：

父元素 > 子元素

相邻兄弟元素选择器（IE8+）

语法：

元素 + 兄弟相邻元素

通用兄弟元素选择器（IE8+）

语法：

元素 ~ 后面所有兄弟相邻元素

群组选择器

将具有相同样式的元素分组在一起，使用“，”隔开

语法：
元素1 ，元素2 ，…元素n

属性选择器

对带有指定属性的HTML元素设置样式。

使用CSS3属性选择器，你可以只指定元素的某个属性，

或者你还可以同时指定元素的某个属性和其相对的属性值。

Element [ attribute]（IE8+）

为带有attribute属性的Element元素设置样式

实例：

有href属性的，a元素设置样式

a[href] { text-decoration: none};

Element [ attribute=”value”]（IE8+）

为attribute=”value”属性的Element元素设置样式

实例：

href属性等于#的，a元素设置样式

a[href="#"] { text-decoration: none};

Element [ attribute~=”value”]（IE8+）

为attribute属性包含“value”单词的元素设置样式

实例：

class 包含two这个单词 的，都会被选到。

下面这两个a标签都会被选中。

CSSa[class~="two"]{ color: #eee; }HTML<a class="one two"><a class="two three">

Element [ attribute^=”value”]（IE8+）

为attribute属性以“value”开头的元素设置样式

实例：

href属性以#开头的，a元素设置样式

下面这两个a标签都会被选中。

CSSa[href^="#"] { text-decoration: none};HTML<a href="#1"><a href="#2">

Element [ attribute$=”value”]（IE8+）

为attribute属性以”value”结尾的元素设置样式

Element [ attribute*=”value”]（IE8+）

为attribute属性包含“value”字符串的所有元素设置样式

补充：

~= && *=

~=：选中的是单词，与前面的词用空格分开的

*=：选中的是字符串

实例：

比如<img title='yes this' /> ，~=this 可以选中；

<img title='thisistrue' /> ， *=this 可以选中。

Element [ attribute|=”value”]（IE8+）

为attribute属性为“value”或以“value —”开头的所有元素

实例：

CSSa [href|="countDown"]HTML<a href="countDown"><a href="countDown-1">

伪类选择器

动态伪类

这些伪类并不存在于HTML中，只有当用户和网页元素交互的时候才能体现出来。

锚点伪类

:link （超链接默认样式）

:visited （访问过的链接样式）

用户行为伪类

:hover

:focus（光标进入文本框时）

:active（被选中的时候）

UI元素状态伪类

:enabled （input可用）（IE9+）

:disabled （input不可用）（IE9+）

:checked （复选框被选中） 仅有Opera可用

CSS3结构伪类

Element:first-child （IE8+）

选择 父元素中的首个子元素是 Element的元素

需要满足2个条件：

父元素中的首个子元素；
恰好这个元素又是Element。

实例：

第一个div整个选中，第二个div里的2-1会被选中。

第一个div是相对于父元素body的首个div元素；2-1是相对于父元素div的首个div元素。

CSSdiv:first-child{ color:#fff ;}HTML<body>    <div>        <div>1-1</div>        <div>1-2</div>    </div>    <div>        <div>2-1</div>        <div>2-2</div>    </div></body>

Element:last-child （IE8+）

选择 父元素中的最后一个子元素是 Element的元素

需要满足2个条件：

父元素中的最后一个子元素；
恰好这个元素又是Element。

Element:nth-child(N) （IE9+）

从1开始

选中父元素下的“第N个Element子元素”。

需要满足2个条件：

父元素中的第N个子元素；
恰好这个元素又是Element。

扩展用法：

选择全部子元素

Element:nth-child(n) （IE9+）

选中所有父元素下的Element子元素

选择偶数

Element:nth-child(2n) （IE9+）

Element:nth-child(even) （IE9+）

从1开始

选中所有父元素下的偶数 Element子元素

选择奇数

Element:nth-child(2n+1) （IE9+）

Element:nth-child(odd) （IE9+）

从1开始

选中所有父元素下的奇数 Element子元素

Element:nth-last-child(N) （IE9+）

从1开始

选中父元素下的“倒数第N个Element子元素”。

需要满足2个条件：

父元素中的倒数第N个子元素；
恰好这个元素又是Element。

Element:nth-of-type(N) （IE9+）

选中父元素下的“第N个Element元素”，特定类型。

Element:nth-last-of-type(N)（IE9+）

选中父元素下的“倒数第N个Element元素”，特定类型。

Element:first-of-type（IE9+）

选中父元素下的“第1个Element元素”，特定类型。

Element:last-of-type（IE9+）

选中父元素下的“最后一个Element元素”，特定类型。

Element:only-child（IE9+）

选中父元素下，唯一Element子元素

需要满足2个条件：

父元素中的唯一子元素；
恰好这个元素又是Element。

Element:only-of-type（IE9+）

选中父元素下，唯一Element类型的Element子元素，特定类型。

Element:empty（IE9+）

选中父元素下，空标签

否定选择器

Element:not（元素/选择器）（IE9+）

选中非指定元素

实例：

div:not(p)

a:not(:last-of-type)

伪元素（IE9+）

用于向某些选择器设置特殊效果。

Element::first-line （块级元素）

选中Element元素的首行文本

div::first-line {            color: #f00;            font-weight: bold;}

Element::first-letter（块级元素）

选中文本首字母

Element::before

在元素前面插入新内容

特点：
1. 行级元素
2. 内容通过content写入

div::before {            content: "我在内容的前面"}

Element::after

在元素后面插入新内容

常用于清除浮动

header::after{    content: '';    display: block;    height: 0;    overflow: hidden;    clear: both;}

扩展：

content属性

这里写图片描述

假设我们有一个元素：

<a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a>

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：

a:after {  content:attr(title);       color:#f00;}

阅读全文

0 0