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;
}
复制代码