<ul id="yae2m"></ul>

<strike id="yae2m"></strike>

<ul id="yae2m"></ul>

<fieldset id="yae2m"></fieldset>

【靜態頁面架構】CSS之選擇器

Lowky 發布于2019-08-29 16:32 / 884人閱讀

摘要：架構基本選擇器元素選擇器通過元素名稱定位頁面元素類選擇器通過元素的屬性定位頁面元素選擇器通過元素的屬性定位頁面元素屬性必須是唯一的通配符選擇器匹配當前頁面中所有元素元素選擇器通過元素名稱定位頁面元素定位頁面中一類元素選擇器通過元素的屬性定位

CSS架構

基本選擇器

元素選擇器:通過元素名稱定位頁面元素

類選擇器:通過元素的class屬性定位頁面元素

ID選擇器:通過元素的ID屬性定位頁面元素;id屬性必須是唯一的

通配符選擇器:匹配當前頁面中所有元素

愛新覺羅

呼延覺羅

犬夜叉

層級選擇器

后代選擇器: 祖先空格后代 { 聲明塊 }后代元素包括父級元素

子選擇器:父級 > 子級 { 聲明塊 }下一個子級元素一類

相鄰兄弟選擇器:匹配指定元素的下一個相鄰兄弟元素

普通兄弟選擇器:匹配指定元素的后面所有兄弟元素

    


   犬夜叉
   
    七龍珠
    九龍珠
   
   拳皇97
   拳皇97
   拳皇97

屬性選擇器:

[屬性名稱]通過屬性名稱來對屬性值的篩選

犬夜叉

九龍珠

海賊王

木葉村

七龍珠

組合選擇器

并集選擇器:中間要以逗號分開

結果是并集

交集選擇器:

中間沒有逗號分開
結果是交集

犬夜叉

七龍珠

海賊王

偽類:是以在屬性名后面加上:hover進行鼠標懸停




呼延覺羅

偽元素

經常用的幾種偽元素:

是以p（選擇器)::after(偽元素)

before和after:




愛新覺羅

first-letter:匹配指定元素文本內容中的第一個字母




I Love You.
愛新覺羅

first-line:匹配指定元素文本內容的第一行文本內容

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, accusantium amet at consequatur dolorem eos iure laudantium modi nostrum obcaecati odit pariatur praesentium quisquam recusandae unde. Debitis iste nisi obcaecati!

selection:匹配指定元素被高亮的文本內容

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, aspernatur consequatur consequuntur, dolorem doloremque facere id illo incidunt, magnam placeat provident sit suscipit! Cupiditate dolores earum fuga necessitatibus praesentium, ut!

云服務器 GPU云服務器 css選擇器基礎選擇器css 架構之坑系列 jsp 設置頁面之

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113810.html

【靜態頁面架構】CSS之鏈接和圖像

CSS架構一。鏈接: 鏈接元素:通過使用a元素的href屬性設置跳轉到指定頁面地址 a{ color: blue; text-decoration: none; } a:hover{ cursor:default; text-decoration:...

jlanglang 2019-08-29 16:32 評論0 收藏0
前端性能優化

摘要：端優談談關于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發送，從而達到對頁面的優化。而作為一名有追求的前端，勢必要力所能及地優化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優化問題過早優化是萬惡之源。優化向：單頁應用多路由預渲染指南 Ajax 技術的出現，讓我們的 Web 應用能夠在不刷新的狀態下顯示不同頁面的內容，這就是單頁應用。在一個單頁應用中，往往只有一...

Dean 2019-08-21 18:19 評論0 收藏0
【靜態頁面架構】CSS之顯示與溢出

摘要：架構顯示與溢出顯示屬性以設置隱藏效果和元素類型設置當前元素為隱藏效果這種方式將元素設置為隱藏后，該元素不會再占有頁面空間通過屬性將元素顯示將元素設置為塊級元素將元素設置為內聯元素將元素設置為行內元素屬性以設置，元素顯示或隱藏 CSS架構顯示與溢出； 1.顯示； display屬性；以display設置隱藏效果和元素類型 div { widt...

tolerious 2019-08-29 16:34 評論0 收藏0
【靜態頁面架構】CSS之定位

摘要：架構浮動是以屬性設置容器指定的位置當前元素設置為浮動后，只影響當前元素后面的所有元素的位置塊級元素不再獨占一行，多元素之間會水平方向排列設置浮動后，會從頁面的文檔流脫離默認寬度是父級寬度的高度是后者的所有元素高度之和左浮動寬度默認是 CSS架構 1.浮動；是以float屬性設置容器指定的位置 div { width: 200px; ...

scq000 2019-08-29 16:34 評論0 收藏0
【靜態頁面架構】CSS之其它元素

摘要：架構其他元素塊級元素與內聯元素該元素獨占一行只以垂直方向排列內聯元素該元素不會獨占一行，只以水平方向排列不能設置寬高行內塊級元素該元素不會不會獨占一行，還是水平方向排列，可設置寬高塊級元素元素獨占一行，以垂直方向排列內聯元素元素不會獨占一行 CSS架構其他元素；塊級元素與內聯元素；該元素獨占一行只以垂直方向排列內聯元素；該元素不會獨占一行，只以水平方向排列(不能設置寬高) 行...

weakish 2019-08-29 16:32 評論0 收藏0