使用css怎么根据子元素书写不同样式
这篇文章将为大家详细讲解有关使用css怎么根据子元素书写不同样式,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
10年积累的网站设计制作、网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站策划后付款的网站建设流程,更有和政免费网站建设让你可以放心的选择与我们合作。
核心知识点
使用css选择器完成子元素的判断
例子:
用css选择器匹配只有一个元素
div { &:last-child:nth-child(1) { // 相关样式 } }
很好理解:div下面即是最后一个元素也是第一个元素不就是只有一个子元素吗?
用css选择器匹配只有两个子元素
div{ &:nth-last-child(2):nth-child(2) { } }
依样画瓢:最后第二个元素也是第二个元素不就代表,这个div下只有两个元素吗
完成样式
html部分
{{item.name}}{{item.createTime}}{{item.fabulousNumber}}
css部分
.box { padding: 0.26rem; .header { display: flex; align-items: center; img { width: 0.58rem; height: 0.58rem; margin-right: 0.17rem; } } .bottom { display: flex; justify-content: space-between; align-items: center; color: #999999; font-size: 0.17rem; img { width: 0.17rem; height: 0.17rem; } } .content { display: flex; margin: 0.17rem 0; img { flex: 1; height: 1.37rem; width: 0; margin-right: 0.09rem; &:last-child { margin-right: 0; } &:last-child:nth-child(1) { height: 2.75rem; } } } }
什么是css
css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
关于使用css怎么根据子元素书写不同样式就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
分享名称:使用css怎么根据子元素书写不同样式
本文网址:http://scyanting.com/article/isjoco.html