CSS选择器

CSS选择器

基本选择器：1.元素选择器 2.类选择器 3.ID选择器

4.通配符选择器：格式 “”+{声明块}，如：{color:red;},“*”代表一个或多个字符 5.并集选择器（组合选择器）：格式 元素或类或id+“,”+元素或类或id+“,”+...+{声明块}

如：h1,h2,h3,.cc{color:red;}

层次选择器

• 子级选择器：格式 父级元素名称+“>”+子级元素名称+{声明块}，如：div>p{color:red;}
• 后代选择器：格式 祖先元素名称+空格+后代元素名称+{声明块}，如：div p{color:red;}
• 兄弟选择器：格式 A元素名称+“+”+B元素名称+{声明块}，选择A元素后面的B元素，AB之间不许有其它元素，如：div+p{color:red;}
• 通用选择器：格式 同级元素A+“~”+同级元素B+{声明块}，表示选择与A元素同级别的所有B元素（B的位置是在A后面） 如：div~p{color:red;}

伪类选择器

动态伪类选择器：

未访问的情况下    a:link{color:black;}  
鼠标悬停         a:hover{color:deep;}
鼠标点击时       a:active{color:green;}
点击后           a:visited{color:green;}
a:focus{color:blue;}多用于输入框或链接

注意：1.hover是可以用于多个元素身上的，但其它三个只能用于拥有点击功能的元素上 2.IE7以前的版本不支持focus,IE6以前的不支持hover、active

以上五种写的时候有顺序要求：

A: link, visited, focus, hover, active

B: visited, link, focus, hover, active

结构伪类选择器:

格式:元素名称+":nth-child(n)"+{声明块}
例子: section:nth-child(2){color:deeppink;}

表示选中html里的第二个section元素,文字设置为deeppink

选中第一个
格式:元素名称+":first-child"+{声明块}
例子: p:first-child{color:red;}

选中最后一个
格式:元素名称+":last-child"+{声明块}
例子: p:last-child{color:red;}


选中奇数项
格式:元素名称+":nth-child(odd)"+{声明块}
例子:section:nth-child(odd){color:deeppink;}

选中偶数项
格式:元素名称+":nth-child(even)"+{声明块}
例子:section:nth-child(even){color:deeppink;}

伪元素选择器

元素后面加内容
格式:元素名称+":after"+{content:"要添加的内容";}
例子:  i:after
        {content:"姓名";}


元素前面加内容
格式:元素名称+":before"+{content:"要添加的内容";}
例子:  i:before
        {content:"姓名";}


元素第一行添加样式
格式:元素名称+":first-line"+{声明块}
例子: p:first-line{color:red;}


元素第一个字母或第一个汉字
格式:元素名称+":first-letter"+{声明块}
例子: p:first-letter{color:red;}


注:为了解决兼容性,伪元素选择器,建议打两个冒号,如： p::first-letter{color:red}