css.md

滚动条

overflow-x: scroll;
overflow-y: hidden;

固定元素不被挤压

flex-shrink: 0;

换行

https://www.cnblogs.com/gxywb/p/13083540.html

1. 强制不换行

div{
	white-space:nowrap;
}

2. 自动换行

div{
    word-wrap: break-word;
    word-break: normal;
}

3. 强制英文单词断行

 div{

    word-break:break-all;

 }

4. \n 换行

white-space: pre-wrap

伪类选择器

伪类选择器都是以 : 开头

伪类选择器也是一种选择器,所以可以单独使用,但是单独使用代表给所有元素都加上效果,所以我们一般会配合交集选择器一起用,例: .box:hover 代表既要满足有类box,又要满足悬停时才应用的样式

:xxx-child 用来找到某个元素

  • :first-child:找到第一个子元素
  • :last-child:找到最后一个子元素
  • :nth-child:找到某个子元素
    • 可以写n: 代表所有
    • 可以写mn: 代表m的倍数
    • 可以写n+m: 代表从m开始
    • 可以些-n+m: 代表1到m个
    • 可以写even: 代表偶数
    • 可以写odd: 代表奇数

注意:它不是说找到某个子元素,而是找到在父元素中是第几个子元素!

例:

<style>
    li:first-child{
        color:red;
    }
</style>
<ul>
    <span>我是span</span>
    <li>我是li</li>
</ul>

<!-- 以上代码,没有元素能把文字变为红色 -->

:xxx-of-type

它的用法跟 xxx-child是一模一样的

:xxx-of-type:就是找到自己那个空间里的第几个,而不要求在父元素中是第几个子元素