之前我们通过CSS定位完成了一张太极图https://blog.csdn.net/r_banyan0820/article/details/81086026
现在我们通过伪元素来完成同样效果
一、明确伪类与伪元素定义
1.伪类:用于向某些选择器添加特殊的效果,根据其当前状态修改它进入另一状态的效果,比较动态。同理,当元素失去当前状态,也就失去了添加的效果。CSS中常见伪类:
:link 应用于未被访问过的链接;
:hover 应用于鼠标悬停到的元素;
:active 应用于被激活的元素;
:visited 应用于被访问过的链接,与:link互斥。
:focus 应用于拥有键盘输入焦点的元素。
在CSS3中,伪类有了更多应用,可以利用dom树进行元素选择,CSS3新添:
:first-child 选择某个元素的第一个子元素;
:last-child 选择某个元素的最后一个子元素;
:nth-child() 选择某个元素的一个或多个特定的子元素;
:nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
:nth-of-type() 选择指定的元素;
:nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算;
:first-of-type 选择一个上级元素下的第一个同类子元素;
:last-of-type 选择一个上级元素的最后一个同类子元素;
:only-child 选择的元素是它的父元素的唯一一个子元素;
:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素;
:empty 选择的元素里面没有任何内容。
2.伪元素:用于将特殊的效果添加到某些选择器,为了补充普通选择器无法做到的,伪元素在DOM树之外,不能使用id、class进行补充修改,伪元素选择器:
:first-letter 选择元素文本的第一个字(母)。
:first-line 选择元素文本的第一行。
:before 在元素内容的最前面添加新内容。
:after 在元素内容的最后面添加新内容。
3.在CSS3中,单冒号(:)用于伪类,双冒号(::)用于伪元素。::before、::after在CSS2中写作:before、:after,所以现在对于CSS2中已有的伪元素双冒号单冒号都可以。
附上一个其他博主对伪元素及伪类说明很详细的文章https://segmentfault.com/a/1190000012156828
二、代码部分
1.建一个背景使用渐变黑白的div,渐变使用这个网站http://www.colorzilla.com/gradient-editor/
<div id="yinyang"></div>
body {background-color: grey;}
#yinyang {
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 28%;
left: 40%;
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 46%, #000000 46%, #000000 100%);
}//不同的线性方向有to top/left/right/bottom
2.运用::after、::before完成太极的其他部分
切记千万不要忘记加content属性,可以给空值。可以调整border大小控制整个圆和圆心大小
.taiji::before {
content:'' ;
/* 伪类一定要加content */
height: 30px;
width: 30px;
background-color: #fff;
border-radius: 50%;
border: 60px solid #000;
position: absolute;
top:23%;
}
.taiji::after {
content:'' ;
/* 伪类一定要加content */
height: 30px;
width: 30px;
background-color: #000;
border-radius: 50%;
border: 60px solid #fff;
position: absolute;
top:23%;
left:50%;
}
与之前用div做的圆比较,使用伪元素节省了两个div,由此可见,活用伪类对于优化文档,减少js操作有一定帮助。