HTML5&CSS3 练习CSS3伪选择器使用
1、first-line 格式：元素:first-line
说明：设置同一个标签下所有行内容的第一行的样式，例如： 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-line 2 { 3 color:green; 4 } CSS样式代码 这是第一行 颜色为Green 这是第二行颜色不变2、first-letter 格式：元素:first-letter
说明：第一个单词的样式，例如： 1 <p>首个字符斜体 蓝色 first-letter</p> HTML示例代码 1 p:first-letter 2 { 3 font-style:italic; 4 color:blue; 5 } CSS样式代码首个字符斜体 蓝色 first-letter
首个字符斜体 蓝色 first-letter3、before 格式：元素:before
说明：在某个元素现有内容之前加入内容，例如： 1 <p> 2 <span style="color:blue"> 3 这是元素内容 4 </span> 5 </p> HTML示例代码 1 span:before 2 { 3 content:' 这是元素新增的内容 '; 4 } CSS代码这是元素内容
4、after 格式：元素:after
说明：在某个元素现有内容之后加入内容，例如： 1 <p> 2 <span style="color:Blue"> 3 这是元素内容 4 </span> 5 </p> HTML示例代码 1 span:after 2 { 3 content:'这是元素之后的内容'; 4 } CSS代码 这是元素内容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:root 2 { 3 background:red; 4 } CSS代码p:root元素
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()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为空则加-不为空--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 :target 2 { 3 border: 2px solid #D4D4D4; 4 background-color: #e5eecc; 5 } CSS代码跳转至内容 1
跳转至内容 2
请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。
内容 1...
内容 2...
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
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
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代码1
2
3
12、nth-last-child 格式：E:nth-last-child
说明：匹配元素所在父元素的第n个子元素 从最后一个子元素开始计数 例如： 1 <div id="dd12"> 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代码1
2
3
4
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代码1
2
3
4
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代码1
2
3
4
15、only-child 格式：E:only-child
说明：选择其父元素唯一个子元素 例如： 1 <div id="dd15"> 2 <h2>标题</h2> 3 <p>段落</p> 4 </div> HTML示例代码 1 #dd15 p:only-child{ 2 color:green; 3 } CSS代码段落
转载于:https://www.cnblogs.com/AlphaThink-AT003/p/3899258.html
