CSS3學習手記（2）僞類選擇器

時間 2020-06-14

標籤 css3 css 學習手記選擇器欄目 CSS 简体版

原文原文鏈接

僞類選擇器

動態僞類
UI元素狀態僞類
CSS3結構類
否認選擇器
僞元素

動態僞類

這些僞類並不存在於HTM中，只有當用戶和網站交互的時候才能體現出來html

錨點僞類 :link :visited
用戶行爲僞類 :hover :active :focus（獲取鼠標焦點）

UI元素狀態僞類（CSS3新增）

咱們把:enabled,:disabled,:check僞類稱爲UI元素狀態僞類兼容IE9以上 check只兼容OPera網站

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
  input{width: 200px;height: 30px;border: 1px solid #f00;}
  /*不可編輯*/
  input:disabled{background: #abcdef;border: 1px solid green;}
  /*可編輯*/
  input:enabled{width: 200px;height: 30px;border: 1px solid yellowgreen;}
        </style>
    </head>
    <body>
 <input type="text" disabled="disabled">
 <input type="text">
 <input type="text">
 <input type="text">
    </body>
</html>

CSS3結構類（nth選擇器）

選擇方法spa

first-child 選擇屬於其父元素的首個子元素的每一個Element元素，併爲其設置樣式兼容IE8以上
last-child 指定屬於父元素的最後一個子元素的Element元素樣式兼容IE8以上
nth-child(n) 匹配屬於其父元素的第N個子元素，不論元素的類型兼容IE9以上（關於參數n n是一個簡單的表達式，取值從0開始，這裏只能是n，不能使用其餘字符 odd(奇數) even（偶數）
nth-last-child(n) 匹配屬於其父元素的第N個子元素，不論元素的類型，從最後一個子元素開始計數兼容IE9以上
nth-of-type(N) 選擇器匹配屬於父元素的特定類型的第N個子元素的每一個元素兼容IE9以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
div:nth-of-type(2){color: red}
        </style>
    </head>
    <body>
    <div>0-1</div>
    <section>
        <div>1-1</div>
        <div>2-1</div>
        <div>3-1</div>
    </section>
    <div>0-2</div>
    <div>0-3</div>
    <section>
        <div>2-1</div>
        <div>2-2</div>
        <div>2-3</div>
    </section>
    </body>
</html>

nth-last-of-type(N) 選擇器匹配屬於父元素的特定類型的第N個子元素的每一個元素從最後一個元素開始匹配兼容IE9以上
first-of-type 選擇器匹配屬於其父元素特定類型的首個子元素的每一個元素兼容IE9以上
last-of-type 選擇器匹配屬於其父元素特定類型的最後一個子元素的每一個元素兼容IE9以上
only-child 選擇器匹配屬於其父元素惟一子元素的每一個元素兼容IE9以上
only-of-type 擇器匹配屬於父元素的特定類型的惟一子元素的每一個元素兼容IE9以上
empty 選擇器匹配沒有子元素（包括文本節點）的每一個元素兼容IE9

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
      div{height: 30px;width: 200px;background: #abcdef;margin-top: 10px;}
      div:empty{background: red}
        </style>
    </head>
    <body>
    <div></div>
    <div>second</div>
    <div>Third</div>
    </body>
</html>

否認選擇器（not）

:not(Element/selector)選擇器匹配非指定元素/選擇器的每一個元素code

語法格式htm

父元素：not(子元素/子選擇器) 兼容IE9blog

原

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{margin: 0;padding: 0;border: none;}
        nav{width: 800px;margin: 0 auto}
        a{text-decoration: none;color: #333;font-size: 14px;width: 100px;height: 30px;float: left}
        nav > a{display: block;border-right: 1px solid red}
        </style>
    </head>
    <body>
    <nav>
        <a href="#">我是導航</a>
        <a href="#">我是導航</a>
        <a href="#">我是導航</a>
        <a href="#">我是導航</a>
        <a href="#">我是導航</a>
    </nav>
    </body>
</html>

改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{margin: 0;padding: 0;border: none;}
        nav{width: 800px;margin: 0 auto}
        a{text-decoration: none;color: #333;font-size: 14px;width: 100px;height: 30px;float: left}
        nav > a:not(:last-of-type){display: block;border-right: 1px solid red}
        </style>
    </head>
    <body>
    <nav>
        <a href="#">我是導航</a>
        <a href="#">我是導航</a>
        <a href="#">我是導航</a>
        <a href="#">我是導航</a>
        <a href="#">我是導航</a>
    </nav>
    </body>
</html>