HTML5&CSS3练习笔记(二)（css3+html5）-HTML文章/教程-知优网

HTML5&amp;amp;CSS3 练习CSS3伪选择器使用 1、first-line 格式：元素:first-linetd:first-line{color:rgba(0,128,0,1)}说明：设置同一个标签下所有行内容的第一行的样式，例如：1&amp;lt;tablestyle=&quot;float:left;font-size:1.4em;width:391px

HTML5&CSS3 练习CSS3伪选择器使用

HTML5&CSS3练习笔记(二)（css3+html5） HTML5 amp CSS3练习笔记二第1张

1、first-line 格式：元素:first-line

td:first-line { color: rgba(0, 128, 0, 1) }说明：设置同一个标签下所有行内容的第一行的样式，例如： 1 <table style="float: left; font-size: 1.4em; width: 391px; height: 59px; border: none;"> 2 <tbody> 3 <tr> 4 <td style="border: none;"> 5 <span style="font-size: 14px;">这是第一行颜色为Green</span> 6 <br /> 7 <span style="font-size: 14px;">这是第二行颜色不变</span></td> 8 </tr> 9 </tbody>10 </table>HTML示例代码1 td:first-line2 {3 color:green;4 }CSS样式代码

这是第一行颜色为Green 这是第二行颜色不变

2、first-letter 格式：元素:first-letter

说明：第一个单词的样式，例如：1 <p>首个字符斜体蓝色 first-letter</p>HTML示例代码1 p:first-letter2 {3 font-style:italic;4 color:blue;5 }CSS样式代码

首个字符斜体蓝色 first-letter

首个字符斜体蓝色 first-letterp:first-letter { color: rgba(0, 0, 255, 1); font-style: italic }

3、before 格式：元素:before

说明：在某个元素现有内容之前加入内容，例如：1 <p>2 <span style="color:blue">3 这是元素内容4 </span>5 </p>HTML示例代码1 span:before2 {3 content:' 这是元素新增的内容 ';4 }CSS代码

这是元素内容

label:before { content: "这是元素新增的内容 " }

4、after 格式：元素:after

说明：在某个元素现有内容之后加入内容，例如：1 <p>2 <span style="color:Blue">3 这是元素内容4 </span>5 </p>HTML示例代码1 span:after2 {3 content:'这是元素之后的内容';4 }CSS代码这是元素内容dd:after { content: " 这是元素之后的内容" }

5、root 格式：元素:root

说明：将样式匹配到页面的跟元素中，在HTML中根元素为HTML，例如： 1 <html> 2 <title>测试root元素</title> 3 <head> 4 <style> 5 p:root{ 6 background:red; 7 } 8 </style> 9 </head>10 <body>11 <p>:roo元素</p>12 </body>13 </html>HTML示例代码1 p:root2 {3 background:red;4 }CSS代码

p:root元素

p:root { color: rgba(128, 128, 128, 1) }

6、not 格式：元素:not(标签名)

说明：对结构使用样式但不对结构下的元素使用样式，例如：1 <p class="abc">1、 E:not()</p>2 <p id="abc">2、 E:not()</p>3 <p class="abcd">3、 E:not()</p>4 <p>4、 E:not()</p>HTML示例代码p:not(#abc){color:#f00;}CSS代码

1、 E:not()
2、 E:not()
3、 E:not()
4、 E:not()

#tt li:not(#abc) { color: rgba(255, 0, 0, 1) }

7、empty 格式：:empty(标签名)

说明：当元素内容为空白时使用的样式，例如：<table style="border:none;width:100%; padding:5px"> <tr><td>不为空的TD</td><td>为空的TD</td><td>为空则加-</td></tr> <tr><td>不为空</td><td></td></tr></table>HTML示例代码1 #mytable td:empty{2 content:"-";3 text-align:center;4 }CSS代码

不为空的TD	为空的TD	为空则加-
不为空	-	-

#mytable tr td { text-align: center }#mytable tr td:empty { content: "-"; text-align: center }

8、target 格式：:target

说明：页面内容跳转指向元素Id 例如：1 <p><a href="#news1">跳转至内容 1</a></p>2 <p><a href="#news2">跳转至内容 2</a></p>3 4 <p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>5 6 <p id="news1"><b>内容 1...</b></p>7 <p id="news2"><b>内容 2...</b></p>HTML示例代码1 :target2 {3 border: 2px solid #D4D4D4;4 background-color: #e5eecc;5 }CSS代码

跳转至内容 1

跳转至内容 2

请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。

内容 1...

内容 2...

:target { border: 2px solid rgba(212, 212, 212, 1); background-color: rgba(229, 238, 204, 1) }

9、first-of-type 格式：E:first-of-type

说明：匹配的是该类型的第一个子元素例如：1 <div id="ff">2 <p>第一个子元素</p>3 <p>第二个子元素</p>4 </div>HTML示例代码1 #dd p:first-of-type{2 color:red;3 }CSS代码

这是第一行 p

这是第二行 p

#dd p:first-of-type { color: rgba(255, 0, 0, 1) }

10、last-of-type 格式：E:last-of-type

说明：匹配的是该类型的最后一个子元素例如：1 <div id="dd">2 <p> 这是第一行 p</p>3 <p> 这是第二行 p</p>4 </div>HTML示例代码#dd p:last-of-type{color:red;}CSS代码

这是第一行 p

这是第二行 p

#dd1 p:last-of-type { color: rgba(255, 0, 0, 1) }

11、nth-child 格式：E:nth-child(n)

说明：匹配元素所在父元素的第n个子元素例如：1 <div id="d11">2 <p>1</p>3 <p>2</p>4 <p>3</p>5 </div>HTML示例代码1 #dd11 p:nth-child(2){2 color:yellow;3 }CSS代码

#dd11 p:nth-child(0n+2) { color: rgba(255, 255, 0, 1) }

12、nth-last-child 格式：E:nth-last-child

说明：匹配元素所在父元素的第n个子元素从最后一个子元素开始计数例如：1 <div >2 <p>1</p>3 <p>2</p>4 <p>3</p>5 <p>4</p>6 </div>HTML示例代码#dd12 p:nth-last-child(2){color:green;}CSS代码

#dd12 p:nth-last-child(0n+2) { color: rgba(0, 128, 0, 1) }

13、nth-of-type 格式：E:nth-of-type(n)

说明：选择属于其父元素的第n个元素例如：1 <div id="dd13">2 <p>1</p>3 <p>2</p>4 <p>3</p>5 <p>4</p>6 </div>HTML示例代码1 #dd13 p:nth-of-type(2n){2 color:green;3 }CSS代码

#dd13 p:nth-of-type(2n) { color: rgba(0, 128, 0, 1) }

14、nth-last-of-type 格式：()

说明：选择属于其父元素的第n个元素从最后一个开始计数例如：1 <div id="dd14">2 <p>1</p>3 <p>2</p>4 <p>3</p>5 <p>4</p>6 </div>HTML示例代码1 #dd14 p:nth-last-of-type(2n+1){2 color:green;3 }CSS代码

#dd14 p:nth-last-of-type(2n) { color: rgba(0, 128, 0, 1) }

15、only-child 格式：E:only-child