渐变以及选择器

渐变

线性渐变

• 默认写法，不加前缀，要在方向前面加to，顺序从右向左

• 兼容写法，不能在方向前加to，顺序是从左向右

• background: -webkit-linear-gradient(0deg ,blue 50px,green 60px,red 110px);代表蓝绿过渡效果在50到80之间

• repeating代表是重复的

• 当设置度数时background: linear-gradient(0deg,blue,green,red); 默认从下往上

• background: -webkit-linear-gradient(0deg,blue,green,red);默认从左往右

• 当什么都不设置的话，加不加前缀都是从上往下
  以下是代码及运行结果
  .item{
  width: 200px;
  height: 200px;
  border: 1px solid red;
  float: left;
  margin: 10px;
  color: white;
  text-align: center;
  font-size: 50px;
  line-height: 200px;

    }
  

.item1{
background: linear-gradient(blue,green,red);
}

5F9DABB3-65B4-48ED-8B9F-2DE582705A86.png

    .item2{
        background: -webkit-linear-gradient(blue,green,red);
    }

2037120D-4770-4DCE-9281-88338E951F36.png

    .item4{
        background: -webkit-linear-gradient(top left,blue,green,red);
    }

F8825C8E-B07E-4C56-A6C6-D3D99393D824.png

    .item3{
        background: -webkit-repeating-linear-gradient(0deg ,blue 70px,green 80px,red 90px);
    }

120438D8-382E-4A26-A7D7-A1B5D5944CAB.png

径向渐变

• 不能确定角度，圆的旋转无意义100px代表半径
• 可以指定方向，如top
• 在长方形内，径向渐变是椭圆，可以添加circle属性变成圆形
• 其他和线性渐变类似
  以下是例子
  .item5{
  background: -webkit-radial-gradient( red 30px,orange 40px,yellow 50px,green 60px,cyan 70px,blue 80px,purple 90px)
  }

3644FEB8-BA70-421A-8448-BC628CB1C3C8.png

    .item6{
        background: -webkit-radial-gradient(top, red 30px,orange 40px,yellow 50px)
    }

D7BF9B8D-692C-4107-BDEB-6C56700C2220.png

    .item7{
        background: -webkit-repeating-radial-gradient( red 30px,orange 40px)
    }

E91BAC9C-9D0C-4211-9D04-B7AE8984E0EE.png

    .item8{
        width: 420px;
        background: -webkit-repeating-radial-gradient(circle, red 30px,orange 40px)
    }

E8421EE8-E87C-4C11-B515-8716A0FE8F27.png

    .item9{
        /* width: 420px; */
        background: -webkit-radial-gradient(circle, red 70%,orange 71%)
    }

D21A0F4B-F3A4-47B9-8911-47A14D876CE6.png

选择器

子代选择器

div>p 子代选择器 选择的是直接子集，如例所示：选择的是p标签，父级是div的p的标签

兄弟毗邻选择器

div+p 兄弟毗邻选择器，紧跟在div后面的p标签 ，中间不能有其他标签

后面的所有p选择器

div ~p 跟在div后面的所有p标签，同级

属性选择器

• p[title]{}带有title属性的p标签
• p[title]{}带有title属性的p标签且title属性值为s1的p标签
• p[title*=s]{}title 属性包含s的属性
• p[title$=text]{}title属性必须有text结尾的p标签
• p[title^=text]{}title属性必须有text开头的p标签

伪类选择器

• p:nth-child(1)在同级里面，找到第一个p标签，并且是p标签，然后赋值样式
• p:first-child{};第一个p标签
• p:last-child{};最后一个p标签
• p:only-child{};p标签只有一个时候不能有同级元素，独生子
• p:nth-of-type(){}顺序只会看p标签顺序，不管其他标签;
• p:first-of-type{};第一个p标签
• p:last-of-type{};最后一个p标签
• p:only-of-type{};选择属于其父元素唯一的 <p> 元素的每个 <p> 元素
• p:nth-last-of-type(n){};最后第n个 p标签
• input:checked{}被选中的复选框，或者单选框
• p:first-letter对首字母进行设置
• p:first-line对首行进行设置