在用dw写html时,什么时候用冒号,什么时候用分号?

在用dw写html时,什么时候用冒号,什么时候用分号?,第1张

dw只是一款工具,它再牛也不会颠覆html的常规的,和正常些css一样就可以了

一般来说属性的后面用冒号,比如style="height:100px"注意这里什么时候用的冒号和分号

在写多个属性的时候需要再属性直接用分号隔开,如果只有一个属性大可以不写分号

两者的定义:

伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(lvha)。随后css2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

我自己的理解:

伪类,类,class是一个类,就类似class这样,表示一些元素的状态的,但是无须标识的分类。

伪元素,就是一个元素,类似p标签元素,等等,逻辑上存在,但是实际并不存在在文档树中。

另外一个简单的理解和区分就是:

伪类前面是一个冒号,为元素前面是两个冒号。e:first-child

伪类,e::first-line为元素。

特殊情况::before

::after

伪元素

before

和after是在元素前面和后面添加一些元素,因此是伪元素,css3选择器中已经将其前面变为两个冒号了。请看:w3cselect

问题来了,那么为什么我们平时用before和after前面就一个冒号?

当你看了css2选择器就知道了,老的规范中,伪类和伪元素都用一个冒号,新规范为了区分,伪元素统一用两个“::”,所以,大家注意了,往后在写css3的时候,为元素要用两个冒号,伪类用一个冒号。

伪类和伪元素的应用

我之前的css常用效果,讲了一些。

像伪元素

::-webkit-scrollbar

::selection

::-webkit-input-placeholder

::after

等等。

伪元素中用的最多的要数::after和::before了

可以用这两个伪元素做很多效果!

html

haorooms

css

a

{

position:

relative

display:

inline-block

outline:

none

text-decoration:

none

color:

#000

font-size:

32px

padding:

5px

10px

}

a:hover::before,

a:hover::after

{

position:

absolute

}

a:hover::before

{

content:

"\5b"

left:

-20px

}

a:hover::after

{

content:

"\5d"

right:

-20px

}

其中content中可以用attr也可以用url

例如:

a::after

{

content:"("

attr(href)

")"

}

h1::before

{

content:

url(logo.png)

}

伪类中用的最多的要数:nth-child()选择器了,关于nth-child(),我之前有篇文章介绍过。

总结:

伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5896396.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-07
下一篇 2023-03-07

发表评论

登录后才能评论

评论列表(0条)

保存