<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 复合选择器 -->
<!-- 后代选择器
后代选择器前面可以是如何基础选择器 之间用空格隔开
-->
<!-- div>(div>img)+p*2 -->
<div>
<div><img src="" alt=""></div>
<p></p>
<p></p>
</div>
<div id="app"></div>
<div class="app"></div>
<ul class="nav"></ul>
<ul id="name"></ul>
<!-- ul>li.item$$${链接$}*2 -->
<ul>
<li class="items001">链接01</li>
<li class="items002">链接02</li>
<li class="items003">链接03</li>
</ul>
用 户 名:<input type="text" name="username" autocomplete="off"/><br />
密  码:<input type="password" name="pwd" /><br />
确认密码:<input type="password" name="repwd" />
<style>
input:focus {
display: inline-block;
color: pink;
background-color: yellow;
}
/* 交集选择器应用场景:在多个相同标签中选择具有某些类的标签 */
/* 众多div中选择带有info类的元素 */
div.info {
color: blue;
}
</style>
<div class="info">div中的提示信息</div>
<div>我就是一个div</div>
<p class="info">段落中的提示信息</p>
<!-- 开发时不要在文本类元素中添加其他元素,专注于文本存放(h1~h6、p)。 -->
<p>
<div>this is a paragraph</div>
</p>
<!-- p里面方div,在浏览器接续后:::
<p>
</p>
<div>this is a paragraph</div>
<p></p> -->
<!-- 行内元素 -->
<!-- 行内元素之间可能有间隙, -->
<!-- 行内元素默认宽度是内容宽度(内容撑开) -->
<!-- 只能容纳文本或其他行内元素 -->
<!-- 链接里面不要放链接了,如果放了会跳转到里面的url -->
<!-- <a href="./01 后代选择器.html"><a href="./02 子代选择器.html">asdasd</a></a> -->
<!-- 特殊情况的链接可以存放块元素 -->
<!-- <a href="./03 并集选择器.html" target="_block"><img src="../images/bdlogo.gif" alt=""></a> -->
<!-- 行内块元素inline-block -->
<!-- inline-block 特点:
一行显示,彼此之间可能有间隙(inline特点)
默认宽度就是本身内容的宽度(inline特点)
可以设置宽度 高度 内间距 边框 外边距(block特点)
-->
<!-- img input td是 inline-block -->
<!-- 链接伪类选择器 -->
<!-- 顺序不可变lvha -->
<style>
/* a:link 未被成功访问的链接(判断标准是a链接的href) */
a:link {
color: #ccc;
text-decoration: none;
}
/* a:visited 访问过的(点击过的) 刷新还是不变 */
/* a:visited 中只能设置颜色,其他属性被浏览器显示,设置无效 */
a:visited {
color: #369;
/* 无作用 */
/* text-decoration: none; */
}
/* a:hover 鼠标经过 hover可以写在任意元素身上 */
a:hover {
color: pink;
}
/* a:active 选中的 */
a:active {
color: purple;
}
</style>
<a href="#">fun man</a>
<a href="http://xxxxxxxxxx.com" target="_block"> no can</a>
<!-- line-height -->
<!-- 行高等于高度,文字水平居中 -->
<!-- 行高小于行高,文字偏上 -->
<!-- 行高大于行高,文字偏下 -->
<!-- 原理:行高的上下空隙会平均分配 -->
<!-- background-image -->
<!-- 应用场景:
logo
装饰图片
超大图片
精灵图(雪碧图) -->
<!-- background-image: none;没有背景 -->
background-image: url();
<div class="pic"></div>
<style>
.pic {
width: 200px;
height: 200px;
background-image: url(../images/bg5.png),
url(../images/icon.png)
}
</style>
<!-- background -->
<!-- background-position: center left;
如果是预定义的方位,不分x与y,浏览器按照方位词判断位置 -->
<!-- background-position:20px 20px;
background-position:center 40px;
如果出现精确值,则第一个一定是x,第二个是y -->
<!-- background的复合写法
background:skyblue url(../images/logo.jpg) no-repeat fixed center 12px;
background:color image repeat attachment position; -->
<!-- 下面几种给父元素加,可以解决外边距塌陷(子盒子个垂直方向的外边距,父盒子也会一起下来) -->
<!-- /* float: left; */
/* border: 1px solid; */
/* position: absolute; */
/* display: inline-block; */
/* display: table-cell; */
/* overflow: hidden; */
/* overflow: auto; */ -->
</body>
</html>
复合选择器
最新推荐文章于 2024-08-17 23:02:19 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)