<p> <br data-filtered="filtered"></p><p><span style="color: rgb(146, 208, 80);"><strong>写在分割线之前：</strong></span>为什么作为一个seo要学习这个，合肥SEO竞争压力这么大吗？其实仅仅对于搜索优化本身，css和js之类的了解使用方法就完全足够，之所以不断充电，是希望自身能够武装起更多的武器！面对困难，迎男而上，对不起是迎难而上！只要足够强大，问题就难不倒我！</p><hr/><p>伪元素和伪类从字面理解就是<span style="color: rgb(0, 176, 80);"><strong>假</strong></span><strong>的<span style="color: rgb(255, 0, 0);">元素</span>和<span style="color: rgb(0, 176, 80);">假</span>的<span style="color: rgb(255, 0, 0);">类</span></strong>。</p><p style="text-align: center;"><img src="http://www.seoerl.com/static/upload/image//99653.png" title="99653.png" alt="99653.png" width="342" height="151" style="width: 342px; height: 151px;"/></p><p><strong style="font-size: 20px;">伪元素选择器作用：</strong><br/></p><p>为某个元素的前面或者后面添加子元素。</p><p><br/></p><p><span style="font-size: 20px;"><strong>格式：</strong></span></p><p>标签::before{属性: 值;}。在标签之前添加子元素</p><p><br/></p><p>标签::after{属性: 值;}。在标签之后添加子元素</p><p><br/></p><p>content:在伪元素选择器中代表内容；</p><p><br/></p><p>visibility: hidden:将伪元素选择器隐藏</p><p><br/></p><p><br/></p><p><span style="background-color: rgb(216, 216, 216);">p.test1{</span></p><p><span style="background-color: rgb(216, 216, 216);"> ...</span></p><p><span style="background-color: rgb(216, 216, 216);">}</span></p><p><br/></p><p><span style="background-color: rgb(216, 216, 216);">a:hover{</span></p><p><span style="background-color: rgb(216, 216, 216);"> ...</span></p><p><span style="background-color: rgb(216, 216, 216);">}</span></p><p><br/></p><p><span style="background-color: rgb(216, 216, 216);">p::before{</span></p><p><span style="background-color: rgb(216, 216, 216);"> ...</span></p><p><span style="background-color: rgb(216, 216, 216);">}</span></p><p><br/></p><p><span style="background-color: rgb(216, 216, 216);">p{</span></p><p><span style="background-color: rgb(216, 216, 216);"> ...</span></p><p><span style="background-color: rgb(216, 216, 216);">}</span></p><p><br/></p><p><span style="background-color: rgb(216, 216, 216);"><p class="test1">test1</p></span></p><p><span style="background-color: rgb(216, 216, 216);"><p class=""test2>test2</p></span></p><p><span style="background-color: rgb(216, 216, 216);"><a href=http://www.seoerl.com/website/"...">tag a</a></span></p><p style="text-align: center;"><img src="http://www.seoerl.com/static/upload/image//44057.png" title="44057.png" alt="image.png"/></p><hr/><p><span style="font-size: 24px; color: rgb(255, 0, 0);"><strong>CSS3伪元素选择器的使用</strong></span></p><p>一、 ::first-letter 第一个字</p><p>二、 ::first-line 第一行（以浏览器为准的第一行）</p><p>三、 ::selection 被选中的字行（鼠标选中的字段）只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。</p><p><br/></p><p>四、::before 和 ::after</p><p><br/></p><p>1. <span style="color: rgb(255, 0, 0);"><strong>必须</strong></span>带一个属性<span style="color: rgb(0, 176, 80);">content</span></p><p>2.在内部内容的前面或者后面插入内容</p><p><br/></p><p><span style="background-color: rgb(216, 216, 216);"><div>必须带一个属性content</div></span></p><p><span style="background-color: rgb(216, 216, 216);"> div::before {</span></p><p><span style="background-color: rgb(216, 216, 216);"> content: "我是插入的内容";</span></p><p><span style="background-color: rgb(216, 216, 216);"> background: #572eb8;</span></p><p><span style="background-color: rgb(216, 216, 216);"> }</span></p><p><br/></p><p>3.当插入的内容定义宽高和其他属性时，其实就是一个盒子（必须通过display转换，因为默认是一个行内元素）。</p><p><br/></p><p><span style="background-color: rgb(216, 216, 216);"><body></span></p><p><span style="background-color: rgb(216, 216, 216);"> <div>盒子1</div></span></p><p><span style="background-color: rgb(216, 216, 216);"></body></span></p><p><br/></p><p><span style="background-color: rgb(216, 216, 216);"> div{</span></p><p><span style="background-color: rgb(216, 216, 216);"> width: 500px;</span></p><p><span style="background-color: rgb(216, 216, 216);"> height: 500px;</span></p><p><span style="background-color: rgb(216, 216, 216);"> border: 1px solid #000;</span></p><p><span style="background-color: rgb(216, 216, 216);"> }</span></p><p><span style="background-color: rgb(216, 216, 216);"> div::before{</span></p><p><span style="background-color: rgb(216, 216, 216);"> content: "插入的盒子";</span></p><p><span style="background-color: rgb(216, 216, 216);"> display: block;</span></p><p><span style="background-color: rgb(216, 216, 216);"> width: 200px;</span></p><p><span style="background-color: rgb(216, 216, 216);"> height: 200px;</span></p><p><span style="background-color: rgb(216, 216, 216);"> background: rgb(211, 29, 29);</span></p><p><span style="background-color: rgb(216, 216, 216);"> }</span></p><p><br/></p><p>4.上述可以解释清除浮动的后面两种方法，单伪元素法和双伪元素法</p><hr/><p><span style="font-size: 24px;">最后，我们用通俗的方法理解<span style="color: rgb(255, 0, 0);"><strong>伪类选择器和伪元素选择器是什么!</strong></span></span></p><p><br/></p><p><span style="color: rgb(146, 208, 80);"><strong>元素选择器：</strong></span>如上面的p{}，实实在在的存在的元素。</p><p><br/></p><p><strong><span style="color: rgb(255, 0, 0);">伪</span></strong><span style="color: rgb(0, 176, 80);"><strong>元素选择器：</strong></span>dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如p::before，选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有）</p><p><br/></p><p><span style="color: rgb(0, 176, 240);"><strong>类选择器：</strong></span>真实有的类，我们自己正儿八经定义的类，如p.test1，选择p标签（元素选择器）具有类test1的所有元素，这个类是具体的，形象的，看得见的</p><p><br/></p><p><span style="color: rgb(255, 0, 0);"><strong>伪</strong></span><span style="color: rgb(0, 112, 192);"><strong>类选择器：</strong></span>一个概念上的类，不是我们定义的，是抽象的。如a:hover，选择a标签（元素选择器）中具有鼠标悬停类的所有元素，这个类是抽象的，不是我们自己定义的，再如first-child，选择第一个，选择具有这个类性质的所有元素，“第一个”，这个类就抽象了，我们没必要定义一个第一个这样的类.</p><hr/><p><span style="color: rgb(0, 176, 80);"><strong>注：CSS元素的优先级</strong></span></p><p style="text-align: center;"><img src="http://www.seoerl.com/static/upload/image//64622.png" title="64622.png" alt="image.png"/></p><p><strong>不同级别</strong>：!important > 内联样式 > ID选择器 > 类选择器（属性选择器、伪类选择器）> 元素选择器（伪元素选择器）> 通配符选择器 </p><p><br/></p><p><strong>同一级别 </strong></p><p>（1）同一级别中后写的会覆盖先写的样式</p><p>（2）同一级别css引入方式不同，优先级不同</p><p><strong>排序：</strong>内联（行内）样式 > 内部样式表 > 外部样式表 > 导入样式（@import）</p><p><br/></p> 讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/200129.html