标签选择器笔记

应用css样式分为内联样式、内部样式、外部样式。内联样式写在标签内只针对自己的标签起作用。内部样式和外部样式都针对选择器的标签起作用。

<style>

/*样式的应用中,行内选择的样式优先级最高,ID选择器的优先级比类选择器和后代选择器的高*//*作用域:作用域小则优先级较高*/

*{  }通配符，优先级很低，一般用来去掉标签内不需要的样式

h2{ font-size: 18px; color: #red;} /*标签选择器*/

.one{font-size:25px; color: blue;}/*类选择器*/

#two{font-size: 12px;color: green;}/*id选择器*/

div p{font-size: 25px;color: cadetblue;}/*后代选择器*/

div.box{font-size: 30px; color: brown;}/*类交集选择器*/

div#wrap{ font-size: 15px;color: blueviolet;}/*id交集选择器*/

.box,.one{font-size: 10px; color: aliceblue;}/*并集选择器,以逗号隔开*/

.dad>p{color: green;}/*子代选择器 作用效果两级*/（区别于后代选择器，后代选择器可以作用多级，子代只能作用于两级）

.box:after{content:"" ; display: block; width: 200px; height: 200px; background: green;} /*伪类选择器之一*/

.box:before{content: "";display: block; width: 100px; height: 100px;background: black;}

/*::before

和

::after

这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动*/

</style>

优先级顺序有：！important---内联样式----ID选择器（ID具有唯一性，尽量不使用，避免脚本冲突）----类选择器----

类选择器的优先级比并选择器的优先级低。

伪类选择器：

:first-child选择某个元素的第一个子元素；:last-child选择某个元素的最后一个子元素；:nth-child()选择某个元素的一个或多个特定的子元素；:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；:nth-of-type()选择指定的元素；:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；:first-of-type选择一个上级元素下的第一个同类子元素；:last-of-type选择一个上级元素的最后一个同类子元素；:only-child选择的元素是它的父元素的唯一一个了元素；:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；:empty选择的元素里面没有任何内容。著作权归作者所有。

商业转载请联系作者获得授权,非商业转载请注明出处。

原文: http://www.w3cplus.com/css3/pseudo-class-selector ©w3cplus.com
first-child选择某个元素的第一个子元素；

last-child选择某个元素的最后一个子元素；

nth-child()选择某个元素的一个或多个特定的子元素，取决于括号内的元素；":nth-child(2n)”也等于":nth-child(even)"

nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

nth-of-type()选择指定的元素；

nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；

first-of-type选择一个上级元素下的第一个同类子元素；

last-of-type选择一个上级元素的最后一个同类子元素；

only-child选择的元素是它的父元素的唯一一个了元素；

only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；

empty选择的元素里面没有任何内容。
当然还有很多知识是我没掌握的，需要我更深入的区研究，去学习。

更多对样式的学习以后慢慢更新。