目录
css3新增选择器
兄弟选择器
- 相邻兄弟选择器
E + F { }
紧挨选择器E后的那个兄弟选择器F/* 相邻兄弟选择器，该代码意思是选择紧邻div后的那一个span元素，且只有第一个span会被选中。 */ div+span{ color: pink; }
- 通用兄弟选择器
E ~ F{ }
选择器E后的所有的兄弟选择器F
/* 通用兄弟选择器，选择所有div元素后面的span元素 */ /* 一对多 */ div~span{ color: green; }
属性选择器
选择属性attr对应属性值是value的元素（完全匹配）
[attr="value"]{ }
[href]{
background-color: pink;
/* 只有标签中带该元素，就会被选中 */
}
a[href]{
background-color: yellowgreen;
} /* 首先是a元素，其次属性带href */
a[href="#"]{
color: aqua;
}
/* a元素，属性是href，属性值是#，在表单中使用较多 */伪类选择器
动态伪类选择器
- 选择器:link{ } 未访问状态
- 选择器:visited{ } 访问后状态
- 选择器:hover{ } 鼠标悬停状态
- 选择器:active{ } 鼠标激活状态
- 选择器:focus{} 焦点状态
UI状态伪类选择器
- :enabled{} 可用状态
- :disabled{} 不可用状态
- :checked{} 单选/复选框选中状态
引入式与内嵌式使用方法举例
/* UI元素状态伪类 */
input:disabled{
background-color: #f00;
}行内样式使用方法举例
<input type="submit" name="tj" id="" value="提交" disabled style="background-color: skyblue;" />效果：
不能点击
其他伪类选择器
- :first-child{ } 第一个子元素
/* 第一个子元素 */ div :first-child{ color: red; }
- :last-child{ } 最后一个子元素
/* 最后一个子元素 */ div :last-child{ color: pink; }
- :nth-child(n){ } 第n个子元素
n还可以是表达式 2n 2n-1
n 数字 从1开始
n还可以是even偶数 odd奇数
div :nth-child(1) { color: blue; /* div中的第一个子元素 */ } div :nth-child(2) { color: blueviolet; /* div中的第二个子元素 */ } /* ：nth-child(n) 选中父元素中第n个元素 */ /* 选中奇数元素 2n-1 odd 第奇数个*/ ul li :nth-child(odd) { background-color: aquamarine; } /* 选中偶数元素 2n even 第偶数个*/ ul li :nth-child(even) { background-color: blueviolet; } /* 也可以用表达式选择 */ ul li :nth-child(3n) { background-color: green; }
- :first-of-type{ } 同种类型元素里的第一个元素
div :first-of-type{ color: aquamarine; /* 每种类型选中第一个 */ }
- :last-of-type{ } 同种类型元素里的最后一个元素
div :last-of-type{ color:red; /* 每种类型选中最后一个 */ }
- :nth-of-type(n){ } 同种类型元素里第n个元素
/* 偶数元素的两种表达 */ div :nth-child(even){ background-color: purple; } div :nth-child(2n){ background-color: purple; } /* 奇数元素的两种表达 */ div :nth-child(odd){ background-color: yellow; } div :nth-child(2n-1){ background-color: yellow; }
类元素选择器
/* li.gywm它的意思是标签为li，且带.gywm(类)的li标签 中间无空格 */
.dhbj ul>li.gywm::after {
transform: scaleX(1);
}直接选择器
/* p>span 意思为p标签内最外层的子元素span标签 */
.dhbj ul>li {
transform: scaleX(1);
}
否定选择器
/* 选择与指定元素或条件相反的元素 */
/* 如下方选择 p以外的任何元素 */
:not(p)
/* 如下方选择 含有 .abc 以外的div元素 */
div:not(.abc)伪元素
伪元素必须设置“content”属性，否则伪元素是无用的
伪元素使用举例：
::after{
content: "";
display: block;
width: 10px;
height: 10px;
}作用：
1. ::before 和 ::after 的主要作用是在元素内容前后加上指定内容
伪元素必须设置“content”属性，否则伪元素是无用的
:after{
content: "";
display: block;
width: 10px;
height: 10px;
}
/* 注意此处 li:hover::after 伪元素前方不能有空格 */
.dhbj ul .erji li:hover::after{
transform: scaleX(1);
}:after清除浮动
元素设置浮动以后，其父元素以及父元素的兄弟元素的布局都会受到影响，如父元素的背景边框不能正常显示，父元素的兄弟元素位置布局错误等，
为了避免这种浮动带来的影响必须要清除浮动，:after就是其中的一种方法。
（开启BFC）
1.给父元素加height
2.给父元素加overflow:hidden
3.在所有有浮动的元素后加一个空元素div，给此空元素添加样式clear:bothclear:left /* 清除左浮动 */
clear:right /* 清除右浮动 */
clear:both /* 清除左、右浮动 */4.给父元素添加伪元素,在此伪元素上清除浮动
ul:after{
content: '';
display: block;
clear: both;
}:before和:after 用来写小三角形
.box::before{
content: "";
/* width: 0;
height: 0; */
display: inline-block; //转为行内块元素
border: 5px solid transparent;
//设置边框的的大小，类型，以及全部透明
border-left: 5px solid red;
//将你想要的那边三角形的颜色设为非透明色或非白色就可以显示了
}
设置左右边框时显示缺了一角，原因是因为伪元素他没有宽高，所以显示不出来，要将他转化为行内块元素才可以显示完整的三角形首字母
::first-letter{ }
/* 首字母 */
p::first-letter{
font-size: 50px;
color:red ;
font-weight: 900;
}首行
::first-line{ }
/* 首行 */
p::first-line{
color: bisque;
}网页内容选中样式
::selection{ }
/* 网页内容选中样式 */
p::selection{
background-color: pink;
color: white;
}calc()样式计算属性
calc()是css3的一个新增的功能，用来指定元素的长度，你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。
calc()语法
.box {
width: calc(100% - (10px + 20px) * 2);
}calc()的运算法则
- 使用 "+"、"-"、"*" 和 "/" 运算
- 可以使用百分比、px、em、rem等单位运算
- 可以混合使用各种单位进行运算
- 表达式中有 "+" 和 "-" 时，其前后必须有空格。
- 表达式中有 "*" 和 "/" 时，其前后可以没有空格，但建议保留
隐藏元素方法
隐藏：display：none;显示：display：block；
隐藏：visibility: hidden;显示：visibility: visible；
display:none和visibility:hidden的区别
两者都是隐藏元素，前者不会占据空间，后者隐藏了依然占据空间display: none 隐藏元素同时去除元素在文档流所占的空间
visibility: hidden 隐藏元素, 但不去除元素在文档流所占的空间
visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来 这个和display: none有着质的区别
visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。这和display: none完全不一样
visibility用来设置元素的可见状态
display:none是会有回流，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”
visibility: hidden; 不会有回流，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
遮罩层效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.hezi {
width: 1300px;
margin: 0 auto;
}
.hezi li a {
display: inline-block;
}
.hezi li a img {
width: 1000px;
vertical-align: middle;
}
.hezi li {
position: relative;
float: left;
margin: 30px;
overflow: hidden;
}
.hezi li .zhezhaoceng {
position: absolute;
top: 0;
left: -100%;
background-color: rgba(0, 0, 0, .3);
color: #fff;
text-align: center;
width: 100%;
height: 100%;
line-height: 500px;
transition: 1s;
}
.hezi li:hover .zhezhaoceng {
left: 0;
}
</style>
</head>
<body>
<ul class="hezi">
<li>
<a href="#"><img src="images/212252kzgvgzkqoqcqp2go.jpg"></a>
<div class="zhezhaoceng">
<h1>这是遮罩层</h1>
</div>
</li>
<li><a href="#"><img src="images/pic2.jpg"></a>
<div class="zhezhaoceng">
<h1>这也是遮罩层</h1>
</div>
</li>
</ul>
</body>
</html>
效果：
鼠标放上去，遮罩层会从左侧缓缓滑出。
三级菜单制作：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.bj {
background-color: pink;
width: 720px;height: 60px;
margin: 0 auto;
}
* {
padding: 0;margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #FFFFFF;
}
.bj li {
text-align: center;
}
.bj>li:hover {
background-color: #87CEEB;
}
.bj>li {
float: left;
line-height: 60px;
width: 180px;
}
.bj .bj1 {
background-color: #46a6d9;
display: none;
}
.bj .bj1>li:hover {
background-color: #b599d5;
}
.bj li:hover .bj1 {
display: block;
}
.bj li .bj2 {
background-color: cadetblue;
}
.bj li .bj1 {
position: relative;
}
.bj .bj1 .bj2 {
position: absolute;
left: 180px;
top: 0;
width: 180px;
height: 180px;
display: none;
}
.bj .bj1 .bj2 li:hover {
background-color: #d1a48d;
}
.bj .bj1 li:hover .bj2 {
display: block;
}
</style>
</head>
<body>
<ul class="bj">
<li>
<a href="#">菜单1</a>
<ul class="bj1">
<li>
<a href="#">子菜单2</a>
<ul class="bj2">
<li><a href="#">子子菜单1</a></li>
<li><a href="#">子子菜单2</a></li>
<li><a href="#">子子菜单3</a></li>
</ul>
</li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</body>
</html>
效果：
鼠标放菜单上去子菜单会显示出来，放到子菜单上时子子菜单会显示出来。
选项卡制作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.dahezi {
width: 900px;
height: 40px;
background-color: pink;
margin: 0 auto;
position: relative;
}
.dahezi input+label {
float: left;
width: 33.333%;
text-align: center;
line-height: 40px;
background-color: pink;
}
.dahezi .box {
width: 900px;
height: 600px;
background-color: #D6D6D6;
}
.dahezi .box p,
.dahezi .box p,
.dahezi .box p {
text-indent: 2em;
}
.dahezi .box .tu1,
.dahezi .box .tu2,
.dahezi .box .tu3 {
text-align: center;
}
.dahezi .box {
position: absolute;
left: 0;
top: 40px;
}
input {
display: none;
}
.dahezi input:checked+label {
color: royalblue;
background-color: #FF9A63;
}
.dahezi input+label+.box {
display: none;
}
.dahezi input:checked+label+.box {
display: block;
}
</style>
</head>
<body>
<div class="dahezi">
<input type="radio" name="dx" id="dx1" checked />
<label for="dx1">斗破苍穹</label>
<div class="box">
<br>
<div class="tu1"><img src="images/doupocangqong.jpg"></div>
<p>天才少年萧炎在创造了家族空前绝后的修炼纪录后突然成了废人，种种打击接踵而至。 就在他即将绝望的时候，一缕灵魂从他手上的戒指里浮现，一扇全新的大门在面前开启，经过艰苦修炼最终成就辉煌的故事。
萧炎，主人公，萧家历史上空前绝后的斗气修炼天才。</p>
</div>
<input type="radio" name="dx" id="dx2" />
<label for="dx2">盘龙</label>
<div class="box">
<br>
<div class="tu2"><img src="images/panlong.jpg"></div>
<p>林雷无意中从祖宅拣到一枚神奇的戒指，而后踏上了梦幻之旅的故事。 楼房大小的血睛鬃毛狮，力大无穷的紫睛金毛猿，毁天灭地的九头蛇皇，携带着毁灭雷电的恐怖雷龙，这里无奇不有，这是一个广博的魔幻世界。
</p>
</div>
<input type="radio" name="dx" id="dx3" />
<label for="dx3">绝世武神</label>
<div class="box">
<br>
<div class="tu3"><img src="images/jueshiwushen.jpg"></div>
<p>这是一个恃强凌弱的世界，人们以武道修为来定等级、论高低。男主林枫因为一场车祸，穿越到了这个本不强大的林家大少爷身上。在这里，只有强者有权利生存下去，即使是同族同门之人也是如此。而他这一世怎还会继续任人宰割。
</p>
</div>
</div>
</body>
</html>效果：
鼠标选中书名按钮后下方内容会显示出来。
扫一扫
1778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
