2017/7/22 学习心得 css3

1、选择器

以前学过的：

div+p:选中div后面的第一个p

div～p：选中div后面所有的p

属性选择器[] 通过标签属性来选择器：

E[title] :选中页面的E元素，并且E需要带有title属性

E[title="123"] 带有title属性并且值为123

属性以aa开头：

E[title^="aa"]

属性以aa结尾：

E[title$="aa"]

属性包含aa：

E[title*="aa"]

2、伪类选择器

:hover 鼠标经过

:link 正常状态

:active 点击

:viaited 点击之后的状态

li:first-child 第一个子元素

li:last-child 最后一个子元素  

li:nth-child(n) 第n个，如果只是n，那就表示全部，0以上所有整数

li:nth-child(odd)  奇数

li:nth-child(even)  偶数

li:nth-child(-n+5)  前五个

li:nth-last-child(-n+5)  后五个

以上，所选到的类型必须是选到的制定类型li，否则无效

3、empty伪类

如果div是空的就会被选中（没有内容）

div:empty

4、target伪类

要配合锚点使用，表示被激活的状态

h2:target

<a href="#title">  <h2 id="title"> href对于

点击a连接时 h2对应的h2:target状态被激活，点击下一个，当前状态消失

5、伪元素

顾名思义：假的标签

标志性符号 双冒号 ::

通过css模拟出html效果

span::after  在之后添加

span::before 在之前添加

必须有content属性

6、伪元素选择器

li::first-letter 选中第一个字母

div::first-line  选中第一行

p::selection 选择区域样式，一般设置背景颜色和字体颜色