1、手抄: CSS中常用的三种单位案例
编程: CSS中常用的选择器
/*标签选择器*/
ul { }
ul:after { /*子块撑开父块*/ }
ul li { }
/*id选择器*/
#item1 {}
/*类选择器*/
.item2 {}
/*属性选择器: 属性名*/
ul li[class] { }
/*属性选择器: 属性值*/
ul li[class="item2"] { }
/*属性选择器: 以指定属性值开头*/
ul li[class^="cat"] { }
/*属性选择器: 以指定属性值结束*/
ul li[class$="pig"] { }
/*属性选择器: 属性值中包含指定子串*/
ul li[class*="te"] { }
/*后代选择器*/
body ul li { }
/*子选择器*/
ul > li[class$="pig"] { }
/*相邻选择器*/
ul li[class$="pig"] ~ * { }
/*相邻兄弟选择器*/
ul li[class$="pig"] + li { }
/*群组选择器*/
h1, p { }
/*伪类选择器: 链接*/
a { }
/*访问前*/
a:link { }
/*访问后*/
a:visited { }
/*获取焦点时*/
a:focus { }
/*鼠标悬停时*/
a:hover { }
/*鼠标点击时*/
a:active { }
/*伪类选择器: 位置*/
/*选择集合中的第一个元素*/
ul li:first-child { }
/*选择集合中的最后一个子元素*/
ul li:last-child { }
/*按索引选择指定的元素,注意从1开始计数*/
ul li:nth-child(5) { }
/* 选择所有的偶数小球变色 */
/* 2n偶数, even偶数, 2n+1奇数, odd奇数*/
ul li:nth-child(even) { }
/*伪类选择器: 根据子元素数量*/
/*选择具有唯一子元素的元素*/
ol:only-child { }
/* 选择指定类型的唯一子元素 */
ol li:only-of-type { }
/* 倒数选择指定位置的元素 */
ul li:nth-last-child(3) { }
/*选择指定父级的第二个<li>子元素*/
ol li:nth-of-type(2) { }
/*选择页面中内容为空的元素*/
:empty { }
:empty:after { }
:empty:before { }