属性选择器[IE7+]
E[attr]
E[type="text"]
E[attr~="value"]以空格隔开，其中词列表中包含了一个value词
E[attr^="value"]以value开头
E[attr$="value"]以value结束的
E[attr*="value"]包含了value
E[attr|="value"]value或以“value-”开头的值（比如说zh-cn）

---

结构性伪类

of-type,关注以标签计算；

child，关注凡有子节点即计算，有&&的意思，缺一不成立；

E:nth-child(n) E的父元素中的第n个字节点，并且标签必须=E

p:nth-child(odd) 奇数

p:nth-child(even) 偶数

p:nth-child(2n)

E:nth-last-child(n) E的父元素中的第n个字节点，倒数计算



E:nth-of-type(n) E的父元素中的第n个字节点，只算类型E

E:nth-last-of-type(n) E父元素中的第n个字节点，只算类型E,倒数计算

E:empty E元素中没有子节点。注意：子节点包含文本节点

:first-child == :nth-child(1) IE9+
:last-child == :nth-last-child(1) IE9+
:first-of-type == :nth-of-type(1) IE9+
:last-of-type == :nth-last-of-type(1) IE9+

p:nth-of-type(2) 找到P标签父级下的第2个P标签 可能这种更靠谱
p:nth-last-of-type(2) 找到P标签父级下的倒数第2个P标签 可能这种更靠谱
p:empty 只要有东西即不成立，无论任何东西

p:only-child -->匹配那些是其父元素唯一孩子的 E 元素；IE9+
p:only-of-type -->根据 p 的类型，匹配那些在其兄弟里是唯一此类元素的 p 元素。IE9+

<div class='box1'>
<div>
<p>我是p，父级下只有我一个孩子，所以 only-child 及 only-of-type 都选中我</p>
</div>

<div>
<span>我是妹妹span</span>
<p>我是p,父级下只有妹妹span,没有别的哥哥弟弟p，但是也只有 only-of-type选中我；而only-child有妹妹span所以选不中</p>
</div>

<div>
<p>我是p，我有好多兄弟，所有我不能被选中</p>
<p>我是p，我有好多兄弟，所有我不能被选中</p>
</div>
</div>

