訪問內部html標記

我得到了相同的前端工作來完成我需要應用bootstrap的地方。不幸的是，我並不是一個前端開發者：P。無論如何，在這裏我的臉被描述如下問題：訪問內部html標記

我的HTML：

<div class="container-fluid hidden-xs"> 
    <div class="row"> 


     <div class="col-xm-12 visible-xs hidden-sm hidden-md"> 
      <a href="~/TechRoom/Information?eventName=Glassware"> 
       <p class=" CompetencyUserStory" style="height:222px; width:110%;"> 
        <img src="~/Images/TechRoom/google-glass.jpg" style="height:222px; width: 107.6%; margin-left:-15px;" /> 
       </p> 
      </a> 
     </div> 
     <div class="col-md-4 hidden-sm hidden-xs"> 
      <a href="~/TechRoom/Information?eventName=Glassware"> 
       <p class=" CompetencyUserStory"> 
        <img src="/Images/TechRoom/google-glass.jpg" style="height:304px; width: 104.3%; margin-left:-15px;" /> 
       </p> 
      </a> 
     </div> 
     <div class="col-sm-6 visible-sm hidden-md hidden-xs"> 
      <a href="~/TechRoom/Information?eventName=Glassware"> 
       <p class=" CompetencyUserStory"> 
        <img src="/Images/TechRoom/google-glass.jpg" style="height:304px; width: 104.4%; margin-left:-15px;" /> 
       </p> 
      </a> 
     </div> 
</div> 
</div>

我的CSS：

.CompetencyUserStory { 
    background: rgba(7, 6, 6, 0.0980392); 
    display: inline-block; 
    cursor: pointer; 
    text-overflow: ellipsis; 
    overflow-y: hidden; 
    transition: background 0.2s ease-in-out 0s; 
    width: 90%; 
    height: 304px; 
}

在這裏，我已經三次使用了相同的HTML只是設置的緣故圖像尺寸以不同的屏幕尺寸顯示。我也使用內聯的CSS。

現在我真的想在這裏提升是獲得這樣的內嵌CSS的車程（不把這些內聯CSS到額外的課程），並沒有三次寫相同的HTML爲不同的屏幕尺寸只爲求一個圖像。請爲我提供一些幫助來改進。
我怎麼能訪問img標籤應用不同的CSS，例如說

.col-sm-6 col-md-4 hidden-xs > a > p > img {height:304px; width:100%;}這是行不通的。

來源

2014-10-31 Riki

看看[媒體查詢（http://css-tricks.com/css-media-queries/） – Azrael 2014-10-31 11:03:59

您是否嘗試過轉換的內聯命令樣式表聲明？ – 2014-10-31 11:04:27

你快到了。但是錯過了CSS中的img元素。

使用「.CompetencyUserStory img」而不是「.CompetencyUserStory」

試試下面的代碼。

.CompetencyUserStory img { 
    background: rgba(7, 6, 6, 0.0980392); 
    display: inline-block; 
    cursor: pointer; 
    text-overflow: ellipsis; 
    overflow-y: hidden; 
    transition: background 0.2s ease-in-out 0s; 
    width: 90%; 
    height: 304px; 
}

來源

2014-10-31 11:08:41

訪問內部html標記

回答

相關問題