全宇宙最深入的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>

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


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
        <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">reda>
            <a href="#green" class="bggreen">greena>
            <a href="#gray" class="bggray">graya>
        div>
        <div id="red">div>
        <div id="green">div>
        <div id="gray">div>
    body>
html>

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

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

1.first-child

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

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

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

2.last-child

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


3.only-child

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

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

DEMO

nth-child(n)
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Documenttitle>
	<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">reda>
		<a href="#green" class="bggreen">greena>
		<a href="#gray" class="bggray">graya>
	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>1p>
    <p>2p>
    <p>3p>
    <p>4p>
    <p>5p>
div>

5.nth-last-child(n)

倒着数

5.其他伪类选择器(不受其他影响)

不受其他影响,常用

1.first-of-type

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

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

这一类型里面是的第一个

2.last-of-type

3.only-of-type

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

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

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

<div>
    <span>0span>
    <p>1p>
    <p>2p>
    <p>3p>
    <p>4p>
    <p>5p>
    
div>

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

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

与前一个相反

6.剩下的伪类选择器

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

<div><span>123span>div>
<div>div>
<div>234div>
<div>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;
}
"text">
"text" readonly value="你只能瞅着,干不了别的">

6.read-write

作业

选项卡

你可能感兴趣的:(前端实用小知识,css3,html5,javascript,html,前端)