CSS3学习笔记

名称

含义

举例

基本选择器

标签选择器

按照标签名称进行定位；

将样式应用于特定标签；

p{font-size:12px;}

h1{font-color:red;}

类选择器 .

用点.表示类选择器；

后面跟一个自定义的类名class=“name”；

将样式应用于类名相同的标签；

<style>

.name{font-size:12px;}

</style>

ID选择器#

#表示id选择器；后跟一个自定义id；

将样式应用于id值匹配的标签；

#myid{font-size:12px;}

通配选择器*

*表示通配选择器，后面什么都不用跟；

*表示将样式应用于所有标签；

*{margin:0;}

*{padding:10;}

组合选择器

包含选择器

后代选择器

空格表示包含选择器，将某个选择器和另一个选择器用空格隔开，表示选择第一个选择器内的所有的第二个选择器；使用空格作为结合符。与子元素选择器相比，>作用于元素的第一代后代，空格作用于元素的所有后代。

包含选择器不仅仅作用于儿子辈，孙子穷孙子，只要是辈包含的标签，全部适用；

div span{font-size:18px;}

表示div标签中包含的所有span标签，字体全都设置为18px；

#main p{font-size:14px;}

表示id为main的标签中的所有p标签字体，全都设置为14px；

子选择器>

儿子选择器

用大于符号(>)（子结合符），用于选择指定标签元素的第一代子元素；

如果是孙子辈的标签，则不会匹配，只匹配直接包含的子标签；

可以匹配所有的第一代子标签；

div>span{font-size:14px;}

匹配div标签下的第一代span标签，而不匹配孙子辈的标签；

可以匹配所有子辈标签；

相邻选择器+

第一个选择器指定前置元素，第二个选择器指定其后的第一个同级标签；

兄弟关系不能互换，兄在前，弟在后；

不管相邻的兄弟被嵌套了多少层，只要满足相邻的兄弟关系，就可以匹配；

p+h3{background:red;}

表示p后面紧跟着并列关系的h3，才会匹配，再往后的h3就不会 匹配了；

兄在前，弟在后：p前面的h3则不会匹配；

兄弟选择器~

第一个选择器指定前置元素，第二个选择器指定其后的所有同级标签；

兄弟关系不能互换，兄在前，弟在后；

兄弟选择器匹配其后的所有弟弟，相邻选择器只匹配其后相邻的弟弟；

p~h3{background:red;}

表示p后面的所有并列关系的h3，全都匹配；

兄在前，弟在后：p前面的h3则不会匹配；

分组选择器，

相当于多个选择器同时使用某种样式；

相当于集体声明；

h1,h2,h3,h4,h5{background:green;}

表示h1到h6的所有标签背景色都是绿色；

属性选择器

E[attr]

E表示标签名称；

attr表示属性名称；

匹配含有attr属性名称的E标签；

.nav a[id]{background=red;}

.nav表示class=“nav”的标签；

空格表示包含关系，也就是.nav所包含的各级所有匹配项；

a表示a标签；

[id]表示a标签中有id属性；

a[id][href]表示同时拥有id属性和href属性的a标签；

E[attr=”val”]

标签名称为E，并且含有名称为attr的属性，并且该属性的值为val；

p[id=”first”]表示拥有id属性，并且id属性的值等于first的p标签；

E[attr~=”val”]

标签名称为E，并且含有名称为attr的属性，并且该属性的值是一个列表（空格隔开），这个列表中含有val值；

<a href=”#”title=”i am a good boy”></a>

a[title~=”good”]就会匹配上面的a标签，因为该按标签的title属性是一个列表，列表中有5个元素，分别是i、am、a、good、boy，第四个元素正好匹配；

E[attr^=”val”]

标签名称为E，并且含有名称为attr的属性，并且该属性的值以val开头；

a[href^=”https”]将匹配链接到https网址的所有a标签，而不会匹配链接到http网址的a标签；

E[attr$=”val”]

标签名称为E，并且含有名称为attr的属性，并且该属性的值以val结尾；

a[href$=”png”]将匹配链接到png图片的所有a标签，而链接到jpg图片的链接和链接到网页的链接将不会匹配；

E[attr*=”val”]

标签名称为E，并且含有名称为attr的属性，并且该属性的值包含val；

a[href*=”baidu.com”]将匹配链接中含有baidu.com子字符串的所有a标签；

E[attr|=”val”]

标签名称为E，并且含有名称为attr的属性，并且该属性的值以val开头或者以val-开头；

a[lang|=”zh”]将匹配lang属性值以zh开头或者以zh-开头的的所有a标签；

伪类选择器

动态伪类

（鼠标事件）

动态伪类匹配页面的交互动作事件；

例如鼠标点击事件、鼠标悬停事件等；

a:link{color:gray;}没有被访问的链接前景色为灰色；

a:visited{color:yellow;}访问后

a:hover{color:green;}悬停

a:active{color:gray;}点击时

结构伪类

（索引查找）

: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元素里面没有任何内容

.post p:only-child表示，如果post只有这一个子元素p，就改变post的样式；

.post p:only-type表示，如果post中的p类型元素只有一个，就改变post的样式；

n表示从0开始的整数；

li:nth-child(n)所有li元素；

li:nth-child(3)第三个li元素；

li:nth-child(2n)下标为偶数的li元素；等价于li:nth-child(even)

li:nth-child(n+5)表示从第五个开始向后选择所有li元素；

li:nth-child(-n+5)表示选择下标为5/4/3/2/1/0的元素；

li:nth-child(3n+1)表示选择下标为1/4/7/10...的元素；

nth-last-child表示从后往前选；

p:nth-of-type(even)表示每隔一个p匹配一次样式；

状态伪类

（控件状态）

:enabled可用状态的元素

:disabled禁用状态的元素

:checked选中状态的元素

<input type=”text”>匹配input:enabled

<input type=”button” disabled=”disabled”>匹配input:disabled

<input type=”radio” checked=”checked”/>匹配input:checked

目标伪类

（锚点链接）

目标伪类的形式为E:target，它表示当选择匹配E的所有元素，并且匹配元素被相关URL指向；只有当URL指向该元素时，样式才生效；

div:target{background:red;}

在浏览器中输入URL并附加#red，以锚点方式链接到<div id=”red”>时，该元素会立即显示红色背景；