一站式百度SEO排名优化!-找老刘SEO低投入,高转化,旨在提供更好的SEO服务!

首页>>网站建设

看到这个,老刘SEO终于理解伪元素选择器和伪类选择器区别了!

首页 2019-11-07 网站建设 10 ℃ Tags: 伪元素选择器 伪类选择器 CSS3


写在分割线之前:为什么作为一个seo要学习这个,合肥SEO竞争压力这么大吗?其实仅仅对于搜索优化本身,css和js之类的了解使用方法就完全足够,之所以不断充电,是希望自身能够武装起更多的武器!面对困难,迎男而上,对不起是迎难而上!只要足够强大,问题就难不倒我!


伪元素和伪类从字面理解就是元素

1573108028199653.png

伪元素选择器作用:

为某个元素的前面或者后面添加子元素。


格式:

标签::before{属性: 值;}。在标签之前添加子元素


标签::after{属性: 值;}。在标签之后添加子元素


content:在伪元素选择器中代表内容;


visibility: hidden:将伪元素选择器隐藏



p.test1{

    ...

}


a:hover{

    ...

}


p::before{

    ...

}


p{

    ...

}


<p class="test1">test1</p>

<p class=""test2>test2</p>

<a href="...">tag a</a>

image.png


CSS3伪元素选择器的使用

一、  ::first-letter 第一个字

二、 ::first-line 第一行(以浏览器为准的第一行)

三、 ::selection 被选中的字行(鼠标选中的字段)只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。


四、::before 和 ::after


1. 必须带一个属性content

2.在内部内容的前面或者后面插入内容


<div>必须带一个属性content</div>

 div::before {

            content: "我是插入的内容";

            background: #572eb8;

        }


3.当插入的内容定义宽高和其他属性时,其实就是一个盒子(必须通过display转换,因为默认是一个行内元素)。


<body>

    <div>盒子1</div>

</body>


        div{

            width: 500px;

            height: 500px;

            border: 1px solid #000;

        }

        div::before{

            content: "插入的盒子";

            display: block;

            width: 200px;

            height: 200px;

            background: rgb(211, 29, 29);

        }


4.上述可以解释清除浮动的后面两种方法,单伪元素法和双伪元素法


最后,我们用通俗的方法理解伪类选择器和伪元素选择器是什么!


元素选择器:如上面的p{},实实在在的存在的元素。


元素选择器:dom中不存在的元素,仅仅是css中用来渲染,添加一些特殊效果的,比如p::before,选择p标签(真元素)前面的假元素(伪元素,p标签前面没有元素,只是假设有)


类选择器:真实有的类,我们自己正儿八经定义的类,如p.test1,选择p标签(元素选择器)具有类test1的所有元素,这个类是具体的,形象的,看得见的


类选择器:一个概念上的类,不是我们定义的,是抽象的。如a:hover,选择a标签(元素选择器)中具有鼠标悬停类的所有元素,这个类是抽象的,不是我们自己定义的,再如first-child,选择第一个,选择具有这个类性质的所有元素,“第一个”,这个类就抽象了,我们没必要定义一个第一个这样的类.


注:CSS元素的优先级

image.png

不同级别:!important > 内联样式 > ID选择器 > 类选择器(属性选择器、伪类选择器)> 元素选择器(伪元素选择器)> 通配符选择器 


同一级别 

(1)同一级别中后写的会覆盖先写的样式

(2)同一级别css引入方式不同,优先级不同

排序:内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)


当前位置:首页>>网站建设>>看到这个,老刘SEO终于理解伪元素选择器和伪类选择器区别了!

搜索
分类
热门标签
  • 首页
  • 电话
  • QQ
  •  
    联系老刘手机
    1043025812
    联系老刘微信
    扫描微信二维码