CSS选择器

2016-11-26 本文已影响30人曼路x_x

title: CSS选择器
date: 2016-11-14 08:50
tags: CSS

0x00 基础选择器

通配选择器

设置所有标签使用相同样式
如: *{ };

不推荐通配符选择器，因为他是性能最低的一个选择器。

标签选择器

为所有相同标签设置相同样式
如: p{ };

类选择器

为一组相同的标签设置相同的样式
如: .classname{ };

ID选择器

ID选择器在页面中只能被调用一次
如: #idname{ };

0x02 组合选择器

群组选择器

如: p , body , img , div {}

相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

如：p + p { color:red;}

通用兄弟选择器

匹配某元素之后的所有兄弟元素。
如: h2~a { }

包含（后代）选择器

如： body ul li {}

子元(子代)素选择器

如: div > p{}

标签a必须跟在h2之后(不一定紧跟),当然，前提是他们拥有相同的父元素。

子代选择器和后代选择器的区别

后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。
子选择器只对直接后代有影响的选择器，而对“孙子后代”以及多层后代不产生作用。

0x03 状态伪类选择器

定义样式在标签的状态之上，而不是标签本身

a:link {}     #点击前  
a:hover {}    #鼠标悬停时  
a:focus {}    #获得聚焦时  
a:active {}   #点击时  
a:visited {}  #点击后

下面的元素状态伪类，通常用于表单中，如：
:enabled,:disabled,:checked(只用于单选按钮和复选框)

0x04 目标伪类

:target

通常设置用于锚点被选中时的样式。

<p><a href="#box">点我旋转放大Box</a></p>
<div id="box"></div>

//CSS 
#box:target {
    border:4px solid red;
    transform: rotateZ(60deg) scale(1.8);
    transition: all 4s;
}

0x05 否定伪类

:not(selectoe)

匹配非指定/选择器的每个元素。

body:not(first-chid){}
input:not([type=text]){}

0x06 结构化伪类

:first-child

:first-of-type

匹配父元素的所有该子元素类型中第一个出现的元素.

div :first-of-type {
  background-color: lime;
}

(注意div后面的空格，这使得element变为了div的所有后代元素)

:last-child

:last-of-type

表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。

匹配在 p 元素内部的最后一个 em 元素:

p em:last-of-type{
    //
}

:nth-child(an+b)

如:nth-child(2n)等价于nth-child(even),nth-child(2n+1) 等价于 nth-child(odd).或者是nth-child(3n)

:nth-last-child(an+b)

:nth-of-type(an+b)

匹配一个在文档树中位置为an+b-1 且和伪元素前名字一样的元素,想在不受同胞异类元素和父元素影响保证自己选择相同类型得元素，这个伪元素更加灵活实用.

0x07 伪元素选择器

::first-line {}

选取某元素中的第一行

::first-letter{}

选择某元素中的第一个字或首字母

:: selection

应用于文档中被用户高亮的部份

0x08 生成性内容

::after
::before

0x09 属性选取器

属性名选择器

如： img[title] {color:red}

属性值选择器

如: img[title="red floewr"] { }

`[attr~=value]`

`[attr|=value]`

`[attr^=value]`

`[attr$=value]`

`[attr*=value]`

0x0A 选择器的优先级

行内样式(1000) --> ID选择器(100) --> 类选择器(10) --> 标签选择器(1) --> 全局选择器(0)

参考文档:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-of-type