本文主要是介绍css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、 三级菜单制作、选项卡制作——css3知识点总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
css3新增选择器
兄弟选择器
属性选择器
伪类选择器
其他伪类选择器
类元素选择器
直接选择器
否定选择器
伪元素
:after清除浮动
:before和:after 用来写小三角形
首字母
首行
网页内容选中样式
calc()样式计算属性
calc()语法
calc()的运算法则
隐藏元素方法
遮罩层效果：
编辑
三级菜单制作：
选项卡制作：
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>效果：
鼠标选中书名按钮后下方内容会显示出来。
这篇关于css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、 三级菜单制作、选项卡制作——css3知识点总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
