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

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


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

 <table style="float: left; font-size: 1.4em; width: 391px; height: 59px; border: none;">
<tbody>
<tr>
<td style="border: none;">
<span style="font-size: 14px;">这是第一行 颜色为Green</span>
<br />
<span style="font-size: 14px;">这是第二行颜色不变</span></td>
</tr>
</tbody>
</table>

HTML示例代码

 td:first-line
{
color:green;
}

CSS样式代码

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

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

说明:第一个单词的样式,例如:

 <p>首个字符斜体 蓝色 first-letter</p>

HTML示例代码

 p:first-letter
{
font-style:italic;
color:blue;
}

CSS样式代码

首个字符斜体 蓝色 first-letter

首个字符斜体 蓝色 first-letter

3、before 格式:元素:before

说明:在某个元素现有内容之前加入内容,例如:

 <p>
<span style="color:blue">
这是元素内容
</span>
</p>

HTML示例代码

 span:before
{
content:' 这是元素新增的内容 ';
}

CSS代码

这是元素内容

4、after 格式:元素:after

说明:在某个元素现有内容之后加入内容,例如:

 <p>
<span style="color:Blue">
这是元素内容
</span>
</p>

HTML示例代码

 span:after
{
content:'这是元素之后的内容';
}

CSS代码

这是元素内容

5、root 格式:元素:root

说明:将样式匹配到页面的跟元素中,在HTML中根元素为HTML,例如:

 <html>
<title>测试root元素</title>
<head>
<style>
p:root{
background:red;
}
</style>
</head>
<body>
<p>:roo元素</p>
</body>
</html>

HTML示例代码

 p:root
{
background:red;
}

CSS代码

p:root元素

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

说明:对结构使用样式 但不对结构下的元素使用样式,例如:

 <p class="abc">1、 E:not()</p>
<p id="abc">2、 E:not()</p>
<p class="abcd">3、 E:not()</p>
<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示例代码

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

CSS代码

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

8、target 格式::target

说明:页面内容跳转 指向元素Id 例如:

 <p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p> <p>请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p> <p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

HTML示例代码

 :target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}

CSS代码

跳转至内容 1

跳转至内容 2

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

 内容 1...

 内容 2...

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

说明:匹配的是该类型的第一个子元素 例如:

 <div id="ff">
<p>第一个子元素</p>
<p>第二个子元素</p>
</div>

HTML示例代码

 #dd p:first-of-type{
color:red;
}

CSS代码

这是第一行 p

这是第二行 p

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

说明:匹配的是该类型的最后一个子元素 例如:

 <div id="dd">
<p>&nbsp;这是第一行 p</p>
<p>&nbsp;这是第二行 p</p>
</div>

HTML示例代码

#dd p:last-of-type{
color:red;
}

CSS代码

这是第一行 p

这是第二行 p

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

说明:匹配元素所在父元素的第n个子元素 例如:

 <div id="d11">
<p>1</p>
<p>2</p>
<p>3</p>
</div>

HTML示例代码

 #dd11 p:nth-child(2){
color:yellow;
}

CSS代码

1

2

3

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

说明:匹配元素所在父元素的第n个子元素 从最后一个子元素开始计数 例如:

 <div id="dd12">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</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个元素 例如:

 <div id="dd13">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>

HTML示例代码

 #dd13 p:nth-of-type(2n){
color:green;
}

CSS代码

1

2

3

4

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

说明:选择属于其父元素的第n个元素 从最后一个开始计数 例如:

 <div id="dd14">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>

HTML示例代码

 #dd14 p:nth-last-of-type(2n+1){
color:green;
}

CSS代码

1

2

3

4

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

说明:选择其父元素唯一个子元素 例如:

 <div id="dd15">
<h2>标题</h2>
<p>段落</p>
</div>

HTML示例代码

 #dd15 p:only-child{
color:green;
}

CSS代码

标题

段落

HTML5&CSS3练习笔记(二)的更多相关文章

  1. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  2. HTML5+CSS3学习笔记(一)

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  3. HTML5+CSS3学习笔记(一) 概述

    HTML5+CSS3概述      HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...

  4. HTML5&CSS3读书笔记

    Hi All, 分享一下我学HTML5 摘抄的读书笔记(我用的还是英文,因为一些新的东西还是来自于欧美国家,希望大家习惯于看一些英文材料): 1. Difference between Section ...

  5. html5+css3学习笔记-prefixfree前缀补全插件

    虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插 ...

  6. HTML5/CSS3/JS笔记

    HTML笔记: 前言: HTML无非就是围绕标签.属性.属性值这三个词展开的. (标签也可以叫做元素, 元素的内容是开始标签与结束标签之间的内容) *常规标签 <标签 属性1="属性值 ...

  7. HTML5&CSS3练习笔记(一)

    属性选择器的用法 格式:[属性/^/*/$=值] 1.[attr=val] 匹配指定值的元素 <div> <div id="section1"> 完全匹配元 ...

  8. html5+css3学习笔记音频和视频

    格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ ...

  9. HTML5 CSS3 Transform 笔记 (scale不起作用)

    Transform的 scale属性不能作用于 inline元素上,例如span 并且动画 animation  也不能作用于inline元素上 可以给span加display:inline-bloc ...

随机推荐

  1. Predicate<T>与Func<T, bool>泛型委托

    引用别人的: static void Main(string[] args) { List<string> l = new List<string>(); l.Add(&quo ...

  2. java分享第八天-01(线程)

     创建线程:1 可以实现Runnable接口.2 可以扩展Thread类本身. 通过实现Runnable创建线程:创建一个线程,最简单的方法是创建一个实现Runnable接口的类.为了实现Runnab ...

  3. php获取实时汇率数据

    支付时常常会用到支付汇率,但汇率数据是实时的,没办法首先设定好,为避免亏损,只能做到实时的了,先推荐个php函数,能实时获取汇率数据.需要curl模块支持. function getExchangeR ...

  4. 一些关于Viewport与device-width的东西~

    进行移动web开发已经有一年多的时间了,期间遇到了一些令人很困惑的东西.比如: 我们经常使用的<meta name="viewport" content="widt ...

  5. Sublime Text 2配置文件详解

    Sublime Text 2是那种让人会一眼就爱上的编辑器,不仅GUI让人眼前一亮,功能更是没的说,拓展性目前来说也完全够用了,网上介绍软件的文章和推荐插件的文章也不少,而且很不错,大家可以去找找自己 ...

  6. .net手机号码归属地查询

    调用百度 api http://apistore.baidu.com/apiworks/servicedetail/117.html 贴上代码 using Newtonsoft.Json;using ...

  7. webdriverAPI-Java

    1.1   下载selenium2.0的lib包 http://code.google.com/p/selenium/downloads/list 官方UserGuide:http://seleniu ...

  8. SharePoint Configuration Wizard - Unable to upgrade SharePoint Products and Technologies because an upgrade is already in progress

    故障描述 当要运行SharePonit Products and Technologies Configuration Wizard的时候,出现了如下图所示的错误提示. 错误信息为: Unable t ...

  9. java swing文件内容检索工具

    Java相关技术 - 文件内容检索工具 拿到一个几百M甚至上G的project让你去学习 有时候你会想知道某个关键词是在哪个文件里 比如:spring MVC配置的@RequestMapping,你从 ...

  10. iOS知识总结

    mindNote文件下载地址 : 知识总结.zip