1.基本选择器 /*元素选择器*/ul { padding: 0;margin: 0;width: 450px;border: 1px dashed #666;padding: 10px 5px;}ul:after { /*子块撑开父块*/content:''; /*在子元素尾部添加空内容元素*/display: block; /*并设置为块级显示*/clear:both; /*清除二边的浮动*/}li { list-style: none; /*去掉默认列表项样式*/float: left; /*左浮动*/width: 40px; /*设置宽度*/height: 40px; /*设置高度*/line-height: 40px; /*文本垂直居中*/text-align: center; /*文本水平居中*/border-radius: 50%; /*设置边框圆角*/background: skyblue; /*背景色天蓝*/margin-right: 5px; /*每个球之间的右外边距*/}
/*id选择器:选择页面中唯一的元素,推荐同一个id标识符只允许用一次*/
#item1 {/*background-color: red;*/}
/*类选择器:选择页面中具有同一类样式的全部元素*/
.green {/*background-color: lightgreen;*/}
/*父子选择器:元素之间是层级的关系,所选元素有共同的父级*/
ul li { /*层级关系用空格表示*/color: white;}
/*通配选择器:选择指定父级下面的所有层级的元素*/
ul * {/*border: 1px solid black;*/}
/*子元素选择器 >: 选择父元素下所有的li元素,等价于标签选择器,所以它的优先级低于class,id*/
立即学习“前端免费学习笔记（深入）”；
ul > li { /*等价于: ul > * {} *//*background-color: blue;*/}
/*相邻兄弟选择器 +:仅选择相对于它后面的第一个兄弟节点 */
#item2 + li {/*background-color: black; /*只有第7个小球变黑*/*/}
/*全部兄弟选择器 ~ :选择相对于它后面的全部兄弟节点 */
#item2 ~ li {/*background-color: coral; /*亮橙色*/*/}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
以上就是css基本选择器的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610776.html
微信扫一扫 
支付宝扫一扫 
