before,after,until的用法与区别?
发布网友
发布时间：2022-04-06 12:22
共2个回答
懂视网
时间：2022-04-06 16:43
一、::before是什么？有什么作用？
在css中，::before 是一个伪类元素，代表生成的内容元素，表示相应元素的可抽象样式的第一个子元素，即：所选元素的第一个子元素。【相关视频教程推荐：css教程】
利用::before可以把需插入的内容插入到元素的其他内容之前，并且默认内联显示。::before需要使用content属性来指定内容的值。例：
/* 在链接之前添加一颗心 */
a::before {
content: "?";
}我们来看一个简单的示例：
假设你有一个带有一些文本的blockquote。你可以使用::before在实际文本之前插入内容，比如：一些花哨的引号。引号将显示在页面上，但不会添加到DOM中的blockquote中。
< blockquote > 你目前的情况并不能确定你可以去哪里; 他们只是决定你从哪里开始。- Nido Qubein </ blockquote >
以下代码段将使用块引用添加几个花哨的引号::before。引号将在引用文本之前的blockquote中添加，并与其内联。
blockquote :: before {
content：“ 201C” ; / *样式引用* /
color：deepPink;
font-size: 3em;
position: relative;
top: 20px;
}content引用是通过转义其在属性内定义的Unicode值。这就是通常通过CSS表示和添加字形的方式。
我们来看看运行效果：
由于使用伪元素插入的内容未插入到DOM内，因此通常无法使用浏览器的开发者工具查看和检查插入的内容。但是，Chrome 32+和Firebug for Firefox允许你查看伪元素在DOM中的位置，通过选择它，你可以在CSS面板中查看与其相关联的样式。在Chrome的开发工具中检查上述演示会显示以下结果：
可以看出，添加有::before的内容与blockquote内的其他内容内联并位于其之前。
由于::before内容是在元素内的其他内容之前插入的，这也意味着伪元素将堆叠在源树中的其他元素之后。
伪元素可用于插入几乎任何类型的内容，包括字符（如上所述），文本字符串和图像。例如，以下是::before具有有效内容的所有有效声明：
.element :: before {
content：url（path / to / image.png）; / *图像，例如，图标* /
}
.element :: before {
content：“注意：” ; / *一个字符串* /
}
.element :: before {
content：“ 201C” ; / *也算作一个字符串。转义Unicode会将其渲染为字符* /
}注：使用伪元素插入的图像无法调整大小，它们会按原样插入，因此你必须在使用前调整图像大小。
二、::before与:before的的异同点
相同点：
1、伪类对象，用来设置对象前的内容
2、::before和:before写法是等效的
不同点：
:befor是Css2的写法，::before是Css3的写法
:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好
说明：
1、伪类元素要配合content属性一起使用
2、伪类元素是css渲染层加入的，不能通过js来操作
3、伪类对象特效通常通过：hover伪类样式来激活
.test:hover::before{
/* 这时animation和transition才生效 */
}总结：
热心网友
时间：2022-04-06 13:51
before的用法：
1． before用作连词时，意思是“在……之前；还没来得及 …… 就”。例如：
Before she could move, she heard a great noise, which grew to a terrible roar. 她还没来得及动弹，就听见有很响的声音，接着就成了可怕的隆隆轰鸣声。
Before I could say a word, she had stormed out of the room. 不等我说一句话，她就冲出了房间。
Don’t count your chickens before they are hatched. 不要高兴得过早。
2． 用于It + be + 时间段 + before...句型中，意思是“在……之后才……”。例如：
It will be five years before I come back.
我五年后才能回来。
after用法:
(1)介词:
(a) Please come to my house after dinner.晚饭后
(b) He ran after the bus. 追赶
(c) His mother waited for him night after night.（一个）接着（一个）
(d) It's sad to fail after all that work. 由于
(e) They are still friends after all their differences.
(2) 副词:
(a) three hours after; (b) departed shortly after; (c) after all I don't really know him. 终究
(d) He told me afterwards that he had not enjoyed the film. 后来
(3)连词:
(a) I saw them after I arrived.后来
(b) They arrived soon after. 后来
(c) tomorrow, or the day after...
(4) 名词:
(a) afternoon午后; (b) afterthought事后的想法; (c) aftermath后果
until的用法
until可用作介词或连词，意为“到……时候为止”、“到……时候才”或“在……时候以前不”。
1. 如果主句中的谓语动词是终止性动词，应采用“... not ... until ...”结构，意为“……到……时候才……”。例如：
You mustn’t eat anything until you see the doctor. 看过医生之后，你才能吃东西。
2. 如果主句中的谓语动词是延续性动词，那么谓语动词用肯定式或否定式，它们所表达的意思有所不同。
1） 如果谓语动词为肯定式，则until译为“到……时候为止”。例如：
I watched TV until she came back. 我看电视一直看到她回来。
2） 如果谓语动词为否定式，则until应译为“到……时候才”，即“在……以前不”。如：
I did not watch TV until she came back. （= I began to watch TV when/after she came back.） 直到她回来我才开始看电视。
3. 用终止性动词作谓语时， until既可以和not连用，又可以和never， nobody， nothing， few， little， seldom， hardly等含否定意义的词连用。例如：
I had not seen him until 1990. （= I had never seen him until 1990.） 1990年以前我从未见过他。
Don’t put off until tomorrow what you can do today. （= Never put off what you can do today till tomorrow.） 今日事，今日毕。
