前端入门到熟悉day06

01属性选择器

 

/* 属性选择器： 属性是相对于标签而言的 所谓的属性选择器就是根据指定名称的属性的值来查找页面中的元素

1.E[attr]:查找指定的拥有attr属性的标签 查找拥有style属性的标签

*/

li[style]{

text-decoration: underline;

}

/* 2.E[attr=value] :查找拥有指定的attr属性并且这个属性的值为value的标签

查找一下有class属性并且属性值为red的标签

*/

li[class=red]{

/* font-size: 30px; */

}

/* 3.E[attr*=value] 查找拥有指定的attr属性并且属性中包含value（可以在任意位置）的标签*/

li[class*=red]{

/* font-size: 40px; */

}

/* 4.E[attr^=value] 查找拥有指定的attr属性并且属性以value开头的标签*/

li[class^=blue]{

/* font-size: 50px; */

}

/* 5.E[attr$=value] 查找拥有指定的attr属性并且以value结尾的标签 */

li[class$=blue]{

font-size: 80px;

}

/* 自定义属性 */

li[data-hover]{

color: pink;

}

<li data-hover="eeeeee">dsadasdasdasdasd</li>

02兄弟选择器

 

        .first{

            color: red;

        }

        /*兄弟伪类：

        +：获取当前元素的相邻的满足条件的元素

        ~：获取当前元素的满足条件的兄弟元素*/

 

        /*下面这句样式说明查找 ：添加了.first样式的标签的相邻的li元素

        1.相邻

        2.必须是指定类型的元素*/

        /* .first + li{

            color: blue;

        } */

 

        /*下面样式查找添加了.first样式的元素的所有兄弟li元素

        1.必须是指定类型的元素*/

        .first ~ li{

            color: pink;

        }

 

03伪类选择器

/* 相对于父元素的结构伪类

E:first-child:查找E元素的父级元素中的第一个E元素 在查找的时候并不会限制查找的元素的类型

li的父元素中的第一个li元素（如果li的父元素第一个子元素不是li时，即不执行）

1.相对于当前指定的元素的父元素

2.查找的类型必须是指定的类型

*/

li:first-child{

/* color: red; */

}

/* E:last-child 查找E元素的父元素中的最后一个指定类型的子元素 */

li:last-child{

/* color: red; */

}

/* E:first-of-type 查找的时候限制类型

1.也是相对于父元素

2.在查找的时候只会查找满足类型条件的元素 过滤掉其他类型的元素

*/

li:first-of-type{

/* color: red; */

}

li:last-of-type{

/* color: blue; */

}

/* 指定索引位置 nth-child(从1开始的索引||关键字||表达式) */

li:nth-child(5){

/* background-color: pink; */

}

/* 偶数个元素添加背景 偶数:even 奇数：odd */

li:nth-child(even){

/* background-color: orange; */

}

li:nth-child(odd){

/* background-color: blue; */

}

li:nth-of-type(even){

/* background-color: orange; */

}

li:nth-of-type(odd){

/* background-color: pink; */

}

li:nth-child(2n-1){

background-color: orange;

}

/* 向为前面的5个元素添加样式

n 默认取值范围为0-子元素的长度 但是当n<=0时候 选取无效

*/

/* li:nth-child(-23){

color: green;

} */

li:nth-last-of-type(-n+5){

font-size: 30px;

}

li:nth-of-type(-n+5){

font-size: 30px;

}

 

/* 空值 没有任何内容 连空格都不能有 */

li:empty{

background-color: purple;

}

 

04伪类选择器target

/* E:target 可以为锚点目标元素添加样式 当目标元素被触发为当前锚链接的目标时，调用此伪类样式*/

p:target{

color: red;

}

 

05伪元素选择器-before-after

div:nth-of-type(2)::before{

/* 必须添加content属性(内容可以为文字和图片) 否则后期不可见 */

position: absolute;

content: "左";

/* 默认为行内元素 如果你想支持宽高 必须要转化为块级元素 */

display: block;

}

div:nth-of-type(2)::after{

/* 必须添加content属性 否则后期不可见 */

position: absolute;

content: "";

/* 默认为行内元素 如果你想支持宽高 必须要转化为块级元素 */

display: block;

}

 

06其他伪元素选择器使用

/* 获取第一个字符实现首字符下沉 */

/* p::first-letter{

color: red;

font-size: 30px;

float: left;

} */

