css選擇器主要包括哪些類型,css選擇器的分類不包括什么?
css的選擇器的分類不包括“超文本標記選擇器”。
css的選擇器包括類選擇器、標簽選擇器、ID選擇器、偽類選擇器等等。
類選擇器,比如class類型 class = "nav"的話,那么css對應.nav{};
標簽選擇器,比如body input 就是直接對應 body{} input{};
ID選擇器,比如 id="name",那么css對應 #name{};
偽類、偽對象:如a:link,a:hover,a:visited等。
css元素的排列規(guī)則主要分為?
1、代表內(nèi)聯(lián)樣式,如: style=””,權值為1000。
2、代表ID選擇器,如:#content,權值為100。
3、代表類,偽類和屬性選擇器,如.content,權值為10。
4、代表類型(元素)選擇器和偽元素選擇器,如div p,權值為1。 按照CSS代碼的執(zhí)行先后順序。如果有重復的規(guī)則,按照后執(zhí)行的定義。最終規(guī)則是多個定義規(guī)則的綜合。重點:高級規(guī)則定義對于不同表格的文字樣式定義。(不同表格使用不同ID、使用類樣式定義)一頁中的多種超級鏈接樣式定義。多個相同規(guī)則不同對象的CSS共同定義。對于同一對象定義的多種CSS方式考慮哪種更科學。
css調(diào)試工具?
css說是調(diào)試工具其實只是一段 Javascript 代碼,但非常實用,它會給頁面里所有的 DOM 元素添加一個 1px 的描邊(outline),方便我們在調(diào)試 CSS 過程中分析、排查問題。
先來看看代碼,它有兩個版本,一個是使用的$$選擇器,代碼量更少(瀏覽器控制臺支持 $$ 選擇器);另一種就是傳統(tǒng)的document.querySelectorAll選擇器:
dom操作?
文檔對象模型( DOM, Document Object Model )主要用于對HTML和XML文檔的內(nèi)容進行操作。DOM描繪了一個層次化的節(jié)點樹,通過對節(jié)點進行操作,實現(xiàn)對文檔內(nèi)容的添加、刪除、修改、查找等功能。
一、DOM樹
DOM樹有兩種,分別為節(jié)點樹和元素樹。
節(jié)點樹:把文檔中所有的內(nèi)容都看成樹上的節(jié)點;
元素樹:僅把文檔中的所有標簽看成樹上的節(jié)點。
二、DOM常用操作
2.1 查找節(jié)點
document.getElementById('id屬性值');
返回擁有指定id的第一個對象的引用
document/element.getElementsByClassName('class屬性值');
返回擁有指定class的對象集合
document/element.getElementsByTagName('標簽名');
返回擁有指定標簽名的對象集合
document.getElementsByName('name屬性值');
返回擁有指定名稱的對象結合
document/element.querySelector('CSS選擇器');
僅返回第一個匹配的元素
document/element.querySelectorAll('CSS選擇器');
返回所有匹配的元素
document.documentElement
獲取頁面中的HTML標簽
document.body
獲取頁面中的BODY標簽
document.all['']
獲取頁面中的所有元素節(jié)點的對象集合型
2.2 新建節(jié)點
document.createElement('元素名');
創(chuàng)建新的元素節(jié)點
document.createAttribute('屬性名');
創(chuàng)建新的屬性節(jié)點
document.createTextNode('文本內(nèi)容');
創(chuàng)建新的文本節(jié)點
document.createComment('注釋節(jié)點');
創(chuàng)建新的注釋節(jié)點
document.createDocumentFragment( );
創(chuàng)建文檔片段節(jié)點
2.3 添加新節(jié)點
parent.appendChild( element/txt/comment/fragment );
向父節(jié)點的最后一個子節(jié)點后追加新節(jié)點
parent.insertBefore( newChild, existingChild );
向父節(jié)點的某個特定子節(jié)點之前插入新節(jié)點
element.setAttributeNode( attributeName );
給元素增加屬性節(jié)點
element.setAttribute( attributeName, attributeValue );
給元素增加指定屬性,并設定屬性值