CSS學習筆記（一）

時間 2019-11-18

標籤 css 學習筆記欄目 CSS 简体版

原文原文鏈接

一. CSS3的關係選擇器html

① E~F --> 名稱：兄弟選擇符解釋：CSS3 選擇E元素全部兄弟元素F。java

<!doctype html>
<head>
 <meta charset="utf-8" />
 <title>無標題文檔</title>
    <style>
     span~p{color:red;}
    </style>
</head>
<body>
    <div>
     <span>鋤禾</span>
        <p>鋤禾日當午</p>
        <p>汗滴禾下土</p>
    </div>
</body>
</html>

效果 : spa

二. 僞類選擇器code

①. 結構性僞類選擇器htm

用法都差很少，挑一個寫了，對象

寫的是E:nth-child(n)---->n指的是父元素的第n個子元素E遊戲

 <!doctype html>
<head>
 <meta charset="utf-8" />
 <title>無標題文檔</title>
    <style>
     p:nth-child(2){ font-size:16px;color:red;}
    </style>
</head>
<body>
    <div>
     <span>鋤禾</span>
        <p>鋤禾日當午,</p>
        <p>汗滴禾下土。</p>
        <p>誰知盤中餐，</p>
        <p>粒粒皆辛苦。</p>    
    </div>
</body>
</html>

效果：utf-8

②. UI元素狀態僞類選擇器文檔

先說說E:disabled吧！disabled是使標籤處於禁用狀態input

 <!doctype html>
<head>
 <meta charset="utf-8" />
 <title>無標題文檔</title>
    <style>
     input:disabled{background:gray;}
    </style>
</head>
<body>
    <div>
     ID:&nbsp;&nbsp;&nbsp;<input type="text" value="12" disabled /><br/><br/>
        Name：<input type="text" name="name" />
    </div>
</body>
</html>

效果：

而enabled是讓標籤處於可用狀態，默認就是enabled:

 <!doctype html>
<head>
 <meta charset="utf-8" />
 <title>無標題文檔</title>
    <style>
     input:enabled{background:gray;}
    </style>
</head>
<body>
    <div>
     ID:&nbsp;&nbsp;&nbsp;<input type="text" value="12" enabled /><br/><br/>
        Name：<input type="text" name="name" />
    </div>
</body>
</html>

效果：

還有E:checked屬性

 <!doctype html>
<head>
 <meta charset="utf-8" />
 <title>無標題文檔</title>
    <style>
     input:checked+span{background:pink}
    </style>
</head>
<body>
    <div>
     <h2>單選複選按鈕</h2>
     <input type="radio" name="man" value="0" /><span>女</span>
        <input type="radio" name="man" value="1" /><span>男</span>
        <hr />
        <p>喜歡的活動</p>
        <input type="checkbox" name="game" checked><span>玩遊戲</span>
        <input type="checkbox" name="game" /><span>畫畫</span>
        <input type="checkbox" name="game" checked/><span>游泳</span>
        <input type="checkbox" name="game" /><span>唱歌</span>
    </div>
</body>
</html>

效果圖：

三. 屬性選擇器

四. 僞對象選擇器

代碼效果部分