/* 获取第一行内容 如果这只了::first-letter 那么无法同时设置它的样式 */

p::first-line{

text-decoration: underline;

}

/* 设置当前选中内容的样式 */

 

p::selection{

background-color: pink;

color: red;

/*它只能设置显示的样式，而不能设置内容大小*/

/* font-size: 30px; */

}

 

07颜色

 

div{

width: 200px;

height: 200px;

border: 1px solid #ccc;

/* background-color: red; */

/* background-color: #000; */

/* rgba( 红，绿，蓝,透明度) */

/* background-color: rgb(210,73,119,.5); */

background-color: hsla(340,65%,52%,.5);

/* hsl (颜色（0-360）,饱和度（0%-100%），明度（0%-100%）)

明度默认是50%，一般简易保留50的值

*/

}

 

08透明度误区

/* 通过这个opacity 设置透明：如果设置父元素 那么所有的子元素也会有透明度 */

opacity: 0.5;

 

09文字阴影

/* 添加阴影 text-shadow:offsetX offsetY blur color */

.demo01{

text-shadow: -2px -2px 5px red;

}

/* 多层阴影效果 */

.demo03{

text-shadow: 0px 0px 30px #fff,0px 0px 50px red,0px 0px 70px #fff;

}

/* 浮雕立体效果 */

.demo05{

color: #fff;

text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc;

}

 

10盒模型

/*默认情况下，width仅仅是内容的宽度*/

/* 添加内边距 */

/* 设置合模型

content-box:你设置的width属性值仅仅是内容的宽度，盒子的最终的宽高值在width的基础上再加上padding和border的宽度

border-box:你设置的width属性值就是盒子的最终的宽度，包含了border和padding和内容。如果添加了padding和border,那么真正放置内容的区域会减小--但是它可以稳固页面的结构

*/

在默认情况下，CSS设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。真正盒子的宽度（在页面呈现出来的宽度）和高度，需要加上一些其它的属性

 

 

11圆角

/*添加边框圆角*/

/*1.设置一个值：四个角的圆角值都一样*/

/*border-radius: 10px;*/

/*2.设置两个值:第一个值控制左上/右下，第二个值控制右上/左下*/

/* border-radius: 10px 30px; */

/*3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制右下*/

/*border-radius: 10px 40px 60px;*/

/*4.设置四个值：左上 右上 右下 左下 顺时针*/

/*border-radius: 10px 30px 60px 100px;*/

 

/*添加/是用来设置当前个不同方向的半径值 水平x方向/垂直y方向*/

/* border-radius: 100px/50px; */

 

/* 添加某个角点的圆角 */

/* border-radius: 0px 50px 0px 0px; */

/* border-bottom-right-radius: 100px;

border-bottom-left-radius: 100px; */

/*设置某个角点的两个方向上的不同圆角*/

/* border-top-right-radius: 100px 50px;

border-bottom-left-radius: 80px 40px;

border-bottom-right-radius: 60px 30px;

border-top-left-radius: 40px 20px; */

/*如果想设置四个角点的不同方向上的不同圆角值*/

/*分别是水平方向的：左上，右上，右下，左下 / 垂直方向的：左上，右上，右下，左下*/

border-radius: 100px 0px 0px 0px/20px 0px 0px 0px;

 

12安卓机器人

 

头部先设置半圆：border-radius: 125px 125px 0 0;

眼睛用伪类： .an_header::before{left: 70px;}

.an_header::after{right: 70px;}

身体： border-radius: 0 0 20px 20px;

双手也用伪类：  .an_body::before{left: -40px;}

.an_body::after{right: -40px;}

脚也先一个大的div，

再用伪类： .an_footer::before{left: 50px;}

.an_footer::after{right: 50px;}

 

 

13边框阴影

<!--文本阴影：text-shadow:offsetX offsetY blur color-->

<!--边框阴影：box-shadow:h v blur spread color inset

h:水平方向的偏移值

v:垂直方向的偏移值

blur:模糊--可选，默认0

spread:阴影的尺寸，扩展和收缩阴影的大小--可选 默认0

color:颜色--可选，默认黑色

inset:内阴影--可选,默认是外阴影-->

/* 添加边框阴影 */

/* box-shadow: -10px 10px 5px 0px rgba(0,0,150,.2) inset,

10px -10px 5px 0px rgba(0,0,150,0.2) inset; */