css編寫要點總結

css選擇器

• 後代選擇器： 父元素 子元素{}
• 子元素選擇器: 父元素>子元素{}
• 僞類選擇器：
  • :link 連接沒有被訪問時
  • :active 鼠標點中激活連接那一下
  • :visited 連接被訪問事後
  • :focus 元素成爲焦點時
  • :hover 鼠標懸浮在連接上時
  • ::selection 段落選中
• 僞元素選擇器：
  • :first-letter 元素中的文字的首字母或第一個字
  • :first-line 元素的第一行文字
  • :before 在某個元素以前插入一些內容
  • :after 在某個元素以後插入一些內容
• 兄弟元素選擇器：
  • A + B A後的第一元素爲B時選中
  • A ~ B A後的全部B元素被選中
• 否認僞類： :not()
• 子元素選擇器：
  • A:first-child 第一個元素爲A元素時選中
  • A:last-child 最後一個爲A元素時選中
  • A:first-of-type 選中第一個A元素
  • A:last-of-type 選中最後一個A元素
  • A:nth-of-type(n) 選中第n個A元素

媒體查詢

/*屏幕尺寸小於300px*/
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
/* 豎屏 */
@media screen and (orientation: portrait) {
	
}
/* 橫屏 */
@media screen and (orientation: landscape) {

}
複製代碼

placeholde樣式設置

input::-webkit-input-placeholder{ /*WebKit browser*/

}

input::-moz-input-placeholder{ /*Mozilla Firefox*/

}

input::-ms-input-placeholder{ /*Internet Explorer*/ 

}
複製代碼

文本超出隱藏顯示

.ellipsis{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
複製代碼