【零基础入门前端系列】—属性选择器（二十）
一、属性选择器
利用的是HTML属性
<!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>
<style>
input[type='text']{
width: 200px;
height: 50px;
}
div[class^=t]{
color:red;
}
div[class*=o]{
color:aqua;
}
div[class$=o]{
color:pink;
}
</style>
</head>
<body>
<input type="text">
<input type="passwo">
<button type="reset">重置</button>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</body>
</html>
二、定位
- position:元素定位
- 作用：相对于默认位置移动到需要的位置
属性值：
三、z-index
z-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。
当父元素设置了z-index属性时，子元素的z-index属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的z-index属性值为准进行对比，子元素本身的z-index属性值无效。
当父元素未设置了z-index属性，子元素的z-index属性与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以元素本身的z-index属性值为准进行对比。
- z-index：number；堆叠顺序
- 取值越大，层级越往上，可以取负值，但是不推荐
- 必须配合定位(relative、absolute、fixed)使用，同时定位，后面的元素在上面
- z-index属性的值分为三种：auto(默认值)：与父元素的层级相等，如各级祖先元素均未设置该属性，则类似于0、number：整数数值，在兼容所有浏览器的情况下取值范围是 -2147483584 ~ 2147483584，数值越大，层级越高，数值越小，层级越低、inherit：继承父元素的z-index的属性值
<!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>
<style>
.box{
width: 600px;
height: 600px;
background-color: skyblue;
position: relative;
margin: 100px;
}
.one{
width: 200px;
height: 200px;
background-color: red;
position: relative;
top:50px;
left:50px;
z-index: 999;
}
.two{
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
left:20px;
top:20px;
}
.three{
width: 20px;
height: 20px;
background-color: red;
bottom: 20px;
right: 20px;
position:fixed;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
练习
<!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>
<style>
.banner {
width: 303px;
height: 375px;
position: relative;
}
.banner > img {
width: 100%;
}
.text{
width: 100%;
height: 88.5px;
background-color: red;
position: absolute;
left:0;
bottom:20px;
}
</style>
</head>
<body>
<div class="banner">
<img src="/images/2.jpg" alt="" />
<div class="text">
</div>
</div>
</body>
</html>
<!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>
<style>
.box {
width: 350px;
height: 250px;
background-color: red;
position: relative;
overflow: hidden;
}
.box>img {
width: 100%;
height: 250px;
}
.hidden {
width: 350px;
height: 250px;
background-color: rgba(0, 0, 0, .5);
position: absolute;
left: 100%;
top: 0;
}
.box:hover>.hidden {
left: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="/images/food.webp" alt="">
<div class="hidden">
</div>
</div>
</body>
</html>
<!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>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000000;
}
ul li {
list-style-type: none;
float: left;
margin-left: 20px;
height: 80px;
line-height: 80px;
}
.nav {
width: 100%;
height: 80px;
background-color: pink;
position: relative;
}
.nav-list {
/* 此100%是相对于父元素的 */
width: 100%;
height: 251px;
background-color: skyblue;
position: absolute;
left: 0;
top: 100%;
display: none;
}
.nav li:hover>.nav-list {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">手机</a>
<div class="nav-list">
</div>
</li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">首页</a></li>
</ul>
</div>
</body>
</html>
