css3基本選擇器+屬性選擇器+動態僞類+UI狀態僞類+結構類

時間 2020-02-02

標籤 css3 css 基本選擇器屬性動態狀態結構欄目 CSS 简体版

原文原文鏈接

後代選擇器html

祖先元素後代元素{ }spa

子元素選擇器（直接子元素選擇器）code

父元素>子元素{ }htm

兄弟選擇器blog

元素+兄弟元素（緊鄰該元素以後的下一個兄弟元素）three

全部兄弟元素選擇器input

元素~兄弟元素（該元素以後的全部兄弟元素）it

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div+article{color:red;}
</style>
</head>
<body>
    <div>這是div</div>
    <article>這是article</article>
    <article>這是article</article>
</body>
</html>

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    div~article{color:red;}
</style>
</head>
<body>
    <div>這是div</div>
    <article>這是article</article>
    <article>這是article</article>
</body>
</html>

屬性選擇器io

元素[屬性]ast

選擇全部帶指定屬性的元素

元素[屬性=值]

選擇全部帶指定屬性，而且指定屬性值的元素

元素[屬性~=值]

選擇全部帶指定屬性，而且屬性所包含的某個單詞爲指定屬性值的元素

元素[屬性*=值]

選擇全部帶指定屬性，而且屬性所包含的某個單詞或者字母爲指定屬性值的元素

元素[屬性^=值]

選擇全部帶指定屬性，而且屬性以指定值開頭的元素，開頭能夠是一個完整的單詞，也能夠是單個字母

元素[屬性$=值]

選擇全部帶指定屬性，而且屬性以指定值結尾的元素，結尾能夠是一個完整的單詞，也能夠是單個字母

元素[屬性|=值]

選擇全部帶指定屬性，而且屬性值爲指定值，或者屬性值以指定值-開頭（在js中經常使用到）

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    a[class]{font-weight:bold;}
    a[class="one"]{color:red;}
    a[class~="two"]{text-decoration: underline;}
    a[class^="one"]{font-style:italic;}
    a[class$="two"]{border-top:1px solid red;}
    a[class*="two"]{border-bottom:1px solid red;}
    a[class|="four"]{border-left:1px solid purple;}
</style>
</head>
<body>
    <a class="one">連接</a>
    <a class="one two">連接</a>
    <a class="three one two">連接</a>
    <a class="one~">連接</a>
    <a class="threetwo">連接</a>
    <a class="four">連接</a>
    <a class="four-oo">連接</a>
</body>
</html>

動態僞類

:link :visited :hover :active :focus

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    a:link{color:red;}
    a:visited{color:blue;}
    a:hover{color:orange;}
    a:active{color:green;}

　　 input:hover{background-color: orange;}
    input:focus{background-color: #abcdef;}
</style>
</head>
<body>
    <a href="#">連接</a>
    <br>
    <input type="text">
</body>
</html>

UI元素狀態僞類

:enabled :disabled :checked

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    input:enabled{background-color: red;}
    input:disabled{background-color: orange;}
    input:checked{width:100px;height:100px;}
</style>
</head>
<body>
    <input type="text"><br>
    <input type="text" enabled><br>
    <input type="text" disabled><br>
    <input type="checkbox" name="number" value="1">1 &nbsp;
    <input type="checkbox" name="number" value="2">2 &nbsp;
    <input type="checkbox" name="number" value="3">3 &nbsp;
</body>
</html>

結構選擇器

ele:first-child

知足某一個父元素的第一個子元素是指定元素

如section的第一個子元素，而且是div元素

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    section>div:first-child{color:red;}
</style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
    <section>
        <p>1</div>
        <div>2</div>
        <div>3</div>
    </section>
    <section>
        <div>a</div>
        <div>b</div>
        <div>c</div>
    </section>
</body>
</html>

:last-child :nth-child(n)同理

:nth-child(數字) 某個位置

:nth-child(n) 全部

:nth-child(odd) 奇數

:nth-child(even) 偶數

:nth-child(計算式) 指定計算式（n的取值從0開始）

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    li:nth-child(1){list-style: none;}
    li:nth-child(n){font-weight:bold;}
    li:nth-child(odd){color:pink;}
    li:nth-child(even){color:#abcdef;}
    li:nth-child(3n+1){text-decoration: underline;}
</style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>
</html>

nth-last-child() 同理

nth-of-type() 計數時會跳過非指定元素

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    li:nth-child(4){color:orange;} /*li的父元素的第4個子元素，且爲li*/
    li:nth-of-type(4){background-color: #abcdef;}/* li的父元素的li子元素中的第4個*/
</style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <p>4</p>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</body>
</html>

nth-last-of-type() 同理

first-of-type() last-of-type()

:only-child 做爲惟一子元素

:only-of-type 指定類型的惟一子元素，能夠有其餘類型

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    p:only-child{color:orange;}
    p:only-of-type{background-color: #abcdef;}
</style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <p>4</p>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <ul>
        <p>1</p>
    </ul>
</body>
</html>

相關標籤/搜索

每日一句

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