全宇宙最深入的CSS3 姬成渡一学习记录

最新推荐文章于 2022-08-16 21:51:19 发布

m0_46424423

最新推荐文章于 2022-08-16 21:51:19 发布

阅读量1k

点赞数 1

分类专栏：前端实用小知识文章标签： css3 html5 javascript html 前端

本文链接：https://blog.csdn.net/m0_46424423/article/details/118977396

版权

欢迎关注掘金 https://juejin.cn/user/2551305355400797

全宇宙最深入的CSS3

一、introduction

兼容性前缀

prefix（前缀）	browser
-webkit	chrome/safari
-moz	firefox
-ms	IE
-o	opera

1.历史

更新迭代，兼容性 ---- 加不加前缀

div{
   
    border-radius: ;
    -webkit-border-radius:;
    -o-border-radius:;
    -moz-border-radius:;
}

兼容性手册网站

http://css.doyoe.com

http://caniuse.com

2.处理器

预处理器：pre-processor

less/sass cssNext插件

利用sass工具编辑（遵循人家的语法）：减少人工时间

sass演示

div{
   
    span{
   
    }
}

$font-stack:arial,...;
#mysituation-color:#444;
div{
   
    span{
   
        color:#mysituation-color;
    }
    p{
   
        font:100% $font-stack;
    }
}
#only{
   
    &.demo{
   
        color:$mysituation-color;
    }
}

后处理器：post-processor

CSS自动补足前缀插件(基于caniuse网站)autoprefixer
后处理器需要在其环境内编写

优点：如果有一天，属性可以再各大浏览器应用，不需要加前缀，那么我们写的代码本身就符合规范了。可维护性好。而sass less不能。

3.怎么用

postCss + 插件(充分体现扩展性，200多个)

postCss 并不能划分成什么处理器，要加上插件才能变成相应的处理器

用js实现css抽象的语法树，AST(abstract Syntax Tree)，剩下的事情留给后人来做

后处理器好处：

如果浏览器都实现兼容了，用不到兼容了，就可以不用后处理器了，利于维护代码，升级。预处理器办不到。

4.CSS3进化到编程化：cssNext

:root{
   
    --headline-color:#333;
}
@custom-selector: --headline h1,h2,h3,h4,h5,h6
    : --headline{
   
        color:var(--headline-color);
}

cssNext用来实现一些未来的标准的（未完全在各大浏览器）

二、选择器

打开格局视野，不要故步自封，不要排斥知识，充分包容各种知识

1.关系型选择器模式(不常用)

E+F:下一个满足条件的兄弟元素节点

<div>div</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

div + p{
    /*选择div兄弟下一个兄弟节点，叫p*/
    background-color: red;
}

E~F:下一堆满足条件的兄弟元素节点

<div>div</div>
<span class="demo">234</span>
<p class="demo">1</p>
<p>2</p>
<p>3</p>

div ~ p{
   
    background-color: green;
}

2.属性选择器(不常用)

复习属性选择器：

<div class="demo" data="a">data</div>
<div></div>
div[data]{
   
	background-color: red;
}

1.小破浪

属性名是data，属性值里面有独立a的元素

<div data="a">1</div>
<div data="b">2</div> 
<div data="a b">3</div>
<div data="aa b c">4</div>

div[data~="a"]{
   
	background-color: red;	
}
/*1,3变色*/

2.小竖线

以a开头或者以a-开头

div[class|='a']{
   
	background-color: red;
}

<div class="a">1</div>
<div class="a-test">2</div>
<div class="b-test">3</div>

3.^以…开头，$以…结尾，*存在

div[class$='a']{
   
	background-color: red;
}

<div class="a">1</div>
<div class="a-test">2</div>
<div class="b-test">4</div>

3.伪元素选择器(不常用)

before,after一个两个冒号都可，但是接下来的两个必须两个冒号

1.placeholder

<input type="text" placeholder="请输入用户名">
input::placeholder{
   
    color: green;/*只能改变字体颜色*/
}

2.selection

<div>成哥很帅</div>
<div>邓哥也很帅</div>

div:nth-of-type(1)::selection{
   
    /*只能用这三种属性*/
    /*color*/
    /*background-color: */
    /*text-shadow: 阴影*/
    text-shadow: 3px 5px black;
    color:#fff;
    background-color: #fcc;
    /*实现选中变色*/
}
div:nth-of-type(2)::selection{
   
    color: yellow;
    background-color: green;
}

