CSS 选择器 and 伪类/伪元素

CSS 选择器优先级：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性

伪类选择器，分为：链接伪类选择器，结构(位置)伪类选择器，目标伪类选择器

链接伪类选择器： 一定要将顺序搞正！ *** LVHA*** ===> LV 好！

a:link{} /*点击超链接之前*/
a:visited{} /*链接被点击之后*/
a:hover{}
a:active{} /*点击不松手的时候*/
a:focus{} /*是某个标签获得焦点时的样式（比如某个输入框获得焦点）*/

结构(位置)伪类选择器：

<ul>
	<li>第一个</li>
	<li>第二个</li>
	<li>第三个</li>
	<li>第四个</li>
</ul>

li:nth-child( 参数 ){} /*
	如果参数为 odd 时 表示选取所有的奇数位 li
	如果参数为 even 时 表示选取所有的偶数位 li
	如果为 n 时 相当于自动从 0-4乘以 n 选取所有 li
	为 2n 时，选取 0 2 4 8
	为 2n+1 时，选取 0 3 5 7
	里面的参数为 几 就选择第几个
*/
li:first-child{} /*选择第一个*/
li:last-child{} /*选择最后一个*/

目标伪类选择器：

先设置锚点，选择某一个锚点页面跳转至此，跳转后被选择的该锚点的就可以为目标

<a id="catlog" href="#catlog">商品分类</a>
<a id="about" href="#about">联系我们</a>
<a id="contact" href="#contact">关于我们</a>

<div id="catlog">商品分类</div>
...

a:target {
 color: #fff;
 background: #fa7a20; 
}

伪元素
before：从被选择元素前面添加。。。 也可以写成 ::before
after：从被选择元素后面添加。。。 也可以写成 ::after
:: first-letter 选择第一个字 ； ::first-line 选择第一行； ::selection 鼠标括起来选中的字体

复合选择器分为：交集选择器，并集选择器，后代选择器，子元素选择器，属性选择器

交集选择器：

div.log{XXXXXXX}
<div class="log"></div>
<div class="title"></div>

并集选择器：

.log, .title{}
<div class="log"></div>
<div class="title"></div>

后代选择器： 选择 后代的所有，包括直系亲儿子，孙子，重孙等

.con ul li a{}

子元素选择器： 只能选择直系亲儿子，孙子，重孙不能选择

.con > ul > li > a {}

属性选择器 ：根据标签的属性进行选择

input[type="text"]{}     /*寻找input 类型为text的元素*/
input[class*="titles"]{}    /*寻找类名包含titles的元素*/
input[class^="tit"]{}     /*寻找类名以tit开头的元素*/
input[class$="les"]{}     /*寻找类名以les结尾的元素*/