選取器運用
一、前置作業:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul>
Step1:練習1:讓list清單的項目在方框內
[one-half-first]CSS美化
li{ list-style-position: inside; padding-left: 10px; border: 1px solid #000; line-height: 30px; }
[/one-half-first]
[one-half]美化結果
[/one-half]
Step2:練習2:將li改為矩形方框
[one-half-first]將li改為矩形方框
<style> li{ list-style: none; border: 1px solid #000; font-size: 30px; display: inline-block; width: 40px; height: 40px; text-align: center; line-height: 40px; } </style>
[/one-half-first]
[one-half] CSS美化結果
[/one-half]
二、運用JQ,進行化美化:
說明1:選取項目為【常數】
JQ程式
//選取項目為【常數】 $('li:nth-child(2)').css({'background':'yellow'}); $('li:eq(2)').css({'background':'green'}); $('li').eq(3).css({'background':'red'});
美化結果
說明2:選取項目為【變數】
JQ程式
//選取項目為【變數】 var $index1=4, $index2=5; // $('li:eq($index1)').css({'background':'#438c23'}); $('li:eq('+$index1+')').css({'background':'#ffb169'}); $('li').eq($index2).css({'background':'#2c85a2'});
美化結果
說明3:加入click事件
CSS美化
li{ cursor: pointer; } li:nth-child(7){ background: #e93580; }
JQ程式
※JQ設定時,CSS設定若為空值,則顯示原來CSS值。
//選取項目為【事件】 $('li').click(function(){ $(this).css({'background':'#c073f3'}).siblings().css({'background':''}); });
結果
END