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