网站搭建模板素材,做暧暧网站在线,网站上做播放器流量算谁的,怎么做自己的手机网站起因于不理解下图点的写法#xff0c;后来发现是个很基础的东西 运用了伪类元素:before#xff0c;如下 注意#xff0c;他的css写法也是非常简洁高效的。 查阅了些关于伪类before和after的知识帮助理解#xff0c;以下摘自#xff1a;http://www.hulufei.com/post/about-… 起因于不理解下图点的写法后来发现是个很基础的东西 运用了伪类元素:before如下 注意他的css写法也是非常简洁高效的。 查阅了些关于伪类before和after的知识帮助理解以下摘自http://www.hulufei.com/post/about-before-and-after-pseudo-element :before和:after的作用就是在指定的元素内容而不是元素本身之前或者之后插入一个包含content属性指定内容的行内元素最基本的用法如下 #example:before {content:#;color: red;}#example:after {content:$;color: red;} 这段代码会在#example元素内容之前插入一个#以及在内容之后添加一个$插入的行内元素是作为#example的子元素效果如下: Here is the example content 需要注意的是如果没有content属性伪类元素将没有任何作用。但是可以指定content为空同时正如前面所说插入的内容默认是一个行内元素并且在HTML源代码中无法看到这就是为什么称之为伪类元素的理由所以也就无法通过DOM对其进行操作。 #example:before {content:;display: block;width:100px;height:100px;} 伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性比如字体等。 除了插入文字内容还可以指定其他内容 p:before {content: url(img.jpg);}
a:after {content: attr(href);} attr()函数会返回指定元素对应属性的值 最后奉上最惦记的浏览器支持情况 Chrome 2,Firefox 3.5 (3.0 had partial support),Safari 1.3,Opera 9.2,IE8 (with some minor bugs),Pretty much all mobile browsers.放在伪类元素里面的内容一般都只是装饰性的所以即便是IE6/7不支持也应该能降级到正常显示主体内容。 :before和:after的一些惊人用法 . clearfix hack 如果父元素容器里面的子元素是浮动元素的话我们一般需要在父元素闭合前添加一个clear:both的元素用于清除浮动从而能使父容器正常被子元素内容撑起但是这种方法引入了多余的无意义标签并且有javascript操作子元素的时候容易引发bug。一种更好的方法是利用CSS所以在一些CSS文件中经常会看到类似于.clearfix这样的类出没只要在父容器上应用这个类即可实现清除浮动。下面是利用:before和:after的一个实现(viaNicolas Gallagher) /* For modern browsers */.clearfix:before,.clearfix:after {content:;display:table;}.clearfix:after {clear:both;}/* For IE 6/7 (trigger hasLayout) */.clearfix {zoom:1;} . CSS实现的八卦图案 #yin-yang {width:96px;height:48px;background:#eee;border-color: red;border-style: solid;border-width:2px2px50px2px;border-radius:100%;position: relative;}#yin-yang:before {content:;position: absolute;top:50%;left:0;background:#eee;border:18px solid red;border-radius:100%;width:12px;height:12px;}#yin-yang:after {content:;position: absolute;top:50%;left:50%;background: red;border:18px solid #eee;border-radius:100%;width:12px;height:12px;} 资源链接 Learning To Use The :before And :after Pseudo-Elements In CSSThe Shapes of CSSPseudo-elements referenceAdd steps counter in form via CSS转载于:https://www.cnblogs.com/2boy/p/3316842.html
