JQ css选择器

<style type="text/css">
选择器
   .class             .intro 选择 class="intro" 的所有元素。                            1
   #id                   #firstname 选择 id="firstname" 的所有元素。                     1
   *                 *  选择所有元素。                                           2
   element                p  选择所有 <p> 元素。                                       1
   element,element          div,p  选择所有 <div> 元素和所有 <p> 元素。                     1
   element element          div p  选择 <div> 元素内部的所有 <p> 元素。                     1
   element>element          div>p  选择父元素为 <div> 元素的所有 <p> 元素。                2
   element+element          div+p  选择紧接在 <div> 元素之后的所有 <p> 元素。                   2
   [attribute]             [target]   选择带有 target 属性所有元素。                         2
   [attribute=value]     [target=_blank]    选择 target="_blank" 的所有元素。                 2
   [attribute~=value]    [title~=flower]    选择 title 属性包含单词 "flower" 的所有元素。          2
   [attribute|=value]    [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。             2
   :link              a:link 选择所有未被访问的链接。                              1
   :visited            a:visited  选择所有已被访问的链接。                           1
   :active                a:active   选择活动链接。                                     1
   :hover             a:hover    选择鼠标指针位于其上的链接。                         1
   :focus             input:focus    选择获得焦点的 input 元素。                          2
   :first-letter        p:first-letter 选择每个 <p> 元素的首字母。                        1
   :first-line             p:first-line   选择每个 <p> 元素的首行。                         1
   :first-child         p:first-child  选择属于父元素的第一个子元素的每个 <p> 元素。        2
   :before                p:before   在每个 <p> 元素的内容之前插入内容。                     2
   :after             p:after    在每个 <p> 元素的内容之后插入内容。                        2
   :lang(language)          p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。       2
   element1~element2     p~ul   选择前面有 <p> 元素的每个 <ul> 元素。                     3
   [attribute^=value]    a[src^="https"]    选择其 src 属性值以 "https" 开头的每个 <a> 元素。    3
   [attribute$=value]    a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。         3
   [attribute*=value]    a[src*="abc"]  选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。     3
   :first-of-type       p:first-of-type    选择属于其父元素的首个 <p> 元素的每个 <p> 元素。     3
   :last-of-type        p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。     3
   :only-of-type        p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。     3
   :only-child             p:only-child   选择属于其父元素的唯一子元素的每个 <p> 元素。        3
   :nth-child(n)        p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。       3
   :nth-last-child(n)    p:nth-last-child(2)    同上，从最后一个子元素开始计数。               3
   :nth-of-type(n)          p:nth-of-type(2)   选择属于其父元素第二个 <p> 元素的每个 <p> 元素。  3
   :nth-last-of-type(n)   p:nth-last-of-type(2)  同上，但是从最后一个子元素开始计数。       3
   :last-child             p:last-child   选择属于其父元素最后一个子元素每个 <p> 元素。        3
   :root              :root  选择文档的根元素。                                   3
   :empty             p:empty    选择没有子元素的每个 <p> 元素（包括文本节点）。             3
   :target                #news:target   选择当前活动的 #news 元素。                       3
   :enabled            input:enabled  选择每个启用的 <input> 元素。                      3
   :disabled           input:disabled 选择每个禁用的 <input> 元素                      3
   :checked            input:checked  选择每个被选中的 <input> 元素。                     3
   :not(selector)       :not(p)    选择非 <p> 元素的每个元素。                              3
   ::selection             ::selection    选择被用户选取的元素部分。                          3

   .toumingdu{/*css控制透明度倒不麻烦*/
         filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
         -moz-opacity:0.5; /*Firefox私有，透明度50%*/
         opacity:0.5;/*其他，透明度50%*/
      }
   .dupianfanda{/*图片放大CSS3*/
      -webkit-transition: all 1s;//Google
      -moz-transition: all 1s;//Firefox
      -ms-transition: all 1s;//IE 
      -o-transition: all 1s;//Open 
      transition: all 1s;
      -webkit-transform: scale(1.2, 1.2);
      -moz-transform: scale(1.2, 1.2);
      -ms-transform: scale(1.2, 1.2);
      -o-transform: scale(1.2, 1.2);
      transform: scale(1.2, 1.2);
   }
</style>
<script type="text/javascript">
   /*css3属性*/

   border_radius:50|50%; 圆角
   渐变
   参数1:方向 bottom top left right;
   参数2:开始位置的颜色;
   参数3:结束位置的颜色;
   background: linear-gradient(red,#ccc);线性渐变
   background: radial-gradient(); 径向渐变
   过度
   参数1:规定应用过渡的 CSS 属性的名称。;
   参数2:定义过渡效果花费的时间;
   参数3:规定过渡效果的时间曲线;
   参数4:规定过渡效果何时开始;
   transition: all 1s;//需要一个触发器 :hover 
      translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
      translateX(n)  定义 2D 转换，沿着 X 轴移动元素。
      translateY(n)  定义 2D 转换，沿着 Y 轴移动元素。
      scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
      scaleX(n)  定义 2D 缩放转换，改变元素的宽度。
      scaleY(n)  定义 2D 缩放转换，改变元素的高度。
      rotate(angle)  定义 2D 旋转，在参数中规定角度。
      skew(x-angle,y-angle)  定义 2D 倾斜转换，沿着 X 和 Y 轴。
      skewX(angle)   定义 2D 倾斜转换，沿着 X 轴。
      skewY(angle)   定义 2D 倾斜转换，沿着 Y 轴。

      translate3d(x,y,z) 定义 3D 转化。
      translateX(x)  定义 3D 转化，仅使用用于 X 轴的值。
      translateY(y)  定义 3D 转化，仅使用用于 Y 轴的值。
      translateZ(z)  定义 3D 转化，仅使用用于 Z 轴的值。
      scale3d(x,y,z) 定义 3D 缩放转换。
      scaleX(x)  定义 3D 缩放转换，通过给定一个 X 轴的值。
      scaleY(y)  定义 3D 缩放转换，通过给定一个 Y 轴的值。
      scaleZ(z)  定义 3D 缩放转换，通过给定一个 Z 轴的值。
      rotate3d(x,y,z,angle)  定义 3D 旋转。
      rotateX(angle) 定义沿 X 轴的 3D 旋转。
      rotateY(angle) 定义沿 Y 轴的 3D 旋转。
      rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
      perspective(n) 定义 3D 转换元素的透视视图。

   //定义动画
      参数1:动画的名字;
      参数2:动画持续的时间(周期);
      参数3:动画的速度曲线(linear匀速 ease(默认|快慢快));
      参数4:延迟时间 1s;
      参数5:规定动画的播放次数;
      参数6:规定动画是否在下一周期逆向地播放。默认是 "normal"。;
      参数7:规定动画是否正在运行或暂停。默认是 "running"。;
      参数8:规定对象动画时间之外的状态。;
      (1) @keyframes name{
         %10
         %100
      }
      (2) animate()
</script>

<style type="text/css">
   red:红色
   pink:粉色
   blue:蓝色
   tomato:橘黄
   olive:橄榄绿
   orange:橙色
</style>