/*元素选择器*/
ul {
padding: 0;
margin: 0;
width: 450px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul:after { /*子块撑开父块*/
content:''; /*在子元素尾部添加空内容元素*/
display: block; /*并设置为块级显示*/
clear:both; /*清除二边的浮动*/
/*visibility: none; !*hidden也行*!*/
/*height: 0;*/
/*_height: 1%; !*针对IE*!*/}
li { list-style: none; /*去掉默认列表项样式*/
float: left; /*左浮动*/
width: 40px; /*设置宽度*/
height: 40px; /*设置高度*/
line-height: 40px; /*文本垂直居中*/
text-align: center; /*文本水平居中*/
border-radius: 50%; /*设置边框圆角*/
background: skyblue; /*背景色天蓝*/
margin-right: 5px; /*每个球之间的右外边距*/}
/*:before:在指定选择器之前插入,默认为行内元素*/
ul:before {/*插入文本*/content: 'PHP中文网';
/*转为块元素*/ display: block; }
ul:before {/*转为块元素*/display: block;
/*content: url(../html/images/5.jpg);*/
/*content: ''; */
/*只有将图片设置为背景才可以设置大小*/
/*background-image: url(../html/images/5.jpg);*/
/*background-size:100px 100px;*/
/*height: 100px; */
/*width: 100px;*/}
/*:after:在指定元素的后面添加元素,默认为行内元素,可以是文本,图像,甚至视频等*/
ul:after {/*content:'m.sbmmt.com';*/
/*color:red;*/}
/*:first-child:选择父元素中的第一个子元素*/
/*注意:当前页面中只有一个ul元素,所以可以省略父级ul*/
ul li:first-child {
background-color: brown;}
/*:last-child:选择父元素中的第一个子元素*/
ul li:last-child {
background-color: lightgreen;}
/*:only-child:选择是当前父元素中的唯一子元素的元素,IE不支持*/
p:only-child {
/*二个div中,只有第一个div中仅有一个<p>子元素,所有只选中了第一个div中的<p>*/
/*color:red;*/}
/*only-of-type:选择父元素下的唯一的<p>元素,与only-child不同之处是指定了子元素的类型(标签名称)*/
p:only-of-type {
/*先把上面的only-child注释掉,执行后你会发现,第三个div中的p也会选中,因为它是指定了p类型的唯一子元素*/
color:red;}
only-child和only-of-type的区别:
1.共同点: 都是选择父元素中的唯一子元素;
2.区别: only-child并不限定子元素的类型,only-of-type:限定了子元素的类型,如必须是p标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.伪类选择器</title> </head> <body> <ul> <li id="item1">1</li> <li>2</li> <li class="green red">3</li> <li>4</li> <li>5</li> <li id="item2">6</li> <li>7</li> <li class="php css">8</li> <li>9</li> <li>10</li> </ul> <div> <p>我是当前div元素中的唯一子元素</p> </div> <div> <p>我是当前div元素中的第一个子元素</p> <p>我是当前div元素中的第二个子元素</p> </div> <div> <p>我虽然是div下唯一的类型为p的子元素</p> <h4>我是div下的另一个子元素h4</h4> </div> </body> </html>
以上就是css伪类选择器的详细内容，更多请关注php中文网其它相关文章！
前端(VUE)零基础到就业课程：点击学习
自己动手写 PHP MVC 框架：点击学习
