IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

HTML5 CSS3练习笔记(二)

作者:竹林溪风  发布日期:2014-08-19 20:36:42
  • 收藏本文    我要投稿
  •  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-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;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>&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  <h4>标题</h4>
    3  <p>段落</p>
    4 </div>
    HTML示例代码 \
    1 #dd15 p:only-child{
    2 color:green;
    3 }
    CSS代码

     标题

      段落

Tag标签:笔记  
  • 专题推荐