/*元素选择器*/
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:’www.php.cn’;*/
/*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中仅有一个
子元素,所有只选中了第一个div中的
*/
/*color:red;*/}
/*only-of-type:选择父元素下的唯一的
元素,与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标签
3.伪类选择器
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
我是当前div元素中的唯一子元素
我是当前div元素中的第一个子元素
我是当前div元素中的第二个子元素
我虽然是div下唯一的类型为p的子元素
我是div下的另一个子元素h4
以上就是css伪类选择器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610774.html
微信扫一扫 
支付宝扫一扫 
