C3新增选择器

一、属性选择器

1、代码笔记

<style type="text/css">
            /* 只选取含有value属性的input文本框 */
            /* input[value] {
                color: red; */

            /* 只选取type=text的input文本框 */
            input[type=text] {
                color: red;
            }

            /* 选择首先是div 然后是class属性 且属性值必须是以icon开头的元素 */
            div[class^=icon] {
                width: 100px;
                height: 100px;
                background-color: red;
            }

            /* 选择首先是section 然后是class属性 且属性值必须以data结尾 */
            section[class$=data] {
                width: 200px;
                height: 200px;
                background-color: skyblue;
            }

            /* 选择首先是section 然后是class属性 且属性值必须以含有icon */
            section[class*=icon] {
                color: #fff;
            }
            }
        </style>
    </head>
    <body>
        <!-- 1、利用属性选择器就可以不借用于类或者id选择器 []-->
        <!-- <input type="text" value="请输入用户名" />
        <input type="text"  /> -->

        <!-- 2、属性选择器还可以选择属性=值的某些元素 重点-->
        <input type="text" id="" value="用户名" />
        <input type="password" name="" id="" value="密码" />

        <!-- 3、属性选择器可以选择属性值开头的某些元素 -->
        <div class="icon1">小图标1</div>
        <div class="icon2">小图标2</div>
        <div class="icon3">小图标3</div>
        <div class="icon4">小图标4</div>
        <div>我是打酱油的</div>
        <!-- 4、属性选择器可以选择属性值结尾的某些元素 -->
        <section class="icon1-data">我是安其拉</section>
        <section class="icon2-data">我是哥斯拉</section>
        <section class="icon3-ico">那我是谁</section>
    </body>

2、思维导图

二、结构伪类选择器

1、代码

<style type="text/css">
            /* 1、选择ul里面的第一个孩子 小li */
            ul li:first-child {
                background-color: pink;
            }

            /* 1、选择ul里面最后一个孩子 小li */
            ul li:last-child {
                background-color: pink;
            }

            /* 1、选择ul里面的第n个孩子 小li */
            ul li:nth-child(5) {
                background-color: #FF0000;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是第1个孩子</li>
            <li>我是第2个孩子</li>
            <li>我是第3个孩子</li>
            <li>我是第4个孩子</li>
            <li>我是第5个孩子</li>
            <li>我是第6个孩子</li>
            <li>我是第7个孩子</li>
            <li>我是第8个孩子</li>
        </ul>
    </body>

2、思维导图

隔行变色代码

<style type="text/css">
            /* 1、把所有偶数的孩子选出来 */
            ul li:nth-child(even) {
                background-color: pink;
            }
            /* 2、把所有奇数的孩子选出来 */
            ul li:nth-child(odd) {
                background-color: #bbb;
            }
            /* 3、nth-child(n)从0开始 每次加1 往后面计算 这里面必须是n 不能是其他字母 选择了所有的孩子 */
            ol li:nth-child(n) {
                /* background-color: pink; */
            }
            /* 4、nth-child(2n) 选择了所有偶数的孩子 等价于even */
            ol li:nth-child(2n) {
                background-color: #bbb;
            }
            /* 5、nth-child(2n+1) 选择了所有奇数的孩子 等价于odd */
            ol li:nth-child(2n+1) {
                background-color: #87CEEB;
            }
            
            /* nth-child会把所有的盒子都排列序号 （光头强1，熊大2，熊二3） */
            /* 执行的时候首先看：nth-child(1) 之后回去看 前面的div 标签不匹配就不显示 */
            section div:nth-child(1) {
                background-color: orange;   /*p和div不匹配，所以都不显示*/
            }
            
            /* nth-of-type会把指定元素的盒子都排列序号 （熊大1，熊二2） */
            /* 执行的时候首先看：指定的元素(div) 之后回去看：nth-of-type(1)  第几个孩子 */
            section div:nth-of-type(1) {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>我是第1个孩子</li>
            <li>我是第2个孩子</li>
            <li>我是第3个孩子</li>
            <li>我是第4个孩子</li>
            <li>我是第5个孩子</li>
            <li>我是第6个孩子</li>
            <li>我是第7个孩子</li>
            <li>我是第8个孩子</li>
        </ul>
        <ol>
            <li>我是第1个孩子</li>
            <li>我是第2个孩子</li>
            <li>我是第3个孩子</li>
            <li>我是第4个孩子</li>
            <li>我是第5个孩子</li>
            <li>我是第6个孩子</li>
            <li>我是第7个孩子</li>
            <li>我是第8个孩子</li>
        </ol>
        
        <!-- nth-child 和 nth-of-type区别 -->
        <section>
            <p>光头强</p>
            <div>熊大</div>
            <div>熊二</div>
        </section>
    </body>

三、新增伪元素选择器

—— ：：before 在父元素内容的前面插入元素

—— ：：after在父元素内容的后面插入内容

——：：before和：：after必须指定content属性（content：‘ ’ ；）

—— 伪元素不是真正意义的元素，是通过css创建的

—— 伪元素使用：：开头，关键字内容

—— 伪类使用：开头，关键字状态

—— ：：before和：：after属于行内元素

—— 伪元素权重为1

/* 说人话就是利用css创建个盒子，可以加样式 */

.box::after {
            position: absolute;
            content: '';
            width: 55px;
            height: 55px;
            background: url(./image/mi-logo.png) no-repeat center;
            top: 0;
            left: 0;
            transition: all .4s;
        }

        .box:hover::after {
            margin-left: 55px;
            opacity: 0;
        }

        .box::before {
            position: absolute;
            content: '';
            width: 55px;
            height: 55px;
            background: url(./image/mi-home.png) no-repeat center;
            top: 0;
            left: -55px;
            margin-left: 0;
            opacity: 0;
            transition: all .4s;
        }

1、两种清除伪元素的原理

四、盒子模型

—— box-sizing：content-box；盒子大小=width+padding+border （默认）

—— box-sizing：border-box；width、padding、border不影响盒子大小

—— padding和border不要超过width/height

五、CSS图片模糊处理

—— 语法：filter：blur（5px）【数值越大越模糊，数值为0最清晰，也就是不做处理】

—— 全部图片变灰

/*全部图片变灰*/
filter：grayscale（100%）；

/*页面变灰*/
html {
   filter：grayscale（100%）；
}

六、计算盒子宽度calc函数

—— width：calc（100% - 80px）；可以让子盒子永远比父盒子的宽度小80px

—— +-*/运算符号左右均有空格

七、CSS3新增属性性过度

—— transition：要过度的属性动画时间运动曲线何时开始；

—— 是从一个状态渐渐的过渡到另外一个状态，从一个属性值，过渡到另外一个属性值；

—— 经常和 :hover 一起搭配使用，让页面更好看，且动感十足。

—— transition: all 0.5s 所有属性在 0.5s 内完成过渡动画。

—— 谁来变化（过渡）给谁加

transition：all  .5s; (all—所有属性都变化)
transition：width  .5s ,height  .5s  1s;(多个属性变化，用逗号隔开)

posted @ 2020-10-17 22:08 黑金小码农阅读(486) 评论(0) 收藏举报

刷新页面返回顶部