user-select:none   不让选中

DEMO

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span::selection{
    
            background-color: green;
            color: yellow;
        }
    </style>
    <body>
        名下痴汉tid梦，也从大家的视线中消失了。<span>老</span>dengxu是一位非Two将打败过dengxu作为自己的主要战绩吹了很久。
        后来dengxu海归追梦，也从大家的视线中消失了。<span>邓</span>dengxu是一位非常有实大家的视线中消失了。<span>虚</span>dengxu是一位非常有实
        <span>弱</span>名下痴汉tidesof	
    </body>
</html>

DEMO

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            p{
    
                display: inline-block;
                width: 200px;
                border:1px solid #000;
            }
            p::first-letter{
    
                font-size: 30px;
            }
            p::first-line{
         
                color: green;
            }
        </style>

    </head>
    <body>
        <p>沙拉酱擦参考手册是空的充电口穿梭在考虑到开始做看大V南京市的计算机</p>
        <input type="text" name="a" readonly><span>dg</span>
        <input type="text" name="a" read-write><span>ds</span>
    </body>
</html>

4.伪类选择器

1.not(s)

案例

<div class="demo">1</div>
<div class="demo">2</div>
<div class="test">3</div>
<div>4</div>

div:not([class]){
   
    background-color: red;
}

实际开发类似需求----移动端列表页：除了最后一个都要加上一条横线

*{
   
    margin: 0;
    padding: 0;
}
ul{
   
    width: 300px;
    border:1px solid #999;
}
li{
   
    height: 50px;
    margin: 0 5px;
    /*border-bottom: 1px solid black;*/
}
li:not(:last-of-type){
   
    border-bottom: 1px solid black;
}
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>

2.root和html地位相等

区別：

1.root:根标签选择器 html xml

2.html：根标签

3.root包含html

用法：

:root{
   background-color}

3.target

含义

被标记成锚点之后–location.hash=×××

案例：可点击创造锚点

<a href="#box1">box1</a>
<a href="#box2">box2</a>
<div id="box1">1</div>
<div id="box2">2</div>

div:target{
   
    border:1px solid red;
}

DEMO

<!DOCTYPE html>
<html>
    <head>
        <title>finish js</title>
        <style>
            *{
    
                padding: 0;
                margin: 0;
                list-style: none;
            }
            body{
    
                height: 2000px;
            }
            a{
    
                position: fixed;
                top:0;
            }
            .item{
    
                position: absolute;
                top:1000px;
                width: 100px;
                height: 100px;
                background: red;
            }
            #item1{
    
                top:500px;
            }
            #item2{
    
                top:1000px;
            }
            #item3{
    
                top:1500px;
            }
            .item:target{
    
                background: green;
            }

        </style>
    </head>
    <body>
        <a href="#item1" style="left:200px">click1</a>
        <a href="#item2" style="left:300px">click2</a>
        <a href="#item3" style="left:400px">click3</a>
        <div id="item1" class="item">1</div>
        <div id="item2" class="item">2</div>
        <div id="item3" class="item">3</div>
    </body>
</html

小项目：三个a标签控制页面背景颜色

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /*实现div=屏幕的高度	*/
            :root,
            body{
    
                margin: 0;
                padding: 0;
                height:100%;
            }
            #red,
            #green,
            #gray{
    
                height: 100%;
                width: 100%
            }
            #red{
    
                background-color:#f20;
            }
            #green{
    
                background-color: green;
            }
            #gray{
    
                background-color: gray;
            }
            div[id]:not(:target) {
    
                display: none;
            }
            div.button-wrapper{
    
                position: absolute;
                width: 600px;
                top:400px;
            }
            div.button-wrapper a{
    
                text-decoration: none;
                color:#fff;
                background-color: #fcc;
                font-size:30px;
                border-radius: 3px;
                margin:0 10px;
            }
        </style>
    </head>
    <body>
        <div class="button-wrapper">
            <a href="#red" class="bgred">red</a>
            <a href="#green" class="bggreen">green</a>
            <a href="#gray" class="bggray">gray</a>
        </div>
        <div id="red"></div>
        <div id="green"></div>
        <div id="gray"></div>
    </body>
</html>

4.其他伪类选择器（此部分都考虑其他元素的影响）

