CSS3选择器

CSS3选择器

属性选择器
element[name=value];name=vlaue 的元素；
示例:input各种type
input[type=text]{background: red;}

    element[name]:只要包含name的元素；
        示例: <div type></div>
            *[type]{background:red}

    element[name~=vlaue]:包含value整个单词的元素;
        示例：<div title="apple banana"></div>
            div[title~=apple]{backgrund:red;}

    element[name*=vlaue]:包含value这个字母的元素;
        示例：<div title="apple a banana"></div>
            div[title*=apple]{backgrund:red;}

    element[name^=vlaue]:以value开头的元素;

    element[name$=value]:以value结尾的元素;

    element[name|=value]:以整个是value或者以value-开头的元素;

    element[name1][name2]{background:red;}拥有多个name的元素;

伪类选择器

element:nth-child(n){}:正着数第n个element;

element:nth-last-child(n):倒着数第n个element;

element:nth-child(2n):偶数行;--->element:nth-child(even)

element:nth-child(2n-1):奇数行;--->element:nth-child(odd)

element:first-child{}第一个元素;

element:last-child{}最后一个元素;

element:empty{}空元素;没有内容的元素;

element:disabled{}不可用的元素,一般指的是表单元素;

element:enabled{}:激活的可用的元素,一般指的是表单元素;

element:checked{}选中的元素,指的是表单元素，比如：radio

element:target{}被选中的元素;比如选项卡;

element:nth-last-child(n){}:倒数第N个元素;--->element:nth-last-child(1):倒数第一个元素;

element:nth-of-type(1):所有类型里面的第N个元素;

element:nth-last-of-type(1):所有类型里面倒数第1个元素;

element~obj{}选择element下面的兄弟元素;

element>obj{}选择子元素;

element:not(.class){}不包含某个class的元素;

element:first-line{}第一行文字;

element:first-letter{}:第一个文字;

element::selection{}选中的文本，文字;

::selection{}所有选中的文字,--->*selection{}所有选中的文字;

element::after{}文本的前面添加东西，配合content:'asd'

element::before{}文本的后面的添加东西;配合content:'adsa'

CSS3新的样式

css3新的样式有些浏览器不兼容,需要加浏览器前缀:
    -webkit-:chrome,opera,safari,
    -moz-:firefox,
    -ms-:microsoft,
    -o-:opera,
    s

• transform:rotate(30deg)—->deg:角度;

  案例:点击div旋转;

  obj.style.transform = "rotate(30deg)";
  js封装;
  

• 动画

  运动形式：
      linear
      ease
      ease-in
      ease-out
      ease-in-out
  
  基础动画：transition,想运动谁,就把动画加给谁;
  
      transition: 时间 要运动的属性[width,height,background···] 运动形式;
  
      运动多个属性,以逗号隔开;transition:1s width ease,1s height ease, 1s background ease-in;
  
  高机动画:
  
     定义动画： @keyframes 动画名称{
          form {}
          to{}
     }
  
     执行动画：animation： 时间  动画名称 运动形式
  

• 圆角

     border-radius: 10px | 50%;
     border-radius: 10px 20px; 上下10px，左右20px；
     border-radius:100px 20px 50px ;上100px 左右20px，下50px；
     border-radius: 100px 50px ;上下100px，左右50px；
     border-radius: 10px/30px--->x/y: x轴[水平]，y轴[垂直]；
  

• 颜色的表达方式

  rgba(0,0,0,.5);//黑色半透明;

• 文字阴影

  text-shadow: 1px 1px 4px red;
               x轴  y轴 模糊度 颜色;
  

• 文字描边

  text-stroker: 1px red;
  

• 块阴影

  box-shadow: 1px  1px   4px   red;
              x轴  y轴    模糊度 颜色;
  box-shadow: insert 1px  1px   4px   red;内阴影;
  box-shadow: outer 1px 1px 4ps red ;外阴影;
  box-shadow: 1px   1px   4px   5px   red;
              x轴    y轴   模糊度  扩展  颜色;
  box-shadow: [insert]  x轴  y轴  blur  [spread]  color  ---->[]中的参数可有可无,insert为内阴影,spread为扩展;如果需要叠加多个颜色,以逗号隔开;     
  

• 渐变

     线性渐变：
             background:linear-gradient(color1,color2···):
             background:linear-gradient(left,top,right,bottom,color1,color2···)方向:left,right,top,bottom, left top···
             background:linear-gradient(left,top,right,bottom,color1,color2···)方向:0deg:left,90deg:bottom;
             渐变区域大小：
                 -webkit-gradient(方向,color 大小,color2 大小····);
  
     径向渐变：
         background:-webkit-radial-gradient(x y,color1,color2····)x,y代表的是形状,也可以用英文单词代替,圆形[circle]和椭圆形[ellipse];
         background:-webkit-radial-gradient(x y,x y,color1,color2····):第一个xy代表的是圆心的位置,可以用left,right,top,bottom代替，也可以使用数值加单位的形式代替,第二个x y 代表的是形状,也可以用单词代替,圆形[circle]和椭圆形[ellipse]
  
     重复渐变:
         background:-webkit-repeating-liinear-gradient(red 0px,blue 10px):
  

• 蒙版

  -webkit-mask:url(1.png);—->特点:有颜色的地方会显示出来,跟颜色无关;用PS做一个透明的图片,覆盖到div上就可以了.

• 倒影

     -webkit-box-reflext: 方向  距离  渐变;
         方向取值：
                 下：below, 上above  右right  左left
  

• 文字排列

     direction: ltr | rtl |;left to right | right to left;
     此样式需要配合Unicode-bidi:bidi-override才可以生效;
  

• 变形

     transform:
         rotate(30deg):旋转
         scale(x,y):缩放--->scaleX();--->scaleY();
         translate(x,y):平移--->translateX();--->translateY();
         skew(x,y):倾斜度
         以上样式,物体的本身并没有发生变化,盒子模型也没有发生变化,位置信息也没有发生变化;也就是说并不会引起浏览器重绘重排,性能比较高;只是视觉上发生了变化;
         案例:CSS3时钟;
     transform-origin: 旋转中心点;也可以理解成绕着哪个坐标开始转;
         center center
         left center
         rigth center
      ***transform多个值同时写的时候,先写的后生效,比如:旋转60deg,缩放2倍,横向平移300px应该写成:
             transform:translateX(300px) sclae(2) rotate(deg);
  

3D

坐标:
    x:
    y:
    z:
    **面朝坐标轴,顺时针旋转;

transform:
    rotateX():
    rotateY():
    rotateZ():
3D需要配合透视(景深)来使用,透视/景深:观察物体的远近程度;
    perspective:取值number+单位;此属性加给要变化的物体;比如:perspective(800px)