Css基礎知識（二）

時間 2019-11-16

標籤 css 基礎知識欄目 CSS 简体版

原文原文鏈接

第六章,子元素和後代元素

元素之間的關係
        父元素:直接包含子元素的元素
        子元素:直接被父元素包含的元素
        祖先元素:直接或間接包含後代元素的元素，父元素也是祖先元素
        後代元素:直接或間接被祖先元素包含的元素，子元素也是後代元素
        兄弟元素:擁有相同父元素的元素叫作兄弟元素

css

第七章:僞類選擇器

Pseudo-class selector:僞類選擇器

僞類專門用來表示元素的一種特殊狀態
        好比:訪問過的超連接，普通超連接，獲取焦點的文本框
        使用場景:當咱們須要爲這些特殊狀態的元素設置樣式時使用

link
  爲沒訪問過的連接設置一個樣式爲藍色
           ： link
              -表示普通的鏈接(沒訪問過的連接)

爲訪問過的連接設置一個顏色爲紫色
     : visited
       - 表示訪問過的連接瀏覽器是經過歷史記錄來判斷一個連接是否訪問過，因爲涉及到用戶隱私問題，全部使用visited僞類只能設置字體的顏色

hover鼠標移入的狀態

active超連接被點擊後的狀態

hover和active也能夠爲其餘元素設置樣式,好比p標籤

focus:文本框獲取焦點之後，修改背景爲天藍色

selection:爲p標籤中選中的文字設置樣式

html

第八章:僞元素

Pseudo element:僞元素

使用僞元素表示元素中的一些特殊位置

first-letter:
爲第一個字符設置一個特殊樣式

first-line:
爲第一行設置僞元素顏色爲天藍

before:
before表示元素最前面的部分
通常before都要將結合content這個樣式使用
經過content能夠向before特殊位置添加一些樣式

after:
after表示元素最前面的部分
通常after都要將結合content這個樣式使用
經過content能夠向after特殊位置添加一些樣式

瀏覽器

第九章:屬性選擇器

Attribute selector:屬性選擇器

title屬性，這個屬性能夠給任何標籤指定
    當鼠標移入到元素上時，元素中的title屬性的值將會做爲提示文字顯示

爲全部具備title屬性的p元素設置一個背景顏色天藍色
        屬性選擇器
        -能夠根據元素中屬性或屬性值來選取指定元素
        -語法:
            -[屬性名] 選取含有指定屬性的元素
            -[屬性名="屬性值"] 選取含有指定屬性值的元素
            -[屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素
            -[屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素
            -[屬性名*="屬性值"] 選取屬性值含有指定內容的元素
        
        -爲title屬性值爲hello的元素設置一個背景色熒光綠
        -爲title屬性值以ab開頭的元素設置一個背景色紅色
        -爲title屬性值以c結尾的元素設置一個背景色紫色
        -爲title屬性值含有c的元素設置一個字體白色

例子:測試

<style type="text/css">
            p[title]
            {
                background-color: skyblue;
            }
            
            p[title=hello]{
                background-color: greenyellow;
            }
            
            p[title^="ab"]{
                background-color: red;
            }
            
            p[title$="c"]{
                background-color: #800080;
            }
            
            p[title*="c"]{
                color:white;
            }
        </style>
<body>
        <p title="這是title標籤的提示文字">這是一段測試文字</p>
        <p >這是一段測試文字</p>
        <p >這是一段測試文字</p>
        <p title="hello">這是一段測試文字</p>
        <p title="abcdefg">這是一個title屬性以ab開頭的屬性值</p>
        <p title="dec">這是一個title屬性以c結尾的屬性值</p>
    </body>

字體

第十章:子元素的僞類

Pseudo-classes of child elements:子元素的僞類

爲第一個元素設置一個背景色
               first-child:選中第一個子元素
               last-child:選中最後一個子元素

nth-child 能夠選中任意位置的子元素
                          -該選擇器後邊能夠指定一個參數，指定要選中第幾個子元素
                          -even:表示偶數
                          -odd:表示奇數

first-child-type
               last-child-type
               nth-chile-type
               和first-child,last-child,nth-child用法同樣
               只不過child是在全部子元素中排列（大排行，在全部子元素之中）
               而type是在當前類型的子元素中排列（小排行，在當前類型子元素中排行）

spa

第十一章:兄弟元素選擇器和否認僞類

Sibling Element Selector：兄弟元素選擇器

爲span後的一個p元素設置背景色熒光綠
               後一個兄弟選擇器
               做用:能夠選擇一個元素後緊挨着指定的兄弟元素
               語法:前一個 + 後一個
               
               
選中後邊的全部兄弟元素
前一個 ~ 後邊全部

爲全部p元素設置一個背景顏色熒光綠，除了class值爲hello的
               否認僞類:
                      能夠從已選的元素中剔除某些元素
               語法:
                   :not(選擇器)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。