gpt4 book ai didi

Use of &:before in CSS and difference with ::before(在css中使用&:BEFORE,与::BEFORE的区别)

转载 作者:bug小助手 更新时间:2023-10-28 20:23:59 26 4
gpt4 key购买 nike



In the following code, I don't understand &:before.

在下面的代码中,我不理解&:之前。




                    .coloring {
&:before {
background: "black";
}
}




Is it a built-in class or is a class maybe created by a collaborator?

它是内置类还是可能是协作者创建的类?


Is & required? (I looked on the web and found that some uses ::before)

是否必填(&R)?(我上网查了一下,发现有些用法::之前)


更多回答

This is SASS syntax.

这是Sass语法。

I had no idea about it, is &:before is SASS and ::before CSS ? @DallogFheir

我完全不知道,在sass之前是&:,在css之前是::?@DallogFheir

& is parent selector in SASS, in this case it's equivalent to .coloring::before in pure CSS.

&是sass中的父选择器,在本例中,它等同于纯css中的.COLROING::BEFORE。

The & nesting selector is part of the CSS Nesting Module, and it already has partial support in some browsers - developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector

嵌套选择器是css嵌套模块的一部分,它已经在一些浏览器中得到了部分支持--developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector

Sass

萨斯

优秀答案推荐

& is the CSS nesting selector. It's very new and doesn't have full support in all major browsers yet (although it is getting close).

CSS嵌套选择器。它非常新,还没有在所有主流浏览器中得到完全支持(尽管它正在接近)。


The use of a single : is a hang-over from the time before CSS was changed to distinguish pseudo-classes and pseudo-elements with different syntax.

使用Single:是在更改css以区分具有不同语法的伪类和伪元素之前的遗留问题。


.coloring {
&::before {
background: "black";
}
}

is equivalent to:

相当于:


.coloring::before {
background: "black";
}

It's not a very practical use here, but consider an example where there were rules applied to both the element itself and the pseudo-element. Then it avoids having to repeat the first part of the selector for two different rule-sets.

它在这里的用法并不是很实际,但请考虑这样一个示例,其中有一些规则同时应用于元素本身和伪元素。然后,它避免了必须为两个不同的规则集重复选择器的第一部分。


.coloring {
color: red;

&::before {
background: "black";
}
}

The same syntax is used in SASS.

SASS中使用了相同的语法。


更多回答

if I returncoloring using computed property as following coloring() { return { background: "black" }; }, how to bind before to it ?

如果我用COMPUTE属性返回COLUTING,如下所示:COLURING(){RETURN{BACKGROUND:“Black”};},在绑定之前如何绑定?

@nayakhattar — how you change the CSS applied to a ::before pseudo-element using JavaScript has nothing to do with the question this is an answer to. You could ask a new question about it but there are probably duplicates out there already.

@nayakhattar-如何使用JavaScript更改应用于伪元素的::BEVE的CSS与这是对这个问题的回答无关。你可以问一个关于它的新问题,但可能已经有重复的问题了。

actually I can't ask further questions for now

事实上,我现在不能问更多的问题

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com