web前端10

CSS选择器：

css选择器有：ID选择器，类选择器，标签选择器，后代选择器，交集选择器，并集选择器，通配符选择器，伪类选择器

通配符选择器；*{} （*，指所有的标签，由于范围广，所以优先级比较低）

标签选择器：h2{ color: #ccc;}

类选择器：.one{color:blue!important;}（/*一个网页可以重复使用。标记加了!important后会优先生效,!important只生效于它所更随标签之后,要在;号内*/）

                                                                         !important(代表最重要的东西，但不推荐使用，优先级最高)

子代选择器：.dad>p{color: green;}

id选择器：#wrap{width: 500px;height: 500px; color: purple;}（id选择器具有唯一性，一个网页中同样的id只能出现一次）
后代选择器：div p{width: 500px;height: 500px; color: green;}（有作用域之说）有作用域之说

交集选择器：
div.box{width: 500px;height: 500px;color: yellow;}（div.box：名字叫做.box的div ）
div#wrap{width: 500px;height: 500px; color:brown;}
并集选择器：
.box,.txt{width: 500px;height: 500px; color:white;}（两个选择器之间要以“,”(英文的逗号)隔开）

p,div{width: 300px;height: 300px;color:gray;}

伪类选择器：（伪类选择器所创造出来的东西都会在父类选择器里面,相对于父类的内容而变动位置）
.box:before{content: ;display: block;width: 50px;height: 50px;background: black;}（before：在之前插入）

.box:after{content: ;display: block;width: 200px;height: 200px;background: green;}（after：在后面插入。display可以设置显示隐藏,块级,行级,行内块级相互转换）

单独设置某一行的样式
设置第一个子元素的样式：.list li:first-child{color: red;}（伪类，匹配其它元素的第一个子元素，并为其设置样式）
设置最后一个子元素的样式：.list li:last-child{color: green;}（伪类，匹配其它元素的最后一个子元素，并为其设置样式）
设置偶数行子元素的样式：ul li:nth-child(2n){color: red;}

设置奇数行子元素的样式：ul li:nth-child(2n-1){color: green;}
设置某一行子元素的样式div:nth-child(序号)    （指同类中的第几个）

行内样式：<h2 class="one" style="font-size: 16px; color:;">唐家三少</h2>（在开始标签里写,不同的样式要以；隔开，每个样式都要以;（英文的分号）号结束。）


选择器的优先级：!important>行内样式>ID选择器>类选择器>后代选择器>并集选择器>标签选择器>交集选择器