//本題相當于從内到外一級一級的向外回退
//while循環中先判斷元素的id是否為空,然後在判斷class是否為空,若不為空則名字增長
//每個符合小的條件的最後一句的在将元素向上移
var genCssSelector = function() {
//you code here
let ele = arguments[0];//擷取被點選的元素(li)
//let相當于定義了一個塊内變量,不會像var聲明變量時會發生變量提升,是以本代碼均使用let聲明變量
let parentEle = ele.parentNode;//擷取li的父元素ul
let CSelector = ele.tagName.toLowerCase();//将li轉換成小寫字母
while(parentEle.nodeName.toLowerCase() !== '#document') {
//注意:這裡為什麼是判斷是否等于‘#document’是因為html的父元素的nodeName就是‘#document’
//是以條件成立是就應該停止循環了
//上面是在判斷 當ul不等于‘document’時進入下面的循環,這裡為什麼要這樣判斷啊?
if(parentEle.id !== '') {//用來判斷ul元素的id是否為空,由html頁面可知ul的id為空
CSelector = '#' + parentEle.id + ' ' + CSelector;
parentEle = parentEle.parentNode;
continue;
} else if(parentEle.className) {//parentEle.className等于空
CSelector = ' ' + CSelector;//CSelector=' ul'
let classList = parentEle.classList || parentEle.className.split(' ');
for(var i = classList.length - 1; i >= 0; i--) {
CSelector = '.' + classList[i] + CSelector;
}
parentEle = parentEle.parentNode;
continue;
} else {
CSelector = parentEle.nodeName.toLowerCase() + ' ' + CSelector;
//第一次while循環直接進入CSelector等于ul li
parentEle = parentEle.parentNode;//parentEle就等于ul的父元素 div.refer
continue;
}
}
return CSelector;
}