CSS3的选择器常用汇总

CSS3中的属性选择器
1.E[attr] 表示选择标签和标签中的属性
2.E[attr="value"] 表示选择标签和标签的属性属性值
3.E[attr^="value"] 表示选择标签和标签的属性属性值,并且以xx开头
4.E[attr$="value"] 表示选择标签和标签的属性属性值,并且以xx结束

CSS3中的结构伪类选择器:表示将很多的标签放在一起通过选择第几个进行修饰
一:当所有的标签名称是一样的时候:将所有相同的标签组成一个集合,再从集合下面进行选择第几个
1.集合名称:first-child 表示选择集合下面的第一个
2.集合名称:last-child 表示选择集合下面的最后一个
3.集合名称:nth-child(n) 表示选择到集合下面的第几个(从前往后)
4.集合名称:nth-last-child(n) 表示选择到集合下面的第几个(从后往前)
- 小括号里面的n表示数字,默认为n的时候表示选择到全部
- 2n、3n、2n-1
- odd、even 奇数、偶数

二:当所有的标签名称不一样的时候:将标签=进行筛选相同标签组成一个集合,再从集合下面挑选第几个
1.集合名称:first-of-type 表示选择集合下面的第一个
2.集合名称:last-of-type 表示选择集合下面的最后一个
3.集合名称:nth-of-type(n) 表示选择到集合下面的第几个(从前往后)
4.集合名称:nth-last-of-type(n) 表示选择到集合下面的第几个(从后往前)
- 小括号里面的n表示数字,默认为n的时候表示选择到全部
- 2n、3n、2n-1
- odd、even 奇数、偶数

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        input:enabled{
            background: pink
        }
        input:disabled{
            background: #ccc
        }
        input:checked{
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text" disabled>
    <input type="checkbox" checked>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        div:not(.box){
            color: red
        }
    </style>
</head>
<body>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div>靓仔</div>
    <div class="box">D毛</div>
</body>
</html>

目标选择器:表示通过事件可以选取当前活动目标元素(哪个元素改变状态就给哪个元素设置目标选择器)
1.使用: 选择器:target
2.注意: 结合a标签使用、锚点

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        #box:target{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 通过点击a标签 实现div标签变化 -->
    <div id="box">灯</div>
    <a href="#box">开关</a>
</body>
</html>

案例：手风琴效果

过渡属性:表示元素从一种状态到另一种状态的变化时间
1.属性:transition
2.属性值:时间单位 0.8s

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <style>
        .box{
            width: 400px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        a{
            display: block;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: #000;
            color: #fff;
            text-decoration: none
        }
        #box1:target{
            height: 350px;
            background: url(https://pic3.zhimg.com/v2-306113e9b68f7bba6a3e5cc51809c37a_r.jpg?source=1940ef5c);
            background-size: 100% 100%;
        }
        #box2:target{
            height: 350px;
            background: url(https://ts1.cn.mm.bing.net/th/id/R-C.ab58762fdf57bc8d046b91eef6699954?rik=mzupRT%2fSqrpEFQ&riu=http%3a%2f%2fhao5.qhimg.com%2ft01c9b5a94575bf22d0.jpg&ehk=YF5vGEhP3680mGTTJu9nnhgrkW6l8DoY1orvGoUtVt0%3d&risl=&pid=ImgRaw&r=0);
            background-size: 100% 100%;
        }
        #box3:target{
            height: 350px;
            background: url(https://uploadfile.bizhizu.cn/up/b1/10/bc/b110bc0a7bf6ee86536655485fb577ef.jpg);
            background-size: 100% 100%;
        }
        .box div{
            transition: 0.8s;
            height: 0;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <!-- (a[href="#box$"]{开关$}+div[id="box$"]{灯$})*3 -->
        <a href="#box1">开关1</a>
        <div id="box1"></div>
        <a href="#box2">开关2</a>
        <div id="box2"></div>
        <a href="#box3">开关3</a>
        <div id="box3"></div>
    </div>
</body>
</html>

项目的开发思想:渐进增强、优雅降级
1.渐进增强:先保证低版本的正常使用再在高版本中做效果
2.优雅降级:先实现高版本的效果,再考虑低版本浏览器的适配

市场上五大浏览器:谷歌、火狐、IE、欧朋、safari
市场上常见的弟弟浏览器:UC、百度、360、搜狐、qq、王牌2345、夸克
为什么要有浏览器前缀?

由于浏览器的制作厂商不一样源码不一样(浏览器内核解析html和css)
由于CSS3是新版本,增加了新的属性,在部分浏览器上解析的时候会出现问题,为了支持这些属性每个浏览器都有自己的前缀
1.-webkit- safari 谷歌浏览器
2.-ms- IE浏览器
3.-moz- 火狐浏览器
4.-o- 欧朋浏览器遗弃
5.-blink- 欧朋浏览器和谷歌浏览器

CSS3的选择器常用汇总

猜你喜欢