css中 li:before 与 li:after_安全

ulbox li:before {
:before元素的内容之前插入新内容
z-index: -2;
属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
position: absolute;
生成绝对定位的元素
background: transparent;
背景为透明
width: 90%;
宽度为90%
height: 80%;
高度为80%
content: '';
来插入生成内容
left: 20px;
左边距离
bottom:8px;
下面距离
-webkit-transform: skew(-12deg) rotate(-4deg);
斜切-12度，旋转-4度。下方同理，前缀是兼容不同浏览器
-moz-transform:skew(-12deg) rotate(-4deg);
-o-transform: skew(-12deg) rotate(-4deg);
-ms-transform: skew(-12deg) rotate(-4deg);
-webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 06);
投影，左边投影为0，下方为8,虚化半径为20，投影颜色黑色，透明度为6%。下方同理，前缀是兼容不同浏览器
-moz-box-shadow: 0 8px 20px rgba(0, 0, 0, 06);
-o-box-shadow: 0 8px 20px rgba(0, 0, 0, 06);
box-shadow: 0 8px 16px rgba(0, 0, 0, 06);
behavior: url(ie-css3htc);
兼容IE浏览器
第二段代码基本一样，只不过:after元素的内容之后插入新内容

貌似么有啊……javascript修改css其实就是写到元素的style属性上，:before,:after伪类是虚拟元素……怎么改啊……要是非得要修改的话，建议切换info的class试试，设计两个有:before的class，需要修改是切换有class的那个元素，比如
info:before{
content:"infomation";
border:1px solid #ccc;
}
info_other:before{
content:"infomation";
border:2px solid #000;
}，
然后需要修改的时候把info改成info_other

你那段代码是用来清除浮动的。
以下代码可以这么解释：
clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容；
content: ""; <----内容为“”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；
line-height: 0; <----行高为0；
height: 0; <----高度为0；
font-size:0; <----字体大小为0；
}
clearfix { zoom:1;} <----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话，不用深究，听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
话说回来，你这段代码真是个累赘啊，这样写不利于维护。
只要写一个clearfix就行了，然后在需要清浮动的元素中添加clearfix类名就好了。
如：
<div class="head clearfix"></div>
解说完毕，希望对你有帮助。

我的理解是：
这是伪类的用法：
a:link
{color:
#ff0000}
/
未被访问的链接
红色
/
a:visited
{color:
#00ff00}
/
已被访问过的链接
绿色
/
a:hover
{color:
#ffcc00}
/
鼠标悬浮在上的链接
橙色
/
a:active
{color:
#0000ff}
/
鼠标点中激活链接
蓝色
/
设置的颜色就是伪元素，不知道你理解么？
希望帮到你

::before，::after是伪元素并非doom元素，所以jquery无法选择伪元素。

如果确实需要实现修改伪元素的样式，可以通过下面的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pseudo-elements test by zhou2003737</title>
    <style type="text/css">
        p{
            color: deepskyblue;
        }
        p:before{
            content: attr(data-beforeContent);
            color: darkred;
        }
    </style>
</head>
<body>
    <p data-beforeContent="测试">1111</p>
</body>
<script type="text/javascript" src="jqueryminjs"></script>
<script type="text/javascript">
    $(function(){
        
             var times = 0;
            $('p')on('click',function(){
                switch (times){
                    case 0:
                        $(this)attr('data-beforeContent','你说啥都是对的');
                        times++;
                        break;
                    case 1:
                        $(this)attr('data-beforeContent','你这么叼咋不上天呢');
                        times++;
                        break;
                    case 2:
                        $(this)attr('data-beforeContent','那就上天吧');
                        times++;
                        break;
                    default :
                        times =0;
                        $(this)attr('data-beforeContent','你说啥都是对的');
                        times++;
                        break;
                }
            });
    });
</script>
</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/yw/13372032.html

css中 li:before 与 li:after

发表评论

评论列表（0条）