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
首个字符斜体 蓝色 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代码
请点击上面的链接，: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> 这是第一行 p</p>
<p> 这是第二行 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练习笔记(二)的更多相关文章
- 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 ...
随机推荐
- 李洪强iOS经典面试题147-WebView与JS交互
李洪强iOS经典面试题147-WebView与JS交互 WebView与JS交互 iOS中调用HTML 1. 加载网页 NSURL *url = [[NSBundle mainBundle] UR ...
- 利用其它带文件防护功能的软件防止*.asp;*.jpg写入文件。
此木马是一个.NET程序制作,如果你的服务器支持.NET那就要注意了,,进入木马有个功能叫:IIS Spy,点击以后可以看到所有站点所在的物理路径.以前有很多人提出过,但一直没有人给解决的答案.. 防 ...
- C++标准库 -- tuple
头文件:<tuple> 可访问属性: 无(用get方法来访问数据) 可访问方法: swap(tuple) 和另外一个tuple交换值 其他相关方法: swap(t1, t2) 交换两个tu ...
- C %p
格式控制符“%p”中的p是pointer(指针)的缩写.指针的值是语言实现(编译程序)相关的,但几乎所有实现中,指针的值都是一个表示地址空间中某个存储器单元的整数.printf函数族中对于%p一般以十 ...
- C语言
HTML的学习早已落下帷幕,我们已经进入了C语言的学习,这段时间时间主要学了运算符.表达式.循环语句以及数组和字符串,感觉到了一种朦朦胧胧懂得尴尬. 运算符主要包括:算术运算符.赋值运算符.关系运算符 ...
- iOS真机测试,为Provisioning添加设备 -- based xcode6［原］
iOS真机测试, 我们需要添加几台新的设备进行测试.我们只需要对Provisioning Profiles 进行更新. 1. 在苹果开发者中心添加测试设备 打开苹果Certificates, Ide ...
- notepad++快捷键大全
Ctrl+C 复制 Ctrl+X 剪切 Ctrl+V 粘贴 Ctrl+Z 撤消 Ctrl+Y 恢复 Ctrl+A 全选 Ctrl+F 键查找对话框启动 Ctrl+H 查找/替换对话框 Ctrl+D 复 ...
- cloudera learning4:Hadoop集群规划
涉及到一些关于硬件的东西,我也不是很懂,记录下来有待以后学习. Hadoop集群一般都是由小到大,刚开始可能只有4到6个节点,随着存储数据的增加,计算量的增大,内存需求的增加,集群慢慢变大. 比如按照 ...
- oracle 查询结果集运算
intersec:交集minus:差集union:进行表连接后会筛选掉重复的记录,表连接之后对结果进行排序运算,删除重复记录在返回结果. union all:只是简单的将两个结果合并就返回.无论是否有 ...
- jira操作
1. 字段 关键字 issuetype 2. 语法 2.1 in AND issuekey in (WQBNEWSDLDL-348, WQBNEWSDLDL-348, WQBNEWSDLDL-352, ...