JavaScript（4）——CSS選擇的藝術

時間  2019-11-13
標籤 javascript css 選擇 藝術 欄目 JavaScript 简体版
原文   原文鏈接

CSS選擇的藝術

經常使用常見的選擇器：

類選擇器[ .class ]，id選擇器[ #id ]，全局選擇器[ * ]，元素選擇器[ element ]css

根據層次關係定位：

(1) element, element

例如:　　div, p 　　【選擇：全部的div 和 p】html

(2) element  element

例如:　　div p 　　【選擇：全部div中的 p】
瀏覽器

(3) element > element

例如:　　div>p　　【選擇：全部父節點是div的p】ide

（4）element + element

例如:　　div + p　　【選擇：緊鄰在div標籤以後的一個p標籤】性能

（5）element ~ element

例如:　　div ~ p　　【選擇:在div標籤以後的全部p標籤】測試

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="selector.css">
</head>
<body>
    <div>div
        <p>p</p>
    </div>
    <p>p</p>
    <p>p</p>
    <div>div
        <div>div 
            <p>p</p>
        </div>
    </div>
    <div>div 
        <span>span
            <p>p</p>
        </span>
    </div>
    <span>span</span>
    <p>p</p>
</body>
</html>
selector.html 
div, span, p{
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: solid 1px black;
    overflow: hidden;
}
div , p{
    background: red;
}
selector.css

 

屬性相關

（6）[ attribute ]

 例如：　　[ class ]　　【選擇：全部含有class屬性的標籤】ui

（7）[ attribute = value ]

例如:　　[ class = title ]　　選擇:全部 (class屬性只有一個值且是 title 的全部元素)

(8) [ attribute ~= value ]

例如:　　[ class ~= title ]　　【選擇全部(class屬性中含有一個title值的標籤)】

(9)[ attribute |= value ]

例如:　　[ class |= title ]　　選擇全部(class屬性中只有一個值，且這個值開頭的單詞是title。) 注意：這個值是以 - 分割單詞的spa

 （10） [ attribute ^= value ]

例如:　　[ class ^= title ]　　選擇全部class屬性的第一個值的開頭是title的元素3d

 （11） [ attribute $= value]

例如:　　[ class $= title ]　　【選擇全部class屬性最後一個值的結尾是title的元素】code

 （12） [ attribute *= value ]

例如:　　[ class *= title ]　　【選擇：全部class屬性任何一個值中含有title的元素】

div, span, p{
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: solid 1px black;
    overflow: hidden;
}
/* 
[ class ]{
    background: red
}

[ class = title  ]{
    background: red
}

[ class ~= title  ]{
    background: red
}

[ class |= title  ]{
    background: red
}

[ class ^= title  ]{
    background: red
}

[ class $= title  ]{
    background: red
}

[ class *= title  ]{
    background: red
} */
selector.css 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="selector.css">
</head>
<body>
    <div class="title"> class = title </div>
    <div class="title selector">class = title selector</div>
    <div class="selector title">class = selector title</div>
    <div class="title_selector"> class = title_selector</div>
    <div class="selector_title">class = selector_title</div>
    <div class="title-selector"> class = title-selector</div>
    <div class="selector-title">class = selector-title</div>
</body>
</html>
attr_selector.html

僞類選擇

經常使用於a標籤：

(13):active

例如:　　a.active　　【選擇：正在被點擊的a元素】

(14）:hover

例如:　　a.hover　　【選擇：鼠標正在在它上面移動的a元素；也用於實現下拉菜單（drop down manu）】

(15):link

例如:　　a.link　　【選擇：還沒有被訪問的a連接】

(16):visited

例如:　　a.visited　　【選擇已經訪問過的a連接】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="selector.css">
</head>
<body>
    <a href="#" class="hover">hover</a>
    <a href="#" class="active">active</a>
    <a href="https://www.test.com" class="link">link</a>
    <a href="#" class="visited">visited</a>
</body>
</html>
a_selector.html 
div, span, p, a{
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: solid 1px black;
    overflow: hidden;
}

a.hover:hover{
    color: orange;
}
a.active:active{
    color:red;
}
a.link:link{
    color:blue;
}
a.visited:visited{
    color:green;
}
selector.css

經常使用於input文本框：

 (17) :check

例如:　　input:checked　　【選擇：被選中的radio或checkbox】

(18):disabled

例如:　　input:disabled　　【選擇：禁用的文本框】

(19):enabled

例如:　　input:enabled　　【選擇：可用的文本框】

(20):focus

例如:　　input:focus　　【選擇：被聚焦的文本框】

(21):required

例如:　　input:required　　【選擇：必填的文本框】

(22):optional

例如:　　input:optional　　【選擇：沒必要填項（可選擇填寫）的文本框】

(23):read-only

例如:　　input:read-only　　【選擇：只讀文本框】

(24):read-write

例如:input:read-write　　【選擇：可讀可寫文本框(disabled也被選擇了)】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="selector.css">
</head>
<body>
    <div>
        <input type="radio" name = 'sex' checked>
        <label>checked</label>
    </div>
    <div>
        <input type="radio" name = 'sex'>
        <label>uncheck</label>
    </div>
    <div>
        <input type="text" disabled> disabled
    </div>
    <div>
        <input type="text">enabled
    </div>
    <div>
        <input type="text" required>required
    </div>
    </div>
    <div>
        <input type="text" readonly>readonly
    </div>
</body>
</html>
input_selector.html 
div, span, p, a{
    display: inline-block;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: solid 1px black;
    overflow: hidden;
}


/* input:checked + label{
     color: red;
} */


/* 
input:disabled{
    border: red 5px solid;
}
input:enabled{
    border: green 5px solid;
}
input:focus{
    border: red 5px solid;
}
input:required{
    border: black 5px solid;
}

input:read-only{
    border: yellow 5px solid;
}

input:read-write{
    border: blue 5px solid;
}
input:optional{
    border: red 5px solid;
}
*/
selector.css

(25):invalid

例如:　　input:invalid　　【選擇：輸入值不合法的文本框】

(26):valid

例如:input:valid

選擇輸入值合法的文本框

(27):in-range

例如:　　input:in-range　　【選擇：輸入值長度或大小在規定範圍以內的文本框】

(28):out-of-range

例如:　　input:out-of-range　　【選擇：輸入值長度或大小在規定範圍以外的文本框】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="selector.css">
</head>
<body>
    <div>
        <input type="number" min="5" max="10"> range[5-10]
    </div>
    <div>
        <input type="text" minlength="5" maxlength="10"> length-range[5-10]
    </div>
    <div>
        <input type="email" >email
    </div>
</body>
</html>
input_selector.html 
div, span, p, a{
    display: inline-block;
    width: 200px;
    height: 100px;
    padding: 10px;
    border: solid 1px black;
    overflow: hidden;
}


input:in-range{
    border: 5px solid green;
}
input:out-of-range{
    border: 5px solid red;
}

input:valid{
    border: 5px solid green;
}
input:invalid{
    border: 5px solid red;
}
selector.css

文章段落相關：

(29)::after

例如:　　div::after　　【在div內容的後面插入內容】

(30)::before

例如:　　div::before　　【在div內容的前面插入內容】

(31)::first-letter

例如:　　div::first-letter　　【選擇：div內容的第一個字母】

(32)::first-line

例如:　　div::first-line　　【選擇：div內容的第一行】

 若first-letter和first-line不一樣的style修飾同一個div：

(33)::selection

選擇:鼠標選中的一段文字

 

 新發現 :由::before和::after插入的文字沒法被鼠標選中

和父結點相關:

(34):first-child

例如:　　p:first-child　　【選擇 ：p元素，知足：它是它父元素的第一個元素】

(35):last-child

例如:　　p:last-child　　【選擇： p元素，知足：它是它父結點的最後一個元素】

(36):first-of-type

例如:　　p:first-of-type　　【選擇：p元素，知足：它是它父節點的第一個p元素】

(37):last-of-type

例如:　　p:last-of-type　　【選擇：p元素，知足：它是它父節點的最後一個p元素】

(38):nth-child(n)

例如:　　p:nth-child(2)　　【選擇 ：p元素，知足：它是它父節點的第二個元素】

p:nth-child(2n)　　【選擇 ：p元素，知足：它是它父節點的第偶數個元素】

(39):nth-last-child(n)

例如:　　p:nth-last-child(2)　　【選擇 ：p元素，知足：它是它父節點的倒數第二個元素】

p:nth-last-child(2n)　　【選擇 ：p元素，知足：它是它父節點的倒數第偶數個元素】

(40):nth-of-type(n)

例如:　　p:nth-of-type(2)　　【選擇 ：p元素，知足：它是它父節點的第二個p元素】

例如:　　p:nth-of-type(2n)　　【選擇： p元素，知足：它是它父節點的第偶數個p元素】

(41):nth-last-of-type(n)

例如:　　p:nth-last-of-type(2)　　【選擇： p元素，知足：它是它父節點的倒數第二個p元素】

例如:　　p:nth-last-of-type(2n)　　【選擇 ：p元素，知足：它是它父結點的倒數第偶數個p元素】

(42):only-child

例如:　　p:only-child　　【選擇：p元素，知足：它是它父結點的惟一元素（獨生）】

(43):only-of-type

例如:　　p:only-of-type　　【選擇：p元素，知足：它是它父結點的惟一p元素（可能有其它非p元素）】

其它：

(44):root

選擇根節點

 

(45):not(selector)

例如:　　div :not(p)　　【選擇:div內全部不是p的元素(div和:之間有空格)】

 

(46):lang(language)

例如:　　div:lang(zh)　　【選擇:屬性lang=it的全部div元素】

 
 
測試於Chrome瀏覽器
 
上面的選擇器之間還能相互組合使用，精肯定位，在組合的時候也要考慮其優先級和性能等問題。
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="selector.css">
</head>
<body>
  <div class="main">
      <ul>
          <li>banner</li>
          <li>banner</li>
          <li>banner</li>
          <li>banner</li>
          <li>banner</li>
      </ul>
        <div class="news">
                <ul>
                    <li>新聞</li>
                    <li>新聞</li>
                    <li>新聞</li>
                    <li>新聞</li>
                    <li>新聞</li>
                </ul>
                <ul>
                      <li>新聞</li>
                      <li>新聞</li>
                      <li>新聞</li>
                      <li>新聞</li>
                      <li>新聞</li>
                  </ul>
            </div>
            <div class="notice">
                <ul>
                    <li>公告</li>
                    <li>公告</li>
                    <li>公告</li>
                    <li>公告</li>
                    <li>公告</li>
                </ul>
                <ul>
                      <li>公告</li>
                      <li>公告</li>
                      <li>公告</li>
                      <li>公告</li>
                      <li>公告</li>
                  </ul>
            </div>
  </div>
</body>
</html>
selector.html 
li{
    display: inline-block;
    width: 100px;
    height: 100px;
    padding: 10px;
    border: solid 1px black;
    overflow: hidden;
}

.news li:nth-child(2n){
    background: yellow
}
div.main > ul li:nth-child(2n){
    background: green
}
.main > :last-child li:nth-child(2n){
    background: black
}
selector.css

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程