CSS3选择器新增问题的实现_css3_CSS

来源：jb51　　时间：2021/1/25 11:27:58　　对本文有异议

基本选择器扩展

1.子元素选择器

:tomato: #wrap > .inner {color: pink;} 也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素总结：>作用于元素的第一代后代，空格作用于元素的所有后代

2. 相邻兄弟选择器

:tomato: #wrap #first + .inner {color: #f00;}它只会匹配紧跟着的兄弟元素

3. 通用兄弟选择器

:tomato: #wrap #first ~ div { border: 1px solid;}它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素所有的兄弟元素

4. 选择器分组

:tomato: h1,h2,h3{color: pink;} 此处的逗号我们称之为结合符

属性选择器

1. 子串值属性选择器

:tomato: [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。

:tomato: [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。

:tomato: [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。

:tomato: [attr*=val] : 选择attr属性的值中包含字符串val的元素少数浏览器支持子串选择元素

2. 存在和值属性选择器

:tomato: [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

:tomato: [attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。比如位于被空格分隔的多个类（class）中的一个类。比如name="atguigu_llc atguigu"

:tomato: [name =val]：该选择器仅选择 name 属性被赋值为 val 的所有元素。

伪类与伪元素选择器

1. 链接伪类

:tomato: :link 表示作为超链接，并指向一个未访问的地址的所有锚

:tomato: :visited 表示作为超链接，并指向一个已访问的地址的所有锚

:tomato: :target 代表一个特殊的元素，它的id是URI的片段标识符

:exclamation: 注意:link，:visited，:target是作用于链接元素的！前两者只能在a标签上起作用

*{
                margin: 0;
                padding: 0;
            }
            div{
                width: 300px;
                height: 200px;
                line-height: 200px;
                background: palegreen;
                color: hotpink;
                text-align: center;
                display: none;
            }
            a:visited{
                color:orange;
            }
            :target{
                display: block;
            }

2. 动态伪类

:tomato: :hover表示悬浮到元素上

:tomato: :active表示匹配被用户激活的元素（点击按住时）

:tomato:由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！

:tomato: 隐私与:visited选择器只有下列的属性才能被应用到已访问链接：color、background-color、border-color

:exclamation: 注意:hover，:active基本可以作用于所有的元素！

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
                color: black;
                display: block;
            }
            a:hover{
                font-size:24px;
                /*color: red;*/
            }
            
            a:link{
                font-size:48px;
                /*color: pink;*/
            }
            a:visited{
                /*font-size:96px;*/
                /*color: deeppink;*/    
            }
        </style>

3. 表单相关伪类

①:disable 匹配被禁用的表单

②:checked 匹配被选中的表单

③:focus 匹配获焦的表单

④：enabled匹配可编辑的表单

实操练习1

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        input:enabled{
            background: skyblue;
        }
        input:disabled{
            background: deeppink;
        }
        input:checked{
            width: 200px;
            height: 200px;
        }
        input:focus{
            background: pink;
        }
    </style>
</head>
<body>
    <input type="text"  />
    <input type="text"  disabled="disabled" />
    <input type="checkbox"  />
    <input type="text"  />
</body>

实操练习2 自定义单选按钮

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding:0;
        }
        label{
            position: relative;
            float:left; /*转换为块级元素撑开大小*/
            width:100px;
            height:100px;
            border:2px solid;
            border-radius: 50%;
            overflow:hidden;
        }
        label > span{
            position: absolute;
            left:0;
            top:0;
            bottom:0;
            right:0;
        }
        input{
            position: absolute;
            left:-50px;
            top:-50px;
        }
        input:checked + span{
            background:pink;
        }
    </style>
</head>
<body>
    <label>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </label>
    <label>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </label>
    <label>
        <input type="radio" name="rongtuowulian" />
        <span></span>
    </label>
</body>

4. 伪元素

:tomato: 概念：伪元素表示页面中一些特殊的并不真实存在的元素（特殊的位置）

:tomato: 语法使用：：开头

:tomato: 类别：①：：first-letter ②::first-line ③::selection ④::before ⑤::after 注意：④和⑤必须结合content属性来使用

:tomato: 代码示例：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible"content="ie=edge" />
    <title></title>
    <style type="text/css">
    p:first-letter{
        color: #008000;
        font-size: 2.5rem;
    }
    p:first-line{
        color: aqua;
    }
    p::selection{
        color:red;
    }
    p:before{
        content: ''I will love you forever';
        color:blue;
    }
    p:after{
        content: 'sure are you';
        color:green；
    }
    </style>
</head>
<body>
    <div>Hello are you okay</div>
    <p> 我还是一个段落 我是一个很多很多解放碑还不错保持经济刺激
    哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈
    </p>
</body>

5. 结构性伪类(重点)

:tomato: index的值从1开始计数！！！！index可以为变量n(只能是n)index可以为even odd

:tomato: #wrap ele:nth-child(index)表示匹配#wrap中第index的子元素，这些伪类都是根据所有的子元素进行排序，这个子元素必须是ele

:tomato: #wrap ele:nth-of-type(index)表示匹配#wrap中第index的ele子元素

除此之外:nth-child和:nth-of-type有一个很重要的区别！！nth-of-type以元素为中心，在同一类型中排序，nth-child (相对于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))

/* even表示偶数

odd表示奇数

first-of-type:在p类型中排

first-child:所有元素排

:tomato::nth-child(index)系列

:first-child

:last-child

:nth-last-child(index)

:tomato::nth-of-type(index)系列

:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type(相对于:first-of-type:last-of-type
 或者 :nth-of-type(1):nth-last-of-type(1))    
:not        
:empty(内容必须是空的，有空格都不行，有attr没关系)

代码实例

*{
            margin: 0;
            padding: 0;
        }
        #wrap li:nth-of-type(1){
            color: pink;
        }
        p:only-of-type{
            border: 1px solid;
        }

6. 伪元素选择器

::after

::before

::firstLetter

::firstLine

::selection

#wrap::before{
        content:"";
        display:block;
        width:200px;
        height:200px;
        background: #00FFFF;
    }
    #wrap::after{
        content:"";
        display:block;
        width:200px;
        height:200px;
        background: #0000FF;
    }