手風琴效果筆記

示例：https://wxygoing.github.io//learn/%E6%89%8B%E9%A3%8E%E7%90%B4%E6%95%88%E6%9E%9C/accordions.html

代碼：https://github.com/wxygoing/firstTimeTest/tree/master/手風琴效果

1、通過設置遮罩層透明度實現控制元素透明度

2、通過僞類實現鼠標懸停效果

3、事件綁定方法

//事件綁定方法
function bind(el, eventType, callback) {
	if (typeof el.addEventListener === 'function') {
		//標準事件綁定方法
		el.addEventListener(eventType, callback, false);
	} else if (typeof el.attenchEvent === 'function') {
		//IE 事件綁定方法
		el.attachEvent('on' + eventType, callback);
	}
}

4、根據事件的冒泡原理，找到需要變更的class的LI元素

//根據事件的冒泡原理，找到需要變更的class的LI元素
	while(target.tagName != 'LI' || target.tagName == 'BODY'){
        target = target.parentNode;
    }

 5、CSS樣式之優先級

a、CSS代碼放置位置優先級：   內聯樣式  > 內部嵌入樣式  > 外聯樣式

b、  Important （權重最高）  >  內聯樣式（1000）  >  ID （0100）  > 類、僞類、屬性選擇器 （0010）  >  標籤、僞元素  （0001）>  通配符，子元素選擇器和相鄰兄弟選擇器等（0000）

繼承的樣式沒有權重值.

相同優先級，後面的（指的是css代碼中，與html中順序無關）會覆蓋前面的，

可以通過標籤疊加判讀優先級： .wrapper li.big img  = 10 + 1 + 10 + 1 = 12

可參考文章： https://www.cnblogs.com/martinl/p/6379181.html