CSS Basic Selector

CSS Selector Base Selector

元素选择器类选择器ID选择器通配符选择器  匹配所有元素，一般用于兼容器格式：*+声明块例：*{color:red;}并集选择器格式：元素或类或ID+","+元素或类或ID+声明块例子：h1,h2,h3{color:red;}     p,.container,#box{background-color:deeppink;}

Hierarchy Selector

【子集选择器】格式：父级元素名称+">"+子级元素名称+声明块例子：div>p{color:red;}【后代选择器】格式：祖先元素名称+"空格"+后代元素名称+声明块例子：div p{color:red;}【兄dei选择器】格式：兄弟元素A+"+"+兄弟元素B+声明块例子：div+p{color:red;}注：只能选中元素A后面的第一个元素【通用选择器】格式：兄弟元素A+"~"+兄弟元素B+声明块例子：div~p{color:red;}注：表示可以选择元素A后面任意位置的同级元素

Pseudo class Selector

【动态伪类选择器】未访问格式：a +":"+"link"+声明块例子：a:link{color:black;}已访问(访问后）格式：a +":"+"visited"+声明块例子：a:visited{color:green;}悬停（鼠标停留在链接上时的样式）格式：a +":"+"hover"+声明块例子：a:hover{color:deeppink;}点击时格式：a +":"+"active"+声明块例子：a:active{color:deeppink;}以上四个伪类书写顺序A方案：link,visited,focus,hover,activeB方案：visited,link,focus,hover,active焦点框（多用于输入框肯链接，使用时声明顺序在第三位）格式：a +":"+"focus"+声明块a:focus{color:五光十色；}注：IE7以前是不支持:focus注：IE6以前是不支持:hover,active一次性生成层级结构标签：header>nav>a*10

Structure pseudo-Class selector

格式：元素名称+":nth-child(n)"+{声明块}例子： h1:nth-child(5){color:gray;}表示选中第5个h1元素，颜色为灰色表示选中第5个元素，并且满足是h1的情况，才会应用样式注：（n）中的n表示元素的位置格式：元素名称+":nth-of-type(n)"+{声明块}例子： h1:nth-of-type(5){color:gray;}表示选中类别为h1的第5个h1表示先筛选出所有的h1标签，然后在结果里选中第5个h1格式：元素名称+":first-child"+{声明块}例子： h1:first-child{color:gray;}表示选中第1个h1元素格式：元素名称+":last-child"+{声明块}例子： h1:last-child{color:gray;}表示选中最后1个h1元素格式：元素名称+":nth-child(odd)"+{声明块}例子： h1:nth-child(odd){color:gray;}表示选中奇数项(2n+1)格式：元素名称+":nth-child(even)"+{声明块}例子： h1:nth-child(even){color:gray;}表示选中偶数项(2n)[否定伪类选择器]格式：元素名称+":not(相应的选择条件)"+{声明块}例子： h1:not(:nth-child(3)){color:gray;}表示除第3个h1元素，都应用样式body>h2:only-of-type{......}表示body只包含一个h2类型元素时属性生效body>h2:only-child{......}表示body第一个子元素为h2类型时，属性生效

Pseudo element Selector

格式：元素名称+":"+"before"+｛content:"加的内容"｝例子：h1:before{content: "F51";}表示在元素前面加内容格式：元素名称+":"+"after"+｛content:"加的内容"｝例子：h1:after{content: "F51";}表示在元素后面加内容p:first-line{....}给p标签的第一行加样式属性p:first-letter{....}给p标签的第一个字加样式属性

CSS Basic Selector