受其他元素的影响，父子级，不出常用

1.first-child

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

/*伪类选择器是被选择元素的状态*/
p:first-child{
   
    background-color: red;
}

<p>1</p>
<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

是不是first-child，不只看是p里面的第一个，要看父级下面的第一个

<div>
    <span>0</span>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>

2.last-child

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</div>
<p>4</p>
<!-- last-child:只要是最后一个儿子，就可，即14 -->

3.only-child

span:only-child{
   
    background-color: aqua;
}
div:only-child{
   
    background-color: blueviolet;
}

<div>
    <span>0</span>
    <p>1</p>
</div>

DEMO

nth-child(n)<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	/*实现div=屏幕的高度	*/
	:root,
	body{
    
		margin: 0;
		padding: 0;
		height:100%;
	}
	#red,
	#green,
	#gray{
    
		height: 100%;
		width: 100%
	}
	#red{
    
		background-color:#f20;
	}
	#green{
    
		background-color: green;
	}
	#gray{
    
		background-color: gray;
	}
	div[id]:not(:target) {
    
		display: none;

	}
	div.button-wrapper{
    
		position: absolute;
		width: 600px;
		top:400px;
	}
	div.button-wrapper a{
    
		text-decoration: none;
		color:#fff;
		background-color: #fcc;
		font-size:30px;
		border-radius: 3px;
		margin:0 10px;
	}
	</style>
</head>
<body>
	<div class="button-wrapper">
		<a href="#red" class="bgred">red</a>
		<a href="#green" class="bggreen">green</a>
		<a href="#gray" class="bggray">gray</a>
	</div>
	<div id="red"></div>
	<div id="green"></div>
	<div id="gray"></div>
</body>
</html>

4.nth-child()

CSS从1开始,n是从0开始 odd奇数even偶数

p:nth-child(2n){
   
    background-color: blueviolet;
}

<div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>

5.nth-last-child(n)

倒着数

5.其他伪类选择器（不受其他影响）

不受其他影响,常用

1.first-of-type

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<li>1</li>

li:first-of-type{
   
    background-color: aqua;
}

这一类型里面是的第一个

2.last-of-type

3.only-of-type

<div>
    <span>0</span>
    <p>1</p>
    <!-- <p>2</p>不是特有的了 -->
</div>

p:only-of-type{
   
    background-color: aqua;
}

4.nth-of-type(n)常用

<div>
    <span>0</span><!-- 注意这一行 -->
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <!-- <p>2</p>不是特有的了 -->
</div>

p:nth-of-type(n+2){
   从第二个开始查
    background-color: aqua;
}

5.nth-of-last-type(n)

与前一个相反

6.剩下的伪类选择器

1.empty:必须元素是空的，才叫empty

<div><span>123</span></div>
<div></div>
<div>234</div>
<div><!--sda--></div><!--注释也算节点-->

div:empty{
   
    border: 1px solid black;
    height: 100px;
}

2.checked

<label>
    一个小惊喜<input type="checkbox"><span></span>
</label>

input:checked{
   	
    width: 200px;
    height: 200px;
}

DEMO处理简单交互

<style>
    input:checked + span{
    
        background-color: green;
    }	
    input:checked + span::after{
    
        content: "隔壁老王 电话xxx，请务必小心刑事";
        color: #fff;
    }
</style>
<label>
    一个小惊喜
    <input type="checkbox">
    <span></span>
</label>

3.enable

<input type="text">
<input type="text" disabled>

input:enabled{
   
    background: green;
}
input:disabled{
   
    border: 1px solid #f20;
    background-color: #fcc;
    box-shadow: 1px 2px 3px #f20;
}

4.disable

5.read-only

input:read-only{
   
    color:chartreuse;
}
<input type="text">
<input type="text" readonly value="你只能瞅着，干不了别的">

6.read-write

作业

选项卡

最低0.47元/天解锁文章

m0_46424423

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
全宇宙最深入的CSS3 姬成渡一学习记录

全宇宙最深入的CSS3一、introduction兼容性前缀prefix（前缀）browser-webkitchrome/safari-mozfirefox-msIE-oopera1.历史更新迭代，兼容性 ---- 加不加前缀div{ border-radius: ; -webkit-border-radius:; -o-border-radius:; -moz-border-radius:;}兼容性手册
复制链接

扫一扫