css3 新属性

Posted 2020-08-04 蒜香青豆也暖心

一 选择器
1 兄弟选择器 0
  以第一个选择器开始,往后找满足条件的兄弟节点
  class~class()
 <-- lorem+数字 -tab --> 可以输出默认文字
2 属性选择器
  标签[attr]
  标签[attr=某个具体值]
  标签[attr^=某个具体值开头]
  标签[attr$=某个具体值结尾]  li[]
  标签[attr*=属性中包含的某个值]  li[]
  标签[attr | =-前的第一个值]   属性中以-进行分割
二  伪类选择器

1  attr:nth-child(index)
 
      attr:nth-child(n)   获取所有项
      attr:nth-child(2n)   获取所有偶数项
      attr:nth-child(2n-1)   获取所有奇数项
2
     attr:first-child
     attr:last-child

  扩充小知识:   ul>li{$}*30 ( 标签快速写法)

   注意:索引值是以所有的兄弟节点进行计算,不分标签种类,通通按索引值来

  :not([选择器])  找到所有 不是price属性的标签
    :not([选择器=‘18‘])  找到所有price属性不等于18的标签

   (h2#title${标题$}+p)*4
   [href=‘title$‘]

3   锚节点,作为锚元素可单独设置样式k
    attr:target

4  伪元素before 和after
   给双标签添加子元素时:
    1  ,必须添加content属性, 2  默认为行内元素,  3  若想给宽高,需变为块display:block; 或者position定位
   div::before {
       content:‘‘;
   }

5  text文本 
   首字母(下沉)  阿拉伯语言从右到左
   attr::first-letter
   首行
   attr::first-line
   选中的文字
   attr::selection {
     text-shadow //字体阴影
   }
6  placeholder
   -webkit-  谷歌
   -ms-      微软
   -moz-     火狐
   -o-       opera
添加前缀 
   时机:没有效果
   需要兼容多个浏览器
   
7  边框阴影 
   box-shadow :insert(可选 影子的方向) x方向  y方向  影子模糊程度 扩充影子大小  颜色;
   (添加多个,使用逗号分隔)
   
8  文字阴影
   text-shadow :  x方向  y方向  影子模糊程度  颜色;
   (添加多个,使用逗号分隔)
   
9  颜色的设置
   rgb(255,100,97) 桃红色  使用滴管工具
   hsl()
   rgba 和 hsla 不受透明度影响
   
   直接设置透明:(纯透明)
   ">
10 圆角
   border-radius  :  0  0  0  0 ;
   四个值分别为 :左上   右上   右下   左下  
  
11 盒子模型
   box-sizing  //可以让我们的盒子保证自己的大小作为第一优先级
   box-width
12 旋转
   deg 角度
   transform:rotate(-30deg);  
   移动 
   transform:translate(0px ,-10px);
   缩放
   transform:scale(2,1); //x方向改变倍数 y方向
   扭曲
   transform:skewX(-45deg); X方向扭曲值

13   缓慢过渡　
   transition: all 1s;