HTML5&CSS3练习笔记(二)

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

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代码

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代码

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代码

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代码

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

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

 <div id="dd15">

  <h2>标题</h2>

  <p>段落</p>

 </div>

HTML示例代码

 #dd15 p:only-child{

 color:green;

 }

CSS代码

标题

段落

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

HTML5+CSS3学习笔记（二）页面布局：HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
HTML5+CSS3学习笔记（一）
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
HTML5+CSS3学习笔记（一）概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
HTML5&CSS3读书笔记
Hi All, 分享一下我学HTML5 摘抄的读书笔记(我用的还是英文,因为一些新的东西还是来自于欧美国家,希望大家习惯于看一些英文材料): 1. Difference between Section ...
html5+css3学习笔记-prefixfree前缀补全插件
虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插 ...
HTML5/CSS3/JS笔记
HTML笔记: 前言: HTML无非就是围绕标签.属性.属性值这三个词展开的. (标签也可以叫做元素, 元素的内容是开始标签与结束标签之间的内容) *常规标签 <标签属性1="属性值 ...
HTML5&CSS3练习笔记(一)
属性选择器的用法格式:[属性/^/*/$=值] 1.[attr=val] 匹配指定值的元素 <div> <div id="section1"> 完全匹配元 ...
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+ ...
HTML5 CSS3 Transform 笔记 (scale不起作用)
Transform的 scale属性不能作用于 inline元素上,例如span 并且动画 animation 也不能作用于inline元素上可以给span加display:inline-bloc ...

随机推荐

poco json 中文字符，抛异常JSON Exception -->iconv 转换备忘录。
起因最近linux服务器通信需要用到json. jsoncpp比较出名,但poco 1.5版本以后已经带有json库,所以决定使用poco::json(linux 上已经用到了poco这一套框架). ...
ImageLoader
配置ImageLoader 一般我们在使用ImageLoader的时候,需要在应用程序的入口进行它的一个配置,这个配置一般写到Application里边 * public void initImage ...
PHP初学习笔记（2015/4/8）
//echo C('name'); App/Action/IndexAction.class.php文件夹下的 URL模式 //输出URL模式 //echo C('URL_MODEL'),'<b ...
Spring注入方式及注解配置
一:基于xml的DI(Dependency Injection) 注入类型: 定义学生Student实体类和小汽车Car实体类:进行封装和生成ToString(),并自定义属性Car Student ...
php+ajax 登录注册页面
主要是登录注册功能,前端后台验证没有什么,这个大家可以自己加上去,比如过滤啊,正则啊等还是先放图吧这是登录及注册界面点击注册切换到注册界面,点击登录切换到登录界面 <!DOCTYPE h ...
利用JS实现购物网站商品放大镜效果
大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...
USACO翻译：USACO 2014 JAN三题（2）
USACO 2014 JAN 一.题目概览中文题目名称队伍平衡滑雪录像滑雪场建设英文题目名称 bteams recording skicourse 可执行文件名 bteams recordi ...
Elasticsearch 运维实战之1 -- 集群规划
规划一个可用于生产环境的elasticsearch集群. 集群节点划分整个集群的节点分为以下三种主要类型 Master nodes -- 负责维护集群状态,不保存index数据, 硬件要求: 一般性 ...
C# 反射之调用方法谈
反射的定义反射提供了描述程序集.模块和类型的对象(Type 类型). 可以使用反射动态创建类型的实例,将类型绑定到现有对象,或从现有对象获取类型并调用其方法或访问其字段和属性. 如果代码中使用了特性 ...
spring <context:component-scan>使用说明(转)
在xml配置了这个标签后,spring可以自动去扫描base-pack下面或者子包下面的java文件,如果扫描到有@Component @Controller@Service等这些注解的类,则把这些类 ...

HTML5&CSS3练习笔记(二)

标题

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

随机推荐

热门专题