Day 10 css补充

滚动文字

<marquee></marquee>

啊这,太糟糕了.

粘性定位

相当于平时是relative,在用户滚动到一定地步时转换为fixed.这个一定地步一般由top down left right来定.

 position: sticky;
 top: 0;

最小高度

min-height: value;

在IE6及以下的浏览器版本中,是不支持这行代码的.
IE6 及以下 height 就相当于 min-height 的作用.

权重

css中,权重最高的并不是行内样式,而是样式后面加!important;加了这个的代码会使最高权重的.

伪元素选择符

目前学习的伪元素选择符仅是针对对象作用的,伪元素的的标准语法为 元素::con;,将某种特殊样式结构添加到选择器.

 div {
            width: 400px;
            height: 300px;
            border: 4px solid #000;
        }

        div::first-letter {
            /* 第一个文字 */
            color: red;
            font-size: 80px;
            font-weight: 900;
        }
        div::first-line{
            /* 第一行 */
            background-color: yellow;
        }
        div::selection{
            /* 当文字被选中的时候 应用的样式 */
            color:#fff;
            /* font-size: 40px;   这一个没有作用  */
            background-color: red;
        }
    </style>

<div>
        V社的RPG更新，真的弱智都已经溢出来了！
        明明是一个PVE的竞赛型排名，非要把玩家们逐渐开发出来的快乐体系一个又一个的删除、修改，既不愿花脑子去调整体系动态平衡，也不愿花心思去优化怪物和BOSS，生硬而蛮横的站在玩家对立面，以给玩家添堵为荣。
        我在V社身上看到垃圾暴雪的完美复刻！
    </div>

伪元素选择器

选择器语法:
标签a:nth-child(n) 必须满足两给条件:

1. 是a元素
2. 是父元素的第n个元素

  /* 
            :nth-child(n) 
            选择的第几个子元素
         */
        li:nth-child(4){
            /* 首先必须是一个 li  然后必须是它父元素的第几个子元素 
                只有这两个条件同时满足 才会选中这个元素
             */
            background-color: #999;
        }
        div p:nth-child(3){
            /* 1、首先是一个 p 标签  
                2、是它自己的父元素里面的第 3 个子元素
                这两句话非常重要 ！！！一定要记住  以后用 nth-child 选择器的时候 念两遍准没错
             */
            background: #f40;
        }

<div class="box">
        <div>
            <ul>
                <li>1</li>
                <li>2</li>
                <p>这是 ul 里面的 p</p>
                <li>3</li>

                <li>4</li>
                <li>
                    <span>5</span>
                </li>
            </ul>
            <p>
                这是 box 里面第一个  div 里面的 p 标签 
            </p>
        </div>
        <div>
            <p>
                这是 box 里面第二个  div 里面的 p 标签 
            </p>
            <ul>
                <li>1</li>
                <li>
                    <span>2</span>
                </li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <!-- div p:nth-child(3)   -->
            <p>
                这是 box 里面第二个  div 里面的 p 标签 
            </p>

        </div>
    </div>