CSS3选择器

选择器

基本选择器

子元素选择器

如:

section > div

即直接后代选择器。与之前的

section div

不同，因为后者不只会选择子元素，还有孙子元素等。

兄弟元素选择器

如:

section > div + article

，即使用+号，这句表示选择了div的兄弟article。

通用兄弟选择器

选择某元素

后面

的所有兄弟元素，而且他们具有一个相同的父元素

section > div ~ article

表示选中了所有div的兄弟。

注意：只选择某元素后面的。

群组选择器

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号”,”隔开。

section > article, section > aside, section > div {
color: #f00;
margin-top: 10px;
background-color: blue;
}

实际上就是逗号并列。

属性选择器

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

使用CSS3属性选择器，你可以指定元素的某个属性，或者你还可以同时指定原色的某个属性和其对应的属性值。

Element[attr]

比如:

a[href] {
text-decoration: none;
}
a[href='#'] {  /*属性值为#*/
color: red;
}
a[class~='two'] {   /*属性的值包含two，并且单独为一个单词*/
color: black;
}
a[href^='#'] { /*以#开头*/
color: green;
}
a[href$='#'] {} /*以#结尾*/
a[href|='#'] {
color: fuchsia;
}  /*只有单独为#，或者以#-开头的元素*/

伪类选择器

主要有：动态伪类（锚点伪类、用户行为伪类），UI元素状态伪类、CSS3结构类、否定选择器、伪元素。

动态伪类

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

锚点伪类：

:link, :visited

用户行为伪类：

:hover, :active, :focus

input:focus {
background-color: #00B7FF;;
}

UI元素状态伪类

我们把:enabled, :disabled, :checked伪类元素称为UI元素的状态伪类。

input:disabled {}

CSS3结构类

又称为:nth选择器。

选择方法:

:first-child, :last-child, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-

last-of-type(), :first-of-type, :last-of-type, :only-child, :only-of-type

li:nth-child(2n) { /*偶数*/
color: red;
}
li:nth-child(odd) {
color: blue;
}

:nth-of-type匹配父元素特定类型的第n个元素。

:empty找到没有子元素(包括文本节点)的每个元素。

:not否定选择器

nav > a:not(:last-of-type) {}

CSS权重

行内样式>ID选择器>类、属性选择器、伪类选择器>元素和伪元素>*

被继承的CSS权重也是0。

伪元素

div::first-letter {
color: red;
}

::before

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

::before伪元素的特点:

1. 第一个子元素

2. 行级元素

3. 内容通过content呈现

::after特殊用途，清除浮动:

header {
background-color: #abcdef;
}

header > article {
float: left;
width: 40%;
height: 30px;
background-color: #f00;
}

header > aside {
float: right;
width: 40%;
height: 50px;
background-color: #ff0;
}

/*header > div {*/
/*clear: both;*/
/*}*/

header::after {
display: block;
content: '';
clear: both;
}

<header>
<article></article>
<aside></aside>
<div></div>
</header>

selection

用于设置浏览器选中文本后的背景色与前景色。

div::selection {
background-color: red;
color: #ff0;
}