結構性偽類選擇器
阿新 • • 發佈：2017-10-09
ext3 round position 選擇 after article charset target 偽類
<!DOCTYPE html>
<html lang="en">
<head> <title>結構性偽類選擇器</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> a:hover { color: red; } /* first-line偽元素選擇器：用於某個元素的第一行文字使用樣式 */ .p1::first-line {
<body> <!-- <p>偽類選擇器是css中定義好的選擇器</p> --> <p class="p1">11111111<br/>222222</p> <p class="p2">hello world</p> <p>3</p> <p>4</p> <p>5</p> <a>hover</a> <hr/> <p id="menu"> <a href="#text1">1</a> <a href="#text2">2</a> <a href="#text3">3</a> <a href="#text4">4</a> <a href="#text5">5</a> </p> <div id="text1">text1</div> <div id="text2">text3</div> <div id="text3">text3</div> <div id="text4">text3</div> <div id="text4">text5</div> <hr/> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> </ul> <hr/> <ul class="s-ul"> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> <li>li6</li> </ul> <hr/> <div class="s-div"> <h4>1</h4> <p>1</p> <h4>2</h4> <p>2</p> <h4>3</h4> <p>3</p> <h4>4</h4> <p>4</p> <h4>5</h4> <p>6</p> </div> <hr/> <h3>nth-child()循環樣式</h3> <ul class="t-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> <li>10</li> <li>11</li> <li>12</li> </ul> <ul> <li>111111</li> </ul>
<!-- UI元素狀態偽類選擇器 --> </body>
</html>
<head> <title>結構性偽類選擇器</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> a:hover { color: red; } /* first-line偽元素選擇器：用於某個元素的第一行文字使用樣式 */ .p1::first-line {
<body> <!-- <p>偽類選擇器是css中定義好的選擇器</p> --> <p class="p1">11111111<br/>222222</p> <p class="p2">hello world</p> <p>3</p> <p>4</p> <p>5</p> <a>hover</a> <hr/> <p id="menu"> <a href="#text1">1</a> <a href="#text2">2</a> <a href="#text3">3</a> <a href="#text4">4</a> <a href="#text5">5</a> </p> <div id="text1">text1</div> <div id="text2">text3</div> <div id="text3">text3</div> <div id="text4">text3</div> <div id="text4">text5</div> <hr/> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> </ul> <hr/> <ul class="s-ul"> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> <li>li6</li> </ul> <hr/> <div class="s-div"> <h4>1</h4> <p>1</p> <h4>2</h4> <p>2</p> <h4>3</h4> <p>3</p> <h4>4</h4> <p>4</p> <h4>5</h4> <p>6</p> </div> <hr/> <h3>nth-child()循環樣式</h3> <ul class="t-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> <li>10</li> <li>11</li> <li>12</li> </ul> <ul> <li>111111</li> </ul>
<!-- UI元素狀態偽類選擇器 --> </body>
</html>
結構性偽類選擇器