一、结构伪类选择器
1、基本用法
1、作用与优势
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的元素
| 选择器 | 说明 |
| E: first-child{} | 匹配父元素中第一个子元素，并且是E元素 |
| E: last-child{} | 匹配父元素中最后一个子元素，并且是E元素 |
| E: nth-child(n){} | 匹配父元素中第n个子元素，并且是E元素 |
| E: nth-last-child(n){} | 匹配父元素中倒数第n个子元素，并且是E元素 |
<head>
<style>
li:nth-child(5) {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>这是第1个li标签</li>
<li>这是第2个li标签</li>
<li>这是第3个li标签</li>
<li>这是第4个li标签</li>
<li>这是第5个li标签</li>
<li>这是第6个li标签</li>
<li>这是第7个li标签</li>
<li>这是第8个li标签</li>
</ul>
</body>浏览器显示效果：
2、公式
| E: nth-child(n){} | 匹配父元素中第n个子元素，并且是E元素 |
| E: nth-last-child(n){} | 匹配父元素中倒数第n个子元素，并且是E元素 |
以上选择器中的n也可以用公式替换。
| 功能 | 公式 |
| 偶数 | 2n、even |
| 奇数 | 2n+1、2n-1 |
| 找到前五个 | -n+5 |
| 找到从第五个往后 | n+5 |
<head>
<style>
li:nth-child(4n) {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>这是第1个li标签</li>
<li>这是第2个li标签</li>
<li>这是第3个li标签</li>
<li>这是第4个li标签</li>
<li>这是第5个li标签</li>
<li>这是第6个li标签</li>
<li>这是第7个li标签</li>
<li>这是第8个li标签</li>
</ul>
</body>二、伪元素
伪元素：一般页面中的非主体内容可以使用伪元素
区别：
- 元素：HTML设置的标签
- 伪元素：由css模拟出的标签效果
种类：
| 伪元素 | 作用 |
| ::before | 在父元素内容的最前添加一个伪元素 |
| ::after | 在父元素内容的最后添加一个伪元素 |
注意点：
- 必须设置content属性才能生效
- 伪元素默认是行内元素
<head>
<style>
.father{
width: 300px;
height: 300px;
background-color: pink;
}
.father::before{
/* 内容 */
/* content必须添加 否则不生效 */
content: '老鼠';
color: green;
width: 100px;
height: 100px;
background-color: yellow;
/* 默认是行内元素 */
display: inline-block;
}
.father::after{
content: '大米';
}
</style>
</head>
<body>
<!-- 伪元素 通过css创造标签 用于添加装饰性的不重要的小图 -->
<!-- 找父级元素 在这个父级元素里面创造子级标签 -->
<div class="father">爱</div>
<!-- 老鼠爱大米 -->
</body>浏览器显示结果：
三、标准流
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见的标准流排版规则：
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素或行内块元素：从左往右，水平布局，空间不够自动折行
四、浮动
什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动 ？
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。如果图像是右浮动，下面的文本流将环绕在它左边：
<head>
<style>
img
{
float:right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>浏览器显示效果：
彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。在这里，我们对图片廊使用 float 属性：
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。使用 clear 属性往文本中添加图片廊：
.text_line
{
clear:both;
}浮动需多在项目中实践，其内容待完善。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