.box1 p:only-child{background:green;color: #fff;}
.box1 p:only-of-type{background:peru;color: #fff;}

E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 不可点击时的样式
E:enabled 可点击的样式
E:checked 已选中的checkbox或radio
E:first-line E元素中的第一行
E:first-letter E元素中的第一个字符
E::selection E元素在用户选中文字时
E::before 生成内容在E元素前
E:not(s) E元素不被匹配如 p:not(.tab) //不匹配带有class='tab'的元素
E~F表示E元素毗邻的F元素
Content 属性

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

---

文本屬性

顏色模式:rgba()，应用：背景透明，颜色不透明，反向，边框透明，有bug;

文字陰影：text-shadow：x y blur color...

文字搭邊：-webkit-text-stroke:宽度 颜色 ，只支持webkit

Direction 定义文字排列方式(全兼容) 注意要配合unicode-bidi 一块使用

Text-overflow 定义省略文本的处理方式 clip 无省略号 Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

p{
direction: rtl;        /*文字從右到左*/
unicode-bidi: bidi-override

/*文字超出點點省略*/
p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}

自定義字體： @font-face
http://www.fontsquirrel.com/fontface/generator

    @font-face {
        font-family: 'chalk_marksregular';
        src: url('../font/chalkmars-webfont.eot');
        src: url('../font/chalkmars-webfont.eot?#iefix') format('embedded-opentype'),
        url('../font/chalkmars-webfont.woff2') format('woff2'),
        url('../font/chalkmars-webfont.woff') format('woff'),
        url('../font/chalkmars-webfont.ttf') format('truetype'),
        url('../font/chalkmars-webfont.svg#chalk_marksregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    p{ font-family: 'chalk_marksregular'; font-size: 100px;transition: 1s}
    p:hover{ color: #f90;}

---

最簡單的圖片切換一

window.onload = function () {
  var _prev = document.getElementById('prev'),
  _next = document.getElementById('next'),
  _txt = document.getElementById('txt'),
  _count = document.getElementById('count'),
  _img = document.getElementById('img'),
  num = 0,
  imgDate = {
    txt: ['校園美女一','校園美女二','校園美女三',
      '校園美女四','校園美女五','校園美女六'],
    img: ['../img/jc1.png','../img/jc2.png','../img/jc3.png',
        '../img/jc4.png','../img/jc5.png','../img/jc6.png']
  }
  //初始化

  tabImg()
  var len = imgDate.txt.length;
  _next.onclick = function () {
    num++;
    if (num == len) {
      num = 0;
    }
    tabImg()
  }
  _prev.onclick = function () {
    num--;
    if (num == - 1) {
      num = len - 1
    }
    tabImg()
  }
  function tabImg() {
    _txt.innerHTML = imgDate.txt[num];
    _count.innerHTML = (num + 1) + '/' + len;
    _img.src = imgDate.img[num];
  }
}

運行

---

最簡單的圖片切換二

注意:this指向；

步驟：初始化，寫循環每一個，合並函數[num = this.index;tab()]，注意this指向；

on切換：1、全清空，當前添加；2、創建上一個狀態變量：prevLi = null; 清空上一個

for (var i = 0; i < lis.length; i++) {
  lis[i].className = '' //全清空
}
this.className = 'on'//當前添加

var prevLi = null; 
prevLi = li[num];　//先存上一個狀態；
prevLi.className = '' //點擊時把上一個狀態清除
prevLi = this; //再把當前付給上一個，形成循環
this.className = 'on' //當前添加

運行

---

菜單收縮

1、關鍵在於找元素；配合index，找到每一個h2，對應自已的ul；

2、每一個ul下，對應自己的li，即需要for套for；

3、for套for中，有fn的，不需要改i,無fn的，需要改變j；

4、判斷的方法，this.className = '';

5、找到li，因事件一致，可先存在數組裏，以數組來操作;

<ul id='list'>
    <li>
        <h2>aaaaaa</h2>
        <ul>
            <li> a-a-a-a-a-a</li>
            <li> a-a-a-a-a-a</li>
            <li> a-a-a-a-a-a</li>
        </ul>
    </li>
    .....
</ul>

var list = document.getElementById('list')
var h2 = document.getElementsByTagName('h2')
var _ul = list.getElementsByTagName('ul')
var _li = null;
var arrLi = [
];
var on = true;
for (var i = 0; i < h2.length; i++) {
  h2[i].index = i; //索引值對應 每個 h2 -> ul
  h2[i].onclick = function () {
    if (this.className == '') {
      //1、當前展開，其他收縮
      for (var i = 0; i < _ul.length; i++) {
        _ul[i].style.display = 'none'
        h2[i].className = ''
      }
      _ul[this.index].style.display = 'block'
      this.className = 'on'
    } 
    else {
      _ul[this.index].style.display = 'none'
      this.className = ''
    }
  }
}
for (var i = 0; i < _ul.length; i++) { //找到所有h2下 ul
  _li = _ul[i].getElementsByTagName('li') //找到所有li
  for (var j = 0; j < _li.length; j++) {
    arrLi.push(_li[j]); //所有li存放在arrLi裏
  }
}

//for 套for ，內部的fn,可不改i，無fn，必須改i
for (var i = 0; i < arrLi.length; i++) { //操作數組，即相當於操作li
  arrLi[i].onclick = function () {
    //2、當前點擊取消
    if (this.className == '') {
      for (var i = 0; i < arrLi.length; i++) {
        arrLi[i].className = ''
      }
      this.className = 'hover'
    } 
    else {
      this.className = ''
    }
  }
}

See the Pen doxZvW by elmok (@elmok) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>