网页制作

CSS3选择器新增问题的实现
网页制作 2024/12/23 佚名
3 2

基本选择器扩展

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>

CSS3选择器新增问题的实现

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;
    }
标签：
CSS3选择器新增,CSS3选择器
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“CSS3选择器新增问题的实现”

暂无“CSS3选择器新增问题的实现”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com