亚洲综合小说另类图片

<dfn id="4z7un"><s id="4z7un"></s></dfn>
          1. <nav id="4z7un"><sup id="4z7un"></sup></nav>
            <th id="4z7un"></th>

          2. <output id="4z7un"><small id="4z7un"><input id="4z7un"></input></small></output>
            八周年活動月
            歡迎訪問長沙友點軟件科技有限公司旗下產品友點CMS官方網站!
            友點CMS

            css3選擇器簡介

            來源:友點CMS 日期:2019-05-28 16:15:15 屬于:瀏覽器兼容專題
            在講述css3選擇器之前,我們先來大概的了解一下css3的發展史,這樣大家就知道所謂的css3到底是什么了。
            HTML的誕生于20世紀90年代初,1996年底,CSS第一版誕生,1998年5月,CSS2正式發布,2004年,CSS2.1發布,2002-2010年,陸續發布部分css3新增屬性。CSS1 中定義了網頁的基本屬性:字體、顏色、基本選擇器等。
            CSS2中在CSS1的基礎上添加了高級功能,浮動和定位、高級選擇器等(子選擇器、相鄰選擇器、通用選擇器。
            CSS3遵循的是模塊化開發。發布時間并不是一個時間點,而是一個時間段。

            一、css選擇器回顧:

            打印代碼幫助
            1(1)通用選擇器:*  選擇到所有的元素;
            2(2)選擇子元素:> 選擇到元素的直接后代
            3(3)相鄰兄弟選擇器:+ 選擇到緊隨目標元素后的第一個元素
            4(3)普通兄弟選擇器:~ 選擇到緊隨其后的所有兄弟元素
            5(4)偽元素選擇器:
            6::first-line 匹配文本塊的首行
            7::first-letter 選擇文本塊的首字母
            8(5)偽類選擇器:
            9:before,:after在元素內容前面、后面添加內容(相當于行內元素)
            例如:選中ul標簽后邊的第一個div相鄰標簽。
            1ul.list +div.box

            二、css3結構選擇器:

            01(1):nth-child 選擇指定索引處的子元素
            02(2)nth-child(n) 父元素下的第n個子元素
            03(3)nth-child(odd)奇數子元素(同nth-child(2n-1))
            04(4)nth-child(even)偶數子元素(同nth-child(2n))
            05(5)nth-child(an+b)公式
            06(6):nth-last-child(n) 倒數第n個子元素
            07(7):nth-of-type(n) 父元素下的第n個指定類型的子元素
            08(7):nth-last-of-type 父元素下的倒數第n個指定類型的子元素
            09<span style="font-family: Arial, Verdana, sans-serif;">(8):first-child 選擇父元素下的第一個子元素
            10</span><span style="font-family: Arial, Verdana, sans-serif;">(9):last-child 選擇父元素下的最后一個子元素
            11</span><span style="font-family: Arial, Verdana, sans-serif;">(10):only-child 選擇父元素下唯一的子元素
            12</span><span style="font-family: Arial, Verdana, sans-serif;">(11):only-of-type選擇父元素下指定類型的唯一子元素
            13</span><span style="font-family: Arial, Verdana, sans-serif;">(12):root 選擇文檔的根目錄,返回html</span>
            例如:選中ul標簽里邊的第三個li子元素。
            1ul li:nth-child(3)

            三、css3屬性選擇器:

            1(1)E[attr] 屬性名,不確定具體屬性值
            2(2)E[attr="value"] 指定屬性名,并指定其對應屬性值
            3(3)E[attr ~="value"] 指定屬性名,其具有多個屬性值空格隔開,并包含  value值
            4(4)E[attr ^= "value"] 指定屬性名,屬性值以value開頭
            5(5)E[attr $="value"] 指定屬性名,屬性值以value結束
            6(6)E[attr *="value"] 指定了屬性名,屬性值中包含了value
            7(7)E[attr |= "value"] 指定屬性名,屬性值以value-開頭
            例如:選中所有的class類并且以類型是指定的value的div元素,讓他的背景顏色變成紅色。
            1div[class="value"]{background:red}

            四、css3偽類選擇器:

            1、UI偽類選擇器:

            1(1):enabled 選擇啟用狀態元素
            2(2):disabled 選擇禁用狀態元素
            3(3):checked 選擇被選中的input元素(單選按鈕或復選框)
            4(4):default 選擇默認元素
            5(5):valid、invalid 根據輸入驗證選擇有效或無效的input元素
            6(6):in-range、out-of-range 選擇指定范圍之內或者之外受限的元素
            7(7):repuired、optional 根據是否允許:required屬性選擇input元素
            例如:有3個input復選框,其中第一個被選中了,它的checked="checked",其他兩個沒有,那么讓這個被選中的復選框的寬高都變成50px。
            1input:checked{width:50px;height:50px}

            2、動態偽類選擇器:

            1(1):link 選擇鏈接元素
            2 (2):visited 選擇用戶以訪問的元素
            3 (3):hover 鼠標懸停其上的元素
            4 (4):ative 鼠標點擊時觸發的事件
            5 (5):focus 當前獲取焦點的元素
            例如:滑過一個div的時候,讓它的背景顏色變成紅色。
            1div:hover{background:red}

            3、其他偽類選擇器:

            1(1):not(<選擇器>) 對括號內選擇器的選擇取反
            2(2):lang(<目標語言>) 基于lang全局屬性的元素
            3(3):target url片段標識符指向的元素
            4(4):empty選擇內容為空的元素
            5(5):selection 鼠標光標選擇元素內容
            例如:有3個div,前兩個都有內容,第三個是空的,什么內容都沒有,那么讓這個空的div的背景顏色變成橙色。
            div:empty{background:orange}

            上一文章:沒有了

            下一文章:CSS選擇器的兼容性

            相關文章
              暫無信息
            亚洲综合小说另类图片
            <dfn id="4z7un"><s id="4z7un"></s></dfn>
                    1. <nav id="4z7un"><sup id="4z7un"></sup></nav>
                      <th id="4z7un"></th>

                    2. <output id="4z7un"><small id="4z7un"><input id="4z7un"></input></small></output>