伪类、伪元素和Css选择器优先级规则

一、伪元素选择器

        1、首字符伪元素选择器

        语法  选择器名称::first-letter{}

        使用前提：依附元素必须是块级元素

        div::first-letter {
            color: red;
            font-size: 30px;
        }

    <div class="box">bylk</div>

    <span class="box">bylk</span>

div标签的首字母生效了，span标签的首字母并未变化

2、首行伪元素选择器

 语法  选择器名称::first-line

div::first-line {
            color: red;
            font-size: 30px;
            margin: 6px;
        }

    <div class="box">bylkhlhmhlhlhlhlhlhlhlhlhlhlhlhlhlhl-lhlhlhlhhlhllhhlh-llhhlhllhhlhlhlhlhlhlhlhlhl hlhlhl
    </div>
    <br><br><br>
    <span class="box">bylkhlhmhlhlhlhlhlhlhlhlhlhlhlhlhlhl-lhlhlhlhhlhllhhlh-llhhlhllhhlhlhlhlhlhlhlhlhl hlhlhl</span>

可以看到哈  这个选择器也仅仅对块级元素有效，而且不管对窗口怎么缩放，都会自适应的将第一行选中并设计样式。

额外补充：英文只有在碰到连字符或者空格时才会换行，中文则没有这个要求，这个很好理解，一串字母无论在怎么长在没有连字符或者空格的条件下也只会被认为是一个单词。

3、自定义前置伪元素选择器

 语法  选择器名称::before{} 使用前提：不管是否需要自定义内容，必须使用content属性

                a::before{

                    content:"666";

                    color:red;

                    width:100px;

                    height:50px;

                    display:inline-block;

                }
                

效果如下：

4、自定义内容后置选择器 ::after{}

                a::after{

                    content:"666";

                    color:red;

                    width:100px;

                    height:50px;

                    display:inline-block;

                }

效果如下

二、伪类选择器

            1、结构性伪类选择器

                    ul :nth-child(1){ }

• 小括号中可以放数字从一开始表示第一个；
• 着重点是位置第一个
• 小括号里可以放odd（表示奇数 ）even（表示偶数）
• 小括号里还可以放自定义的表达式其中n从0开始，例如：
  • 2n+1，表示奇数
  • -n+3，表示前三个

           另外对于第一个和最后一个，css还提供了特定的表示方法：

            ul li:nth-child(1)<----->first-child 查找第一个元素

            ul li:nth-last-child(1)<---->last-child 查最后一个元素

                        <ul>

                            <div>div</div>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                            <li></li>

                           

                        </ul>

                        在上面这种这种情况下 ul li:nth-child(1)这个选择器将找不到元素

           

                :nth-of-type(1){}  

• 着重点是类型
• 括号中可以放数字从一开始表示第一个
• :first-of-type{}<------>nth-of-type{}
• :nth-last-of-type() 括号中可以放数字从一开始表示最后一个

            2、UI状态伪类选择器

                :hover  悬停状态

                    ul li:hover {

                    }

                :focus  焦点状态  

                 例如input进入键入状态

                    input:focus{

                        backgtound:red

                    }

                :checked 选中状态

                :disabled   不可用状态

            3、其他伪类选择器

            :not   过滤掉某个或某些选择器

             ul li:not(.java):not(.php)   排除某些的时候连续使用

 

   

    三、css选择器优先级的规则

        1、选择器写的越准确（越长），优先级越高

   

        2、ID选择器>class选择器>元素选择器

        3、同级别通长度下css按照顺序执行  后写的代码会覆盖前写的代码

        4、自行测试  调换代码顺序