用css完成根據子元素不同書寫樣式

chuyao 發布于2019-08-30 15:55 / 2819人閱讀

摘要：我們需要達到的效果需要什么張圖片的，張圖片的，張圖片的樣式各不相同。

我們需要達到的效果：

需要什么

1張圖片的， 2張圖片的， 3張圖片的樣式各不相同。可以使用js完成子元素的判斷，但是這里我使用css來完成

核心知識點

使用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;
          }
        }
      }
    }

GPU云服務器云服務器 js中元素加載完成不同元素子元素個數子元素節點

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117123.html

CSS代碼重構與優化之路

摘要：代碼重構的目的我們寫代碼時，不僅僅只是完成頁面設計的效果，還應該讓代碼易于管理，維護。命名與備注命名是提高代碼可讀性的第一步，也是及其重要的一步。寫CSS的同學們往往會體會到，隨著項目規模的增加，項目中的CSS代碼也會越來越多，如果沒有及時對CSS代碼進行維護，CSS代碼不斷會越來越多。CSS代碼交錯復雜，像一張龐大的蜘蛛網分布在網站的各個位置，你不知道修改這行代碼會有什么影響，所以...

fou7 2019-08-29 12:27 評論0 收藏0
CSS代碼重構與優化之路

摘要：代碼重構的目的我們寫代碼時，不僅僅只是完成頁面設計的效果，還應該讓代碼易于管理，維護。命名與備注命名是提高代碼可讀性的第一步，也是及其重要的一步。寫CSS的同學們往往會體會到，隨著項目規模的增加，項目中的CSS代碼也會越來越多，如果沒有及時對CSS代碼進行維護，CSS代碼不斷會越來越多。CSS代碼交錯復雜，像一張龐大的蜘蛛網分布在網站的各個位置，你不知道修改這行代碼會有什么影響，所以...

不知名網友 2019-08-01 16:42 評論0 收藏0
css選擇器和jQuery選擇器

摘要：通用選擇器組合子和否定偽類對特異性沒有影響。選擇器大部分還是和選擇器保持了一致，但是有以下一些部分的改動第一個元素最后一個元素所有偶數元素，索引值從開始，第一個元素是偶數，第二個元素是奇數，以此類推。選擇器在書寫樣式和查找節點的時候，選擇器是必不可少的，所以了解選擇器的書寫方式和使用就顯得極為重要，本文主要分開講了css選擇器和jQuery選擇器； css選擇器大家都可能知道，在...

niuxiaowei111 2019-08-29 13:10 評論0 收藏0
Html知識點

摘要：和的區別表示只讀，只能用于文本框，不能修改內容，它的值可以隨表單提交給服務器表示該元素不可用，不響應事件，不能修改內容。同時不響應事件。通配選擇器屬性為的元素中，所有的子元素均采用該樣式。表示按照格式規則正常定位。1、企業應用計算模式主要有：CS模式（客戶端/服務器）和BS模式（瀏覽器/服務器模式） 2、html:超文本標記語言。以標記和子標記描述網頁元素。　　http：超文本傳輸協議。 3...

番茄西紅柿 2019-04-23 13:35 評論0 收藏0