HTML5&CSS3练习笔记(二)

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

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

说明:设置同一个标签下所有行内容的第一行的样式,例如:
HTML5&CSS3练习笔记(二)
 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示例代码
HTML5&CSS3练习笔记(二)
1 td:first-line

2 {

3     color:green;

4 }
CSS样式代码
这是第一行 颜色为Green
这是第二行颜色不变

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

说明:第一个单词的样式,例如:
HTML5&CSS3练习笔记(二)
1 <p>首个字符斜体 蓝色 first-letter</p>
HTML示例代码
HTML5&CSS3练习笔记(二)
1 p:first-letter

2 {

3      font-style:italic;

4      color:blue;

5 }
CSS样式代码

首个字符斜体 蓝色 first-letter

首个字符斜体 蓝色 first-letter

 3、before 格式:元素:before

说明:在某个元素现有内容之前加入内容,例如:
HTML5&CSS3练习笔记(二)
1 <p>

2     <span style="color:blue">

3          这是元素内容

4     </span>

5 </p>
HTML示例代码
HTML5&CSS3练习笔记(二)
1 span:before

2 {

3      content:' 这是元素新增的内容 ';

4 }
CSS代码

 

 4、after 格式:元素:after

说明:在某个元素现有内容之后加入内容,例如:
HTML5&CSS3练习笔记(二)
1 <p>

2     <span style="color:Blue">

3       这是元素内容

4     </span>

5 </p>
HTML示例代码
HTML5&CSS3练习笔记(二)
1 span:after

2 {

3      content:'这是元素之后的内容';

4 }
CSS代码
这是元素内容

 5、root 格式:元素:root

说明:将样式匹配到页面的跟元素中,在HTML中根元素为HTML,例如:
HTML5&CSS3练习笔记(二)
 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示例代码
HTML5&CSS3练习笔记(二)
1 p:root

2 {

3 background:red;

4 }
CSS代码

 p:root元素

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

说明:对结构使用样式 但不对结构下的元素使用样式,例如:
HTML5&CSS3练习笔记(二)
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示例代码
HTML5&CSS3练习笔记(二)
p:not(#abc){color:#f00;}
CSS代码
  • 1、 E:not()
  • 2、 E:not()
  • 3、 E:not()
  • 4、 E:not()

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

说明:当元素内容为空白时使用的样式,例如:
HTML5&CSS3练习笔记(二)
<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示例代码
HTML5&CSS3练习笔记(二)
1 #mytable td:empty{

2 content:"-";

3 text-align:center;

4 }
CSS代码
不为空的TD 为空的TD 为空则加-
不为空 - -

 8、target 格式::target

说明:页面内容跳转 指向元素Id 例如:
HTML5&CSS3练习笔记(二)
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示例代码
HTML5&CSS3练习笔记(二)
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

说明:匹配的是该类型的第一个子元素 例如:
HTML5&CSS3练习笔记(二)
1 <div id="ff">

2   <p>第一个子元素</p>

3   <p>第二个子元素</p>

4 </div>
HTML示例代码
HTML5&CSS3练习笔记(二)
1 #dd p:first-of-type{

2  color:red;

3 }
CSS代码

 这是第一行 p

 这是第二行 p

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

说明:匹配的是该类型的最后一个子元素 例如:
HTML5&CSS3练习笔记(二)
1 <div id="dd">

2 <p>&nbsp;这是第一行 p</p>

3 <p>&nbsp;这是第二行 p</p>

4 </div>
HTML示例代码
HTML5&CSS3练习笔记(二)
#dd p:last-of-type{

color:red;

}
CSS代码

 这是第一行 p

 这是第二行 p

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

说明:匹配元素所在父元素的第n个子元素 例如:
HTML5&CSS3练习笔记(二)
1 <div id="d11">

2  <p>1</p>

3  <p>2</p>

4  <p>3</p>

5 </div>
HTML示例代码
HTML5&CSS3练习笔记(二)
1 #dd11 p:nth-child(2){

2 color:yellow;

3 }
CSS代码

 1

 2

 3

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

说明:匹配元素所在父元素的第n个子元素 从最后一个子元素开始计数 例如:
HTML5&CSS3练习笔记(二)
1 <div id="dd12">

2     <p>1</p>

3     <p>2</p>

4     <p>3</p>

5     <p>4</p>

6 </div>
HTML示例代码
HTML5&CSS3练习笔记(二)
#dd12 p:nth-last-child(2){

color:green;

}
CSS代码

 1

 2

 3

 4

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

说明:选择属于其父元素的第n个元素 例如:
HTML5&CSS3练习笔记(二)
1 <div id="dd13">

2  <p>1</p>

3  <p>2</p>

4  <p>3</p>

5  <p>4</p>

6 </div>
HTML示例代码
HTML5&CSS3练习笔记(二)
1 #dd13 p:nth-of-type(2n){

2 color:green;

3 }
CSS代码

 1

 2

 3

 4

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

说明:选择属于其父元素的第n个元素 从最后一个开始计数 例如:
HTML5&CSS3练习笔记(二)
1 <div id="dd14">

2  <p>1</p>

3  <p>2</p>

4  <p>3</p>

5  <p>4</p>

6 </div>
HTML示例代码
HTML5&CSS3练习笔记(二)
1 #dd14 p:nth-last-of-type(2n+1){

2 color:green;

3 }
CSS代码

 1

 2

 3

 4

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

说明:选择其父元素唯一个子元素 例如:
HTML5&CSS3练习笔记(二)
1 <div id="dd15">

2  <h2>标题</h2>

3  <p>段落</p>

4 </div>
HTML示例代码
HTML5&CSS3练习笔记(二)
1 #dd15 p:only-child{

2 color:green;

3 }
CSS代码

 标题

  段落

你可能感兴趣的:(html5)