CSS基础教程2——选择器
CSS基础教程2——选择器
其中基础选择器为标签选择、类选择器、id选择器、通配符选择器，进阶的选择器为后代选择器、子代选择器、并集选择器、交集选择器、伪类选择器。
标签选择器
标签名{css属性名:属性值;}
通过标签名找到页内所有的这类标签设置样式，标签选择器式一类而不是单独一个，无论嵌套关系多深标签选择器都可以找到。
类选择器
.类名{css属性名:属性值;}，使用类选择器要在需要设置样式的的标签中添加class="类名"。
通过类名找到页面内带有这类名的标签设置样式，标签中带有class属性，class的属性值为类名，一个标签可以同时有多个类，类之间用空格隔开，类名不能以数字和中划线开头，类名可以重复，一个类选择器里可以用于多个标签。
id选择器
#id属性值{css属性名:属性值;}使用id选择器要在需要设置样式的的标签中添加id="id名"。
通过id属性值找到页内这类id设置样式，主要与js使用，标签中带有id属性，id属性值在页内不能重复，一个标签只能带有一个id，一个id选择器中只能带有一个标签。
通配符选择器
*{css属性名:属性值;}
找到页内所有标签设置样式，一般用于去除标签默认的margin和padding。
后代选择器
选择器1 选择器2{css...}
后代选择器会找所有代级的选择器2，例如：你的爷爷可以找到你的爸爸可以找到你也可以找到你的儿子。
子代选择器
选择器1 > 选择器2{css...}
子代选择器只会找到本父级的下一代选择器2，例如：你的爷爷只能找到你的爸爸不能找到你，你的爸爸也只能找到你不能找到你的儿子，
并集选择器
选择器1,选择器2{css..}
一般用于标签选择器，整个页面中的两个标签都需要同一种样式，或者设置两个一样样式的类选择器或者id选择器，并集选择器可以理解成和的意思。
交集选择器
选择器1选择器2{css..}
一般第一个选择器为标签选择器第二个选择器为类选择器，表示满足第一个选择器的同时也满足第二个选择器，例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS选择器</title> <style type="text/css"> p.one{ color: red; } </style> </head> <body> <p class="one">这是一个段落</p> </body> </html>
交集选择器也可以理解成并且的意思，上例表示选择p标签并且类名为one的标签。
伪类选择器
伪类选择器有好几种，例如：
- link：未访问的链接
- visited：已访问的链接
- hover：鼠标移动到链接上
- active：选定的链接
这里以hover为例选择器:hover{css}表示,表示鼠标悬停时所展示的样式效果,其余伪类选择器只有效果有所区别写法一致。
结构伪类选择器
选择器:(first-child{css...}匹配父元素中第一个
选择器:last-child{css...}父元素中最后一个
选择器:nth-child(n这里的n为自定义的数字){css...}父元素的第n个
选择器:nth-last-child(n){}父元素中倒数第n个
结构伪类选择器用于不同行不同列有不同样式，例如奇数行和偶数行样式不同，正常我们要一行一行的使用类选择器，但是使用结构伪类选择器只需要用选择器:nth-child(2n)选择偶数行，选择器:nth-child(2n+1)选择奇数行。
emmet语法
通过简写语法，快速生成代码(一般按tab)，例如我需要输入background-color只需要输入bgc并且按下tab键即可。
