04-属性选择器
属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
语法：
1 /*根据属性查找*/ 2 /*[for]{ 3 color: red; 4 }*/ 5 6 /*找到for属性的等于username的元素 字体颜色设为红色*/ 7 /*[for='username']{ 8 color: yellow; 9 }*/ 10 11 /*以....开头 ^*/ 12 /*[for^='user']{ 13 color: #008000; 14 }*/ 15 16 /*以....结尾 $*/ 17 /*[for$='vvip']{ 18 color: red; 19 }*/ 20 21 /*包含某元素的标签*/ 22 /*[for*="vip"]{ 23 color: #00BFFF; 24 }*/ 25 26 /**/ 27 28 /*指定单词的属性*/ 29 label[for~='user1']{ 30 color: red; 31 } 32 33 input[type='text']{ 34 background: red; 35 }
05-伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*奇技淫巧*/ /*伪类选择器*/ /*a标签 要遵循 爱恨准则 LoVe HAte*/ /*.box ul li a:link{ color: green; }*/ /*访问过后显示的样式*/ /*.box ul li a:visited{ color: yellow; }*/ /*鼠标的悬浮显示的样式*/ .box ul li a:hover{ color: yellow; } /*摁住的时候显示的样式*/ /*.box ul li a:active{ color: yellowgreen; }*/ /*button:link{ background-color: red; }*/ p:hover{ color: yellow; } </style> </head> <body> <p>哈哈哈</p> <button>提交</button> <div class="box"> <ul> <li> <a href="#">百度一下</a> </li> </ul> </div> </body> </html>
伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte
1 /*没有被访问的a标签的样式*/ 2 .box ul li.item1 a:link{ 3 4 color: #666; 5 } 6 /*访问过后的a标签的样式*/ 7 .box ul li.item2 a:visited{ 8 9 color: yellow; 10 } 11 /*鼠标悬停时a标签的样式*/ 12 .box ul li.item3 a:hover{ 13 14 color: green; 15 } 16 /*鼠标摁住的时候a标签的样式*/ 17 .box ul li.item4 a:active{ 18 19 color: yellowgreen; 20 }
再给大家介绍一种css3的选择器nth-child()
/*选中第一个元素*/ div ul li:first-child{ font-size: 20px; color: red; } /*选中最后一个元素*/ div ul li:last-child{ font-size: 20px; color: yellow; } /*选中当前指定的元素 数值从1开始*/ div ul li:nth-child(3){ font-size: 30px; color: purple; } /*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/ div ul li:nth-child(n){ font-size: 40px; color: red; } /*偶数*/ div ul li:nth-child(2n){ font-size: 50px; color: gold; } /*奇数*/ div ul li:nth-child(2n-1){ font-size: 50px; color: yellow; } /*隔几换色 隔行换色 隔4换色 就是5n+1,隔3换色就是4n+1 */ div ul li:nth-child(5n+1){ font-size: 50px; color: red; }
06-伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } p::first-letter{ color: yellow; font-size: 20px; } /*1.清除浮动 2.将$变成块级元素 3.并且显示不占位置(不会影响界面布局)*/ p:after{ content: '.'; color: red; /*变成块级标签*/ display: block; /*可见的元素隐藏 隐藏完占位置*/ visibility: hidden; height: 0; /*可见元素隐藏 让元素不占位置*/ /*display: none;*/ /*display: inline;*/ /*display: inline-block;*/ } /*p span{ color: red; }*/ button:hover{ background-color: red; } </style> </head> <body> <p>alex</p> <div>哈哈哈哈</div> <button>aaa</button> </body> </html>
/*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/ p:before{ content:'alex'; } /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ p:after{ content:'&'; color: red; font-size: 40px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .top{ 100%; height: 40px; background-color: #333; } .container{ 1226px; /*height: 40px;*/ background-color: red; margin-left: auto; margin-right: auto; } .top .top-l{ 400px; height: 40px; background-color: yellow; text-align: center; line-height: 40px; /*脱离了文档*/ float: left; } .top .top-r{ 300px; height: 40px; background-color: blue; /*float: right;*/ float: right; } .wrap{ 100%; height: 200px; background-color: purple; } /*.clearfix:after{ content: "."; display: block; height: 0; visibility: hidden; clear: both }*/ </style> </head> <body> <div class="top"> <div class="container clearfix"> <div class="top-l">400*40</div> <div class="top-r">300*40</div> </div> </div> <div class="wrap"> <div class="container"> </div> </div> <div> </div> <div> </div> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
100%;
height: 300px;
background-color: red;
}
.box2{
100%;
height: 500px;
background-color: green;
}
.container{
1226px;
/*height: 300px;*/
/*background-color: pink;*/
/*让盒子居中显示*/
margin-left: auto;
margin-right: auto;
}
.box .l{
200px;
height: 200px;
background-color: yellow;
float: left;
margin-right: 20px;
}
.box .r{
300px;
height: 300px;
background-color: purple;
float: left;
}
.t{
400px;
height: 400px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="container">
<div class="l">1</div>
<div class="r">2</div>
<div class="t">3</div>
</div>
</div>
<div class="box2">
<div class="container"></div>
</div>
</body>
</html>
总结;
浮动: float:none; 不浮动 float:left;左浮动 float:right;右浮动 记住:要浮动一起浮动,要么就别浮动 选择器: id:通常与后面的js有很大关联 class: 找的共性(相同特点) .container{ 1226px; margin: 0 auto; } 交集选择器: 第一个选择器是标签选择器,第二个选择器是类选择器 div.active 组合选择器: 找共性 div,html,body,ul,ol....{ } *{ padding: 0; margin: 0 } html文档中像 link script img a audio video 等等 都是向服务器发送get请求 link script img a audio video:链接的资源文件叫静态资源文件 伪类选择器: 爱恨准则 伪元素选择器: p:after{ content:'' } 伪类选择器 伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" LoVe HAte /*没有被访问的a标签的样式*/ .box ul li.item1 a:link{ color: #666; } /*访问过后的a标签的样式*/ .box ul li.item2 a:visited{ color: yellow; } /*鼠标悬停时a标签的样式*/ .box ul li.item3 a:hover{ color: green; } /*鼠标摁住的时候a标签的样式*/ .box ul li.item4 a:active{ color: yellowgreen; } 伪元素选择器 p:after{ content: "."; display: block; height: 0; visibility: hidden; clear: both; } 1.标准文档流 行内 块 标签都是占位置 一旦标签浮动了 该标签就会 (1)脱离了标准文档流 (2)可以设置宽高 (3)不占位置 重置样式: *{ pading:0; margin:0; } 清除列表前面的点:list-style:none; 背景色: background-color:green; 字体大小: font-size 水平,垂直居中: text-align: center; line-height: 40px; 清除子元素浮动的影响: clear: both 自动偏移: margin-left:auto 属性选择器; 属性选择器，字面意思就是根据标签中的属性，选中当前的标签。 语法： /*根据属性查找*/ /*[for]{ color: red; }*/ /*找到for属性的等于username的元素 字体颜色设为红色*/ /*[for='username']{ color: yellow; }*/ /*以....开头 ^*/ /*[for^='user']{ color: #008000; }*/ /*以....结尾 $*/ /*[for$='vvip']{ color: red; }*/ /*包含某元素的标签*/ /*[for*="vip"]{ color: #00BFFF; }*/ /**/ /*指定单词的属性*/ label[for~='user1']{ color: red; } input[type='text']{ background: red; }