HTML5&CSS3练习笔记(二)

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

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

说明：设置同一个标签下所有行内容的第一行的样式，例如：

 1 <table style="float: left; font-size: 1.4em;  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

3、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;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>&nbsp;这是第一行 p</p>
3 <p>&nbsp;这是第二行 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代码

标题

段落

相关阅读:
好用的视频播放器
如何屏蔽weGame今日推荐窗口
存一个大佬的地图编辑器
过渡页面，加载进度
Lua中正弦，余弦函数的使用
如何替换loadingBar的底图
使用精灵帧缓存替换纹理
setTexture和loadTexture之间的区别
我胡汉三又回来了
python中单斜杆和双斜杠的区别

原文地址：https://www.cnblogs.com/AlphaThink-AT003/p/3899258.html