结构伪类选择器
来源:互联网 发布:刘备怎么玩 知乎 编辑:程序博客网 时间:2024/06/06 01:38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*li:nth-child(3){
color:tomato;
}
li:nth-last-child(2){
color:fuchsia;
}*/
li:first-child{
color: red;
}
li:last-child{
color:yellow;
}
p:nth-of-type(2){
color:cyan;
}
</style>
<title>结构伪类选择器</title>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
<li>列表项8</li>
</ul>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
<li>列表项8</li>
</ul>
<div>
<p>段落1</p>
<div>伪段落</div>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*li:nth-child(3){
color:tomato;
}
li:nth-last-child(2){
color:fuchsia;
}*/
li:first-child{
color: red;
}
li:last-child{
color:yellow;
}
p:nth-of-type(2){
color:cyan;
}
</style>
<title>结构伪类选择器</title>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
<li>列表项8</li>
</ul>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
<li>列表项6</li>
<li>列表项7</li>
<li>列表项8</li>
</ul>
<div>
<p>段落1</p>
<div>伪段落</div>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
</body>
</html>
0 0
- 结构伪类选择器
- 结构伪类选择器
- 结构伪类选择器
- 结构伪类选择器
- CSS结构伪类选择器
- 对于结构伪类选择器
- css3中的结构伪类选择器
- 结构伪类选择器中的 n
- html5第八课时,结构伪类选择器
- CSS伪类选择器(结构伪类)
- CSS学习(二)-结构伪类选择器、属性选择器
- CSS3之选择器1(属性选择器,结构伪类)
- CSS3新增选择器[2]:结构伪类(2)
- CSS3学习笔记 之 结构伪类选择器
- HTML5中CSS3的结构伪类选择器
- css选择器-伪类选择器
- CSS伪类选择器
- css3 伪类选择器
- 2017 ECNU 网赛 D. 实验室传染病
- 12.1 继承
- 属性选择器
- 属性选择器
- request方法大全
- 结构伪类选择器
- C++primer11
- (三)Fiori创建项目-WEBIDE
- [Unity语音识别项目续]字符串匹配算法
- 二叉树的概念和基本操作
- 【动态树之link_cut_tree学习小记】
- 状态伪类选择器
- 12.2 继承2
- 名企笔试:2016网易招聘笔试题(奖学金)