css3选择器

发表于 | 更新于 | 分类于
本文字数： 4.6k | 阅读时长 ≈ 4 分钟

本博客主要介绍CSS3新增选择器

liuyifei

基本选择器

CSS3发布之前，CSS基本选择器有：通配符选择器（*），元素选择器（div），ID选择器（#id），类选择器（#），后台选择器（空格)。

CSS3新增的基本选择器有子元素选择器，相邻兄弟元素选择器，通用兄弟选择器和群组选择器。

子元素选择器

子元素选择器只能选择某元素的子元素

语法：父元素 > 子元素

相邻兄弟元素选择器

相邻兄弟元素选择器可以选择紧接在另一个元素后的元素，而且他们具有一个相同的父元素。

语法：元素 + 兄弟相邻元素（第一个）{}

通用兄弟元素选择器

通用兄弟元素选择器可以选择某元素后的所有兄弟元素，而且他们具有一个相同的父元素。

语法：元素 ~ 后面所有兄弟相邻元素{}

群组选择器

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

语法：元素1，元素2，元素3{CSS语句}

属性选择器

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

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

ELement[attribute]

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

1
2
3
a[href]{
    text-decoration: none;
}/*所有的a并且有href属性的标签*/

ELement[attribute=”value”]

1
2
3
a[href="www.123.com"]{
    text-decoration: none;
}/*所有的a并且有href===www.123.com属性的标签*/

ELement[attribute~=”value”]

1
2
3
p[class~="two"]{
    text-decoration: none;
}/*<p class="two three"/class="one two">属性的标签;匹配含有class===two*/

ELement[attribute*=”value”]

1
2
3
p[class*="tw"]{
    text-decoration: none;
}/*匹配包含vaue或以value-开头的元素class*/

伪类选择器

伪元素选择器包括：动态伪类(锚点伪类、用户行为伪类)

UI元素状态选择器

CSS3结构类

否定选择器

伪元素选择器

动态伪类

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

锚点伪类

:link (蓝色链接), :visited(访问过的链接)

用户行为伪类

:hover(鼠标经过), :active(点击时), :focus(获取鼠标)

1
2
3
4
5
6
7
8
9
10
11
12
a:link{
    color:#000000;
}
a:hover{
    color:red;
}
a:active{
    color:yellow;
}
a:visited{
    color:#00ffff;
}/*也可以用于其他元素*/

UI元素状态伪类

我们把“:enabled”(可输入的), “:disabled”(不可输入的), “:checked”(选中的)伪类成为UI元素状态伪类

1
2
3
4
5
6
7
8
9
input:enabled{
    color:#123456;
}
input:disabled{
    color:#123456;
}
input:checked{
    color:#123456;
}
1
2
3
<input type="text" disabled="disabled"></input>
<input type="text" enable="enable"></input>
<input type="check" checked="checked"></input>

CSS3结构类

CSS3的：nth选择器

我们把CSS3的：nth选择器也称为CSS3结构类

选择方法

: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, :empty

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

这四个伪类针对子元素，比如div:nth-child()针对div的子元素

div:first-child：选择属于其父元素的首个子元素是div的div元素，并为其设置样式

:last-child：选择属于父元素的最后一个子元素的Element元素，并为其设置样式

:nth-child(N)：匹配属于其父元素的第N个子元素，不论元素的类型。

:nth-last-child(N)：匹配属于父元素的倒数第N个子元素的每个元素，不论元素的类型，从最后一个元素开始计数。

扩展：

第一个元素的下标是1。

:nth-child(n)：n是一个简单的表达式，取值从“0”开始计算。这里只能是“n”，不能用其他字母替换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.demo:nth-child(2){
    color:#123456;
}/*匹配第二个元素*/
.demo:nth-child(n){
    color:#123456;
}/*匹配所有元素*/
.demo:nth-child(odd/2n+1){
    color:#123456;
}/*匹配奇数元素*/
.demo:nth-child(even/2n){
    color:#123456;
}/*匹配偶数元素*/
.demo:nth-child(3n+1){
    color:#123456;
}/*3n+1*/
.demo:nth-child(n*n){
    color:#123456;
}/*错误*/
:nth-of-type(), :nth-last-of-type(), :first-of-type, :last-of-type,:one-child, :only-of type

这几个伪类针对同名元素，比如div:nth-of-type(N)针对div元素

div:nth-of-type(N)：匹配属于父元素的特定类型（div）第N个子元素（div）的每个元素。所有的属于其父元素（所有元素）第N个div。

:nth-last-of-type(), :first-of-type, :last-of-type：略

div:one-child：针对没有兄弟元素的div元素，比如div:only-of type只有一个div但有两个兄弟元素为p，不会被选中

:only-of type：选择器匹配属于其父元素的特定类型的唯一子元素的每个元素，比如div:only-of type只有一个div但有两个兄弟元素为p，仍会被选中

:empty

:empty选择器匹配没有子元素（包括文本节点）的每个元素

1
2
3
<div></div><!--目标元素-->
<div>124</div>
<div><a></a></div>

否定选择器（:not）

:not(ELement/selector)选择器匹配非指定元素/选择器的每个元素。

语法：父元素:not(子元素/子选择器) ；father:not(chidren/selector)

1
2
3
4
5
6
div:not(p){
    color:red;
}/*不选择p*/
a:not(last-of-type){
    border-right:1px solid red;
}/*不选择最后一个a*/

伪元素选择器

伪元素用于像某些选择器设置特殊效果。

语法：元素::伪元素 / 元素:伪元素

CSS权重

什么是权重：当很多的规则被应用到某一个元素上时，权重是一个决定哪种规则生效，或者是优先级的过程。

权重等级与权重：行内样式（1000）>id选择器（100）>类，属性选择器和伪类选择器(10)>元素和伪元素(1)>*(0)

行内样式：< div style=” “ > < /div >,style里面的样式就是行内样式

权重相同的连个css样式，后面的会覆盖前面的样式

first-line

根据“first-line”伪元素中的样式对元素的第一行文本进行格式化/执行css样式。first-line伪元素只能用于块级元素。

first-letter

用于向文本的首字母设置样式。

first-letter只能用于块级元素

before

在元素的内容前面插入新内容

常用”content”配合使用

1
2
3
4
5
6
div::before{
    content:"我在内容的前面";
    color:red;
    display:block;
    border-right:1px solid green;
}

特点：父元素（例如demo里的div)的第一个子元素; 是个行级元素； 内容通过content写入，支持所有的css样式；标签里面找不到

after

在元素的内容后面插入新内容

多用于清除浮动

1
2
3
4
5
6
7
8
9
10
11
div::after{
    display= block;
    content: "";
    clear: both;/*清除浮动*/
}
div > aisde{
    float:left;
}
div > article{
    float:right;
}
1
2
3
4
<div>
    <aside>12</aside>
    <article>123</article>
</div>
selsection

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

1
2
3
4
5
6
7
8
div{
    background: white;
    color: black;
}
div::selection{
    background: red;
    color: yellow;
}