Question

我研究了关于*:before （星号）的SO，我发现它选择了所有元素并将样式应用于它们。

我按照此链接Use of Asterisk注意到此代码会将*:after应用于所有元素。

*:before,
*:after {
          box-sizing: border-box;
}

现在，我关注的是set lastDigitsCount to 8 -- number of chars from the right which contain extension and counters set myFolder to "imac27:Users:my_user:Desktop:test:" repeat tell application "Finder" if ((count items of folder (myFolder as alias)) = 0) then return set theSequence to first item of folder myFolder as alias set RootName to name of theSequence set RootName to text 1 thru ((length of RootName) - lastDigitsCount) of RootName end tell -- make your quicktime routine here tell application "QuickTime Player 7" activate open image sequence theSequence frames per second 30 set nameSequence to (theSequence as string) & ".mov" tell document 1 with timeout of 500 seconds save self contained in nameSequence end timeout end tell end tell -- delete all files with same rootname tell application "Finder" set myPNG to every item of folder (myFolder as alias) whose name contains RootName delete myPNG end tell end repeat和<!doctype html> <html> <body> <div class="form-group"> <label for="passportno" class="control-label col-xs-4"><p class="left">Passport No.</p></label> <input size="1" name="passportno" class="form-control" placeholder=""required/> - <input size="14" name="passportno" class="form-control" placeholder=""required/> </div> </script> </body> </html>在CSS中做了什么？

#include <iostream>

using namespace std;

class animal {
    public:
    virtual void Talk() {cout << "default animal talk" << endl;}
};

class dog: public animal {
    public:
    void Talk() {cout << "Wof" << endl;}
};

class cat: public animal {
    public:
    void Talk() {cout << "Meow" << endl;}
};

int main()
{
    dog Schnauzer;
    cat Siamese;

    Schnauzer.Talk();
    Siamese.Talk();
    return 0;
}

Answer 1

就像他们的名字所说的那样，：之前＆amp; ：用于在内容 WITHIN 匹配元素之前/之后应用css属性 JUST 。

有一天，一个聪明人说'一个小提琴价值千言万语'，所以：

div {
  border: solid 1px black;
  padding: 5px;
  }

div:before {
  content: "Added BEFORE anything within the div!";
  color:red;
 }

div:after {
  content: "Added AFTER anything within the div!";
  color:green;
 }

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>

Answer 2

：在选择器在每个所选元素的内容之前插入某些内容之前。：选择器在每个所选元素的内容之后插入一些内容。

所以*：之前就像Dan White所说的那样会在所有元素之前和*：之后将是所有元素之后

Answer 3

:after是一个伪元素，它允许您将内容从CSS插入到页面中（不需要在HTML中）。虽然最终结果实际上并不在DOM中，但它在页面上显示为好像，并且基本上是这样的：

div:after {
  content: "hi";
}

<div>
  <!-- Rest of stuff inside the div -->
  hi
</div>

:before完全相同，只是在HTML之前的任何其他内容之前插入内容而不是之后。使用其中一个的唯一原因是：

您希望生成的内容位于元素内容之前，位置上。
:after内容也是＆＃34;＆＃34;＆＃34;在源顺序中，所以如果堆叠在彼此之上，它将位于::之前自然。

内容的价值可以是：

字符串： content: "a string"; - 需要将特殊字符专门编码为unicode实体。请参阅字形页面。
图片： content: url(/path/to/image.jpg); - 图片以精确的尺寸插入，无法调整大小。由于渐变之类的东西实际上是图像，因此伪元素可以是渐变。
没有： content: ""; - 用于clearfix和插入图像作为背景图像（设置宽度和高度，甚至可以调整背景大小）。
计数器： content: counter(li); - 对于样式列表非常有用，直到：标记出现。

请注意，您无法插入HTML（至少会将其呈现为HTML）。内容：<h1>nope</h1>;

Answer 4

您所说的所有伪元素都具有与 DOM 中存在的常规元素相同的框模型行为。 ::before和::after是伪元素，这意味着它们不在 DOM 中，您无法使用鼠标选择它们。

什么是：之前和：之后在css中做什么

4 个答案:

什么是*：之前和*：之后在css中做什么

4 个答案:

什么是：之前和：之后在css中做什么