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

转载于:https://juejin.im/post/5c84aed3f265da2d8410b81b