Html学习之九（CSS选择器的使用--位置选择器）
2024-08-30 20:40:18
位置选择器：
一、.:first-child选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>first-child选择器的使用</title>
<style type="text/css">
p:first-child{color: red;}
</style>
</head>
<body>
<p>第一篇 毕业了</p>
<p>第二篇 关于考试</p>
<p>第三篇 夏日飞舞</p>
<p>第四篇 惆怅的心</p>
<p>第五篇 畅谈美丽</p>
</body>
</html>
结果：
二、.:last-child选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>last-child选择器的使用</title>
<style type="text/css">
p:last-child{color: blue;}
</style>
</head>
<body>
<p>第一篇 毕业了</p>
<p>第二篇 关于考试</p>
<p>第三篇 夏日飞舞</p>
<p>第四篇 惆怅的心</p>
<p>第五篇 畅谈美丽</p>
</body>
</html>
结果：
三、.:nth-child(n)选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nth-child(n)选择器的使用</title>
<style type="text/css">
p:nth-child(2){color: red;}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一篇 毕业了</p>
<p>第二篇 关于考试</p>
<p>第三篇 夏日飞舞</p>
<p>第四篇 惆怅的心</p>
<p>第五篇 畅谈美丽</p>
<h1>这是标题</h1>
</body>
</html>
结果：
四、.:nth-of-type(n)选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nth-child(n)和nth-last-child(n)选择器的使用</title>
<style type="text/css">
/* p:nth-child(2){color: red;}*/
p:nth-last-child(2){color: blue;}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一篇 毕业了</p>
<p>第二篇 关于考试</p>
<p>第三篇 夏日飞舞</p>
<p>第四篇 惆怅的心</p>
<p>第五篇 畅谈美丽</p>
<h1>这是标题</h1>
</body>
</html>
结果：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nth-of-type(n)和nth-last-of-type(n)选择器的使用</title>
<style type="text/css">
h2:nth-of-type(2n+1){color: red;}
h2:nth-of-type(2n){color:green;}
p:nth-last-of-type(2){color: blue;}
</style>
</head>
<body>
<h2>网页设计</h2>
<p>网页设计是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。</p>
<h2>JAVA</h2>
<p>Java是一种可以撰写跨平台应用程序的面向对象的程序设计语言。</p>
<h2>iOS</h2>
<p>iOS是由苹果公司开发的移动操作系统。</p>
<h2>PHP</h2>
<p>PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。</p>
</body>
</html>
结果：
最新文章
- linux（centos）下挂载ntfs文件系统
- jQuery省市区三级联动插件
- 非常好的javascript 代码
- C#引用类型（class)和值类型(struct)
- 清北学堂2017NOIP冬令营入学测试P4747 D’s problem(d)
- Mysql 分区
- typeof操作符在javascript中运用时时页面上的操作数显示
- bootstrap-图文混排 media
- starling 笔记
- ERDAS IMAGINE 9.2安装破解方法
- error: /usr/include/objc/objc-class.h: No such file or directory
- iOS给背景添加点击事件
- VSTO：无法安装此应用程序，因为已安装具有相同标识的应用程序
- Extjs Tooltip属性的使用
- 解决红米等手机(移动端)无法触发touchend事件
- fedora 安装pylab 并简单绘制三角函数
- 移动web点5像素的秘密（转）
- get和post与服务端的交互方式
- Excel地图插件（ExcelMaps）
- 18mysql3