全宇宙最深入的CSS3 姬成 渡一学习记录
欢迎关注掘金 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>divdiv>
<p>1p>
<p>2p>
<p>3p>
<p>4p>
div + p{
/*选择div兄弟下一个兄弟节点，叫p*/
background-color: red;
}
E~F:下一堆满足条件的兄弟元素节点
<div>divdiv>
<span class="demo">234span>
<p class="demo">1p>
<p>2p>
<p>3p>
div ~ p{
background-color: green;
}
2.属性选择器(不常用)
复习属性选择器：
data
div[data]{
background-color: red;
}
1.小破浪
属性名是data，属性值里面有独立a的元素
<div data="a">1div>
<div data="b">2div>
<div data="a b">3div>
<div data="aa b c">4div>
div[data~="a"]{
background-color: red;
}
/*1,3变色*/
2.小竖线
以a开头或者以a-开头
div[class|='a']{
background-color: red;
}
<div class="a">1div>
<div class="a-test">2div>
<div class="b-test">3div>
3.^以…开头，$以…结尾，*存在
div[class$='a']{
background-color: red;
}
<div class="a">1div>
<div class="a-test">2div>
<div class="b-test">4div>
3.伪元素选择器(不常用)
before,after一个两个冒号都可，但是接下来的两个必须两个冒号
1.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
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>dgspan>
<input type="text" name="a" read-write><span>dsspan>
body>
html>
4.伪类选择器
1.not(s)
案例
<div class="demo">1div>
<div class="demo">2div>
<div class="test">3div>
<div>4div>
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;
}
- content
- content
- content
- content
- content
- content
- content
2.root和html地位相等
区別：
1.root:根标签选择器 html xml
2.html：根标签
3.root包含html
用法：
:root{
background-color}
3.target
含义
被标记成锚点之后–location.hash=×××
案例：可点击创造锚点
<a href="#box1">box1a>
<a href="#box2">box2a>
<div id="box1">1div>
<div id="box2">2div>
div:target{
border:1px solid red;
}
DEMO
<html>
<head>
<title>finish jstitle>
<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">click1a>
<a href="#item2" style="left:300px">click2a>
<a href="#item3" style="left:400px">click3a>
<div id="item1" class="item">1div>
<div id="item2" class="item">2div>
<div id="item3" class="item">3div>
body>