CSS get an element use :nth-child() not :eq()

用 index 在重複元素中獲取一個元素

在 jQuery 是使用 :eq(2) ,雖然jQuery跟CSS選取器(selector)有很多相似之處,但還是有些差異,在CSS中要在重複元素中獲取一個元素是用偽類  :nth-child(2)

比如說我要指定定 Apple 的樣式為紅色:

我們可以這麼做,都可以達到相同效果:

同場加映

除了 :nth-child()還有其他用在取得元素的偽類,都很常用到優

  • :first-child
  • :second-child
  • :third-child
  • :last-child
  • :nth-child

參考資料:

CSS RWD 速查

Meta Viewport

 

CSS @media 參考裝置尺寸:

 

[CSS] 子容器無法撐開父容器 child overflows parent when parent width is 100 percent, parent div can not follow child width

css child overflows parent when parent width is 100 percent, parent div can not follow child width
CSS 當父容器寬為100% (無特殊設定即為100%),子容器寬度超出父容器,父容器無法被子容器撐大,而出現漏白現如下圖

解決方法在父容器中加上

範例檔案下載
download

CSS transition scale image 圖片縮放

今天很其怪用transition scale來改變容器大小沒問題
但對圖片就沒有效,上網找了了解決方法


img{
    /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1, 1); /* This is the scale for the normal size of the image.*/
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1, 1);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1, 1);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}


img:hover{
     /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-out;

  /* Webkit for Mozila Firefox */
  -moz-transform: scale(1.2, 1.2);
  -moz-transition-duration: 500ms;
  -moz-transition-timing-function: ease-out;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1.20, 1.20);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-out;
}


延伸閱讀:https://drujoopress.wordpress.com/2014/01/31/zoom-effect-using-css3-transition-scale/