哇~这里有最全的css选择器使用规则
要想将css样式应用于html标签，首先要找到该目标标签
在css中，执行这一样式规则的称为选择器
基础选择器
id选择器
id选择器使用‘#’进行标识，后面紧跟html标签的id属性值
一张页面中的html标签的id属性值是唯一的
#mydiv {font-size:12px;color:red;}页面启动后，该样式会应用在下面的标签元素上
<div id = 'mydiv'>id选择器</div>类选择器
类选择器使用英文标点'.'进行标识，后面紧跟html标签的class属性进行样式设计
它最大的优势在于可以同时设定相同样式的html标签，例如
.myclass {color:blue;}该样式应用于下面的html标签
<div class = 'myclass'>类选择器</div>
<p class = 'myclass>段落</p>限定式选择器
限定式选择器由两个选择器构成
其中一个是标签选择器，另一个是类选择器或者id选择器，中间没有空格
中间是没有空格的，例如：
div#mydiv {...}//id属性为“mydiv”的div标签设置样式
p.myclass{...}//class属性为“myclass”的p标签设置样式后代选择器
后代选择器用来选择html标签元素的后代的，其写法是将父级标签写在前面，后代标签写在后面，中间用空格隔开，例如：
div p {...} //父亲为div盒子的所有p标签
div #mydiv{...} //父亲为div盒子的所有id属性为‘mydiv’的元素
div .myclass{...}//父亲为div盒子的所有类名为‘myclass’元素并集选择器
并集选择器是通过逗号将多个选择器连接起来形成的，任何形式的选择器都可以作为并集选择器的一部分，通常使用在某些选择器定义样式完全或者比分形同的情况，例如：
h1,span#myspan,.mydiv {color:pink}//h1,所有id名为myspan的span标签和类名为mydiv的标签设置相同的样式通配符选择器
通配符选择器用‘*’表示，它是所有选择器中作用范围最广的，能匹配页面中的所有html标签元素
注意：正因为它的作用范围最广 能一下子选择所有的标签元素和设置它的样式，才造成了他低效率和缓慢的缺点，不利用搜素搜索引擎优化，不建议使用，解决办法是使用并集选择器
其他特殊选择器
以下举例的内容，其他标签以此类推，重在于理解
| 选择器 | 例子 | 描述 |
|---|---|---|
| > | div>p |
选择父元素为div标签的p标签（p标签必须是div标签的直接子元素） |
| + | div+p | 紧跟在div标签后面的p标签（不是内部，可以理解为兄弟元素） |
| ~ | p~ul | 选择具有相同父元素中位于p标签之后的ul标签（p和ul属于兄弟元素，他们有同一个父元素，该选择器选择的是紧挨着p标签的ul标签，给它设置样式） |
| [attribute] | input[name] | 选择所有包含name属性的input标签 |
| [attribute=value] | input[name = "myname"] | 选择name属性为"myname"的input标签 |
| [attribute^=value] | input[name ^= "my"] | 选择name属性开头为"my"的input"标签 |
| [attribute$=value] | input[name $= "me"] | 选择name属性结尾为"me"的input"标签 |
| [attribute*=value] | input[name *= "na"] | 选择name属性包含为"na"的input"标签 |
| :link | a:link | 选择所有未被访问的超链接 |
| :visited | a:visited | 选择所有访问过的超链接 |
| :active | a:active | 选择所有活动的超链接 |
| :hover | div:hover | 选择所有鼠标悬停的div标签 |
| :focus | input:focus | 选择所有获得焦点的input标签 |
| :first-letter | p:first-letter | 选择p段落中的首字母 |
| :first-line | p:first-line | 选择p段落中的首行 |
| :first-child | p:first-child | 选择有父级标签且与之相邻最近的第一个子标签p |
| :last-child | p:last-child | 选择有父级标签且与之相邻的最后一个子标签p |
| :before | p:before{content:"测试"} | 在每个<p>标签的内容之前插入文字“测试” |
| :after | p:after{content:"测试"} | 在每个<p>标签的内容之后插入文字“测试” |
| :first-of-type | div p:first-of-type | 选择div标签里面的第一个p标签 |
| :last-of-type | div p:first-of-type | 选择div标签里面的最后一个p标签 |
| :nth-child(n) | li:nth-child(2) | 选择其父元素的第二个li标签 |
| :nth-last-child(n) | li:nth-last-child(2) | 选择其父元素的倒数第二个li标签 |
| :empty | div:empty | 选择没有子元素的div标签 |
| :not | li:not(:last-child) | 选择除去最后一个li元素的其他所有li标签 |
这里要区分一下
nth-child （n）和 nth-of-type
相同点：nth-child（n）和nth-of-type都是在父元素下寻找我们想要的子元素（不包含子元素的子元素）
我们给出一个盒子，里面放一些元素作为研究对象
<div>
<p>段落</p>
<span>我是1</span>
<span>我是2</span>
<span>我是3</span>
</div>区别：nth-child（n）不区分标签类型，即不限定类型，它会将指定标签下的子元素按照原定顺序排列,例如：
div:nth-child(1) {
bacgronud-color:pink;
}
div:nth-child(2) {
bacgronud-color:yellow;
}以上代码结果表示，<div>中有两种类型的标签，但是nth-child选择了p标签设置了背景颜色为粉色，span标签背景颜色为黄色，说明nth-child（n）没有受类型的影响
如果用nth-child（n）来单独选择div标签中满足条件的span标签呢？会是什么结果
div span:nth-child(1) {
background-color:purple;
}事实证明不能被选中，因为nth-child是不限定类型的，也就是说他是按照父元素的子元素的排列来判定谁是第一个，谁是第二个，此处因为父元素div的第一个子元素是p标签，所以span不能被选中
但是我们就想选中属于div盒子的第一个span呢 ？现在nth-of-type就很有用了
用法如下：
span:nth-of-type(1) {
background:green;
}显然，此时就能选中第一个span，这说明nth-of-type可以选择指定类型的元素，很好的解决了nth-child在上面遇到的问题