嵌套div的SCSS计数器
是一种在SCSS（Sass）中使用嵌套的div元素来实现计数器效果的方法。它可以用于在网页开发中创建具有层次结构的计数器样式。
SCSS是一种CSS预处理器，它扩展了CSS的功能，提供了更强大和灵活的样式表语言。嵌套div的SCSS计数器利用了SCSS的嵌套语法和父选择器的特性，可以方便地创建多层级的计数器样式。
具体实现嵌套div的SCSS计数器可以按照以下步骤进行：
- 在SCSS文件中定义一个计数器变量，初始值为0。例如：$counter: 0;
- 使用嵌套的div元素来创建层次结构。每个div元素都可以使用:before伪元素来显示计数器的值。
- 在每个div元素的:before伪元素中，使用content属性来显示计数器的值，并将计数器变量加1。例如：content: counter($counter); counter-increment: $counter;
- 通过嵌套的方式，可以创建多个层级的div元素，每个层级都可以有自己的计数器样式。
嵌套div的SCSS计数器可以用于创建具有层次结构的列表、导航菜单、标签页等组件。它的优势在于可以方便地定义和管理多层级的计数器样式，使页面结构更清晰、易读。
腾讯云提供了一系列与云计算相关的产品，其中与前端开发和网页设计相关的产品包括腾讯云COS（对象存储）、腾讯云CDN（内容分发网络）、腾讯云SSL证书等。这些产品可以帮助开发者在网页开发中实现高效的资源存储、加速和安全保护。
以下是腾讯云相关产品的介绍链接地址：
- 腾讯云COS（对象存储）：https://cloud.tencent.com/product/cos
- 腾讯云CDN（内容分发网络）：https://cloud.tencent.com/product/cdn
- 腾讯云SSL证书：https://cloud.tencent.com/product/ssl
相关·内容
1回答
我有一个非常简单的vue组件，如下所示：
<template>
<div class="incrementor">
<p v-text="counter"></p>
<button v-on:click="increment()">Increment</button>
</div>
</template>
<script lang="ts" src="../scripts/incrementor.
浏览 2提问于2020-05-31得票数 2
回答已采纳
我有一个SCSS规则集，看起来有点像这样：
.thing {
div {
// rules
}
}
有时我想根据添加到body中的类来重新定义这个.thing div元素的样式，所以在标准的CSS中，我会这样做：
.thing div {
// rules
}
.deactivated .thing div {
// override for when it's in body.deactivated
}
有没有办法打破嵌套来指示SCSS中的顶级封闭选择器？
浏览 1提问于2013-05-19得票数 0
1回答
使用SCSS，我希望将disabled样式应用于.parent中的子级。
我现时的SCSS架构如下：
.parent {
.disabled {
background: grey;
}
> .group {
...
> .input {
background: white;
}
> .icon {
background: blue;
}
}
}
HTML：
<div class="parent" ng-class=
浏览 3提问于2017-05-01得票数 0
回答已采纳
1回答
我在文件夹中有一个名为.scss的Books.scss文件和一个相关的react组件Books.js。还有一个名为.scss的Books.scss文件，相关的组件Books.scss是另一个文件夹。我使用./Books.scss正确地导入了第一个组件中.scss文件的属性，但是当我试图对特定div className的文件进行更改时，比如"tableOfContents"，对组件没有任何影响。这个className也存在于另一个.scss文件中。奇怪的是，当我编辑第二个.scss文件的.scss时，对第一个组件的更改会被反映出来。
，有人知道为什么会发生这种事吗？
除了添加/删
浏览 3提问于2021-02-23得票数 0
1回答
SCSS:提高性能
、、、
我们有项目，建立在Extjs和scss。我们希望提高scss的性能。我们使用了scss lint，并取得了较低的结果。
NestingDepth: Nesting should be no greater than 3, but was 4
如何将筑巢减少到3级？有什么方法可以帮助我们提高scss的性能？
已更新。请看下面的例子。
.x-grid-row,
.x-grid-row-alt {
color: $white-font-color !important;
&.x-grid-row,
&.x-grid-row-over {
co
浏览 1提问于2015-07-16得票数 0
回答已采纳
目前，我正试图在我的react应用程序中使用语义UI。它目前正在改变整个应用程序css。我查找了一个解决方案来执行嵌套scss导入，以将其隔离到div。在这样做时，我得到了以下错误：
./src/components/_EmployeeRES.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-l
浏览 3提问于2020-03-05得票数 2
回答已采纳
3回答
我正在努力使它发挥作用，但我不知道为什么不起作用，因为这是SCSS的特性之一：
这是HTML：
<div class="btn btn-wrapper">
<div class="btn-container mob-only">
<a class="btn btn-red" href="#" target="_blank">
<span class="mob-only">Schedule Appointment<
浏览 7提问于2017-06-16得票数 0
回答已采纳
1回答
更改引导-选择宽度
、、、、
我使用的是angular 7，并创建了一个selectDirective来处理应用程序中的引导选择实例化。 ngOnInit() {
// wrapping in setTimeout to delay init until after attribute binding
jQuery(this.el).selectpicker({
iconBase: 'fa',
tickIcon: 'fa-check'
});
} 在组件的html中(我在其中使用指令)： <div id="filters">
&l
浏览 7提问于2019-05-14得票数 0
回答已采纳
1回答
我现在正在做一个项目。遗憾的是，我被困在以下问题上：
我使用ng-重复来填充列表，这会形成导航条和Sass，根据元素的数量来调整列表元素的宽度，从而使宽度均匀分布。
看起来是这样的：
<div class="leftViewNav" class="leftNav">
<div>
<ul>
<li ng-repeat= "leftNavTag in leftNavTags"><p>{{ leftNavTag.title }}</p&g
浏览 4提问于2015-10-18得票数 0
回答已采纳
1回答
我在Reactjs中拼凑了一个更大的前端。
我只是将向用户呈现机场和酒店列表的组件和头组件放在一起。
我对JavaScript的实现很有信心，但是我想要一些反馈是关于我对SCSS的使用。我安装了node-sass，这就是我实现它的方式。
LocationList.js：
renderLocation() {
const filteredLocations = this.props.locations.filter(location => {
return !location.name.match(/[A-Z0-9]+$/);
});
return f
浏览 0提问于2019-04-04得票数 3
回答已采纳
我想在div-table-row上运行一个计数器，像0，1，2，3，4，……并将以div-table-cell-size打印如下所示。我怎样才能做到呢？
我见过这些，但我不知道如何应用两个ng重复：
注意:我对角很陌生。
<div class="div-table-row" ng-repeat="(label_inx, label_key) in design.labels">
<div class="div-table-cell-label">
{{ label_key
浏览 2提问于2014-07-22得票数 0
回答已采纳
这是我的html代码
<body>
<div>
<li class="more">hello
<ul class="hello">
<li>hello</li>
<li>hello</li>
<li>hello</li>
<li>hello</li&g
浏览 2提问于2022-03-24得票数 1
1回答
在我的离子3项目中有一个scss文件，当我运行以下命令：npm运行scss-lint来测试scss语法时，我在cmd中得到了这些警告：
src/pages/profile/profile.scss:3:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:9:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:1
浏览 2提问于2017-10-11得票数 1
回答已采纳
我在next.js中使用scss模块，并希望使用嵌套类选择器，如下所示：
.div {
.x {
color: red;
}
}
但是，这似乎不适用于以下组件：
import React from 'react'
import styles from './my-component.module.scss'
export default class MyComponent extends React.Component {
public render() {
return (
<div className={sty
浏览 10提问于2020-12-05得票数 8
1回答
我正在尝试使嵌套类呈现
.form {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100%;
.formGroup {
margin-bottom: 30px;
}
}
import { form } from '../../styles/form.scss';
class Signin extends Component {
render() {
return (
&l
浏览 3提问于2017-11-11得票数 0
回答已采纳
2回答
我正在创建以下UI小部件：
<div id="MapKeys">
<div id="RegionalSupply">
<div class="font header">Regional supply</div>
<div class="RegionalSupply circle"></div>
<div class="RegionalSupply detail">Circle
浏览 0提问于2017-03-21得票数 0
1回答
我正在使用波旁整洁的网格来调整网页上各种div的宽度。
default.html
<main class = "default-content">
{{ content }}
</main>
default.scss
main {
@include span-columns(6);
}
page.html
此页面的内容将在default.html中流水线到{{ content }
<div class = "full-width">
</div>
page.scss
.full-width {
浏览 1提问于2015-11-12得票数 0
回答已采纳
目前，我有两个媒体查询，它们在两个设置之外没有太大的不同。
当前：
@media screen and (min-width:501px){
div {
&.footer-container {
text-align:center;
ul {
li {
display:inline;
&.divider {
border-right: solid
浏览 0提问于2014-04-12得票数 0
回答已采纳
2回答
因此，我一直试图让SASS为一个项目工作，但出于某种原因，筑巢不想为我工作？
当我将..header菜单的片段移到nest之外时，它工作得很完美，只是不是嵌套的？
--这是index.html的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" href=".
浏览 3提问于2020-04-06得票数 0
回答已采纳
2回答
我在SCSS语法方面有个小问题。采用边界元方法创建小构件，在SCSS中遇到了问题。HTML：
<div class="message message--success">
<div class="message__title">
BEM Example
</div>
<div class="message__content">
<p>BEM Example text</p>
浏览 3提问于2020-02-19得票数 2
回答已采纳
如下面所示，有两个(div & span) HTML元素具有相同的类(content )，但是仅在span上，我想添加颜色属性。如何在SCSS中完成？
.content {
padding-left: 30px;
span#{&} {
color: red;
}
}
<div class="content">Lorem ipsum dolor sit amet</div>
<span class="content">Lorem ipsum dolor sit amet</span&
浏览 13提问于2022-09-13得票数 0
回答已采纳
2回答
我读了"“
标记类别规则不应包含子选择器，避免使用带有标记类别规则的子选择器。这将显着地延长匹配时间(特别是如果规则可能匹配的话)。
BAD
treehead > treerow > treecell {…}
GOOD
.treecell-header {…}
但在SCSS中，许多人写了这样的东西：
#main {
width: 97%;
p, div {
font-size: 2em;
a { font-weight: bold; }
}
pre { font-size: 3em; }
}
在SASS文档中-
谁是对的？还有
浏览 4提问于2014-09-08得票数 0
回答已采纳
现在我有了如下所示的HTML结构：
<div class="land">
<div class="tree">
<div class="fruit"></div>
</div>
<div class="tree tree--yellow">
<div class="tree__fruit"></div>
</div>
</div>
浏览 4提问于2019-09-29得票数 2
1回答
设想一组规则，如下所示：
span, div { color: red; }
span { background: white; }
div { background: black; }
是否有可能将它们按照1 SCSS规则包装？以下列形式出现的事物：
span, div {
& { color: red; }
&:not(div) { background: white;}
&:not(span) { background: black; }
}
不幸的是，这样的方法很容易变得很大。因此，我希望在不使用:not(<
浏览 0提问于2019-05-29得票数 3
回答已采纳
1回答
我的SCSS代码： .motherClass {
...
.subClass {
...
}
} 我的TSX代码： return <div className={styles.motherClass}>
<div className={ ??? }>
...
</div>
</div> 为了将subClass类应用于子HTML元素，该如何处理呢？ 我已经尝试过 className="subClass"
className={styles.motherClass.subClass} 但似乎没
浏览 8提问于2020-10-12得票数 1
回答已采纳
3回答
我很难理解如何用BEM命名约定正确地编写scss。
这里我有一些HTML：
<div class="SomeBlock">
<div class="SomeBlock__someElement">text</div>
</div>
<div class="SomeBlock">
<div class="SomeBlock__someElement--greenBG">text</div>
</div>
<div c
浏览 7提问于2016-05-14得票数 0
回答已采纳
3回答
我正在努力计算不是常规列表的元素。
在代码中更容易解释：
我对html或多或少没有控制权。
相反，DOM看起来如下所示：
<div class="body">
<div><p class="numlist" >first text</p></div>
<div><p class="numlist">second text</p></div>
<div><p class="numlist"&g
浏览 1提问于2017-02-17得票数 2
2回答
我正在使用CODA2创建一个我的SCSS文件，然后编译成CSS，也使用SCOUT。
我刚刚开始使用SCSS，我认为它很棒，真的应该更早地研究一下。无论如何，当我在CODA中编译每一组SCSS时，它会进入我的style.css，其中有一堆注释显示了最初的SCSS是在哪里创建的
例如
/* line 111, ../sass/_block-elements.scss */
另外，当我做一些嵌套时，我不知道这是不是正确的方式，但我认为这可能有点冗长。
同样，我安排的代码如下所示。
section.callouts{
.wrapper{
text-align: center;
marg
浏览 0提问于2013-01-25得票数 1
2回答
在scss中，我们可以使用父选择器类：
<div class="parent is-active">
<div class="children"></div>
</div>
.parent {
width: 200px;
height: 200px;
}
.children {
height: 100px;
width: 100px;
.is-active & {
background: red;
}
}
如何编写父hover选择器？
浏览 0提问于2016-05-11得票数 12
回答已采纳
正如前面提到的，可以根据例如父元素上的类来设置属性。我已经尝试了一段时间，没有幸运地根据包含段落的部分背景来指定段落的颜色，以便在文件中包含该段落的所有样式定义，以使其保持原子性。
如果我查看编译后的CSS，发现发生了一些事情。我猜我的文件结构破坏了这里的东西，因为我创建了很多文件，并将它们包含在需要这些文件的级别上。下面是我所做的：
// Main.scss
html{
body{
#wrapper{
@import "areas/section";
}
}
}
// _section.scss
section{
width:100%;
浏览 1提问于2014-11-21得票数 0
感谢您阅读这篇文章。
我在网站上有一个元素，假设看起来像这样：
<div id="other-div"><h1>Test other-div</h1></div>
<div id="app"><h1>Test app</h1></div>
我想div#app，只有他自己的风格，这是不适用于网站的其余部分。所以我试着用sass做一些类似的事情：
#app {
@import "custom.scss";
}
(假设自定义css在h1中{c
浏览 17提问于2017-06-28得票数 0
我正在使用primeNg。我的.html和.scss文件如下所示。但我不能给平板电脑任何styleClass。我的代码有什么问题？
.html文件
<p-panel header="Student Info" styleClass="test">
<div class="ui-g">
<div class="ui-g-12 ui-md-3">
<div class="ui-g-12">
<b>Stud
浏览 1提问于2018-09-18得票数 2
回答已采纳
2回答
我有一个需要某种div的background-color。颜色取决于div中的值，该值可以是负的，也可以是零的，也可以是正的。
例如：
<div className={`colors ${value > 0 ? "green" : ""}`}>{value}</div>
与SCSS：
.colors {
padding: 10px;
&.green {
background-color: green;
}
}
如果background-color在0以上，将使value变为绿色。但
浏览 8提问于2022-05-27得票数 0
回答已采纳
我想在后端数据作为道具进来后触发interval。看看这段代码：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getAdvert } from "../../actions/advert";
import './_advert.scss';
class Advert extends Component {
state = { counter: 0 };
componentDidMoun
浏览 0提问于2018-09-13得票数 1
在一个反应应用与反应路由器，对于每个路由组件，我希望有一个本地scss文件只适用于这个文件。
例如，about.js导入了about.scss，，我想要的是: about.scss仅在about.js中覆盖app.scss中的全局样式。然而，它压倒了应用程序中的一切。
app.js -导入的app.scss，我更喜欢它作为全球风格的
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "./ap
浏览 2提问于2020-03-16得票数 2
回答已采纳
1回答
我包括动画的运行时类。两个具有不同id的front的DIV，back在Click上添加了相同的flip类。可以根据Id添加不同的动画吗？
联署材料X：
<div className="card">
<div id="front" className={frontClasses.join(' ')}
onClick={clickedFront}>
OPEN
</div>
<div id="back" className={backCl
浏览 4提问于2020-04-27得票数 0
回答已采纳
5回答
我有一个嵌套的柔性箱设置的小例子：
在本例中，适用以下内容：
CSS 'box‘类使用只有boxContent才被告知增长的flexbox属性。有关特定的CSS属性和值，请检查小提琴。
“fullSize”只是将宽度和高度设置为100%。
当你用火狐和Chrome检查这把小提琴时，你会得到不同的结果。在火狐中，它可以做我认为它必须做的事情，这是在扩展内部的.boxContent。然而，在Chrome中，内部.boxContent并没有被拉伸。
有没有人知道如何在Chrome中扩展内容呢？可能是缺少的一个特定的webkit属性？
.fullSize {
width
浏览 5提问于2013-09-05得票数 28
回答已采纳
我正在使用BEM，请解释如何选择内部的nth子元素.
我试过以下格式，但对我不起作用
<div class="bookearly-container" >
<div class="row bookearly-container__row">
<div class="col-xs-12 col-md-4 bookearly-container__col">
<div class="bookearly-container__discountcontain
浏览 1提问于2018-10-04得票数 4
回答已采纳
3回答
请将scss设置为内圆元素？我不想使用.box__something，但是我需要修改依赖于父修饰符的子程序。
<div class="box">
<div class="box__something">Hello</div>
</div>
<div class="box box--rounded">
<div class="box__something">Hi</div>
</div>
.box {
&
浏览 0提问于2016-12-16得票数 5
回答已采纳
1回答
是否可以使用html元素类作为sass css中if语句或相对方式的条件？
在许多情况下，在编程中，需要结合一个循环和一个if测试来检查某物是否处于所需的状态，以及如果它随后增加了将要使用的值。我想知道在scss中能不能做到这一点？
首先我知道我可以用CSS做这件事，所以请不要在这里发布JS相关的答案，只是想知道它是否可以用SCSS或SASS来完成，并且只有纯CSS。
我为什么要这么做？我有一个带有多个选项的下拉菜单，但是有些产品的选项比其他产品少，列表会动态变化。因此，我将向不应该可见的选项中添加一个类".hidden“。
每个选项都有一个按钮和一个列表，当您悬停在按钮上时，列表就会
浏览 10提问于2022-08-17得票数 0
2回答
我试图建立一个投资组合网站使用for和我使用的反应-路由器-多姆导航。
一切都正常工作了一段时间，然后我犯了一个愚蠢的错误，把项目保存在onedrive中，遇到了一些麻烦。
链接到代码：
Live：，这并不是很有帮助，因为我们看不到任何东西，但是您可以看到下面的截图，
当我在本地机器上运行项目时，它会运行：
正如你所看到的那样，元素是存在的，但由于某种原因，它们在我看来并没有出现。
“刑法”的一些内容：
import React from 'react'
import {Route, Routes} from 'react-router-dom'
imp
浏览 3提问于2022-04-04得票数 0
回答已采纳
在嵌套的SCSS中使用nth-子类时，是否有一种方法不重复剪辑项类？输出应该在下面的CSS中。
CSS
.clip-item .group-left {
padding: 0;
}
.clip-item .group-left:nth-child(2n+1) {
background: blue;
}
.clip-item .group-left:nth-child(2n+2) {
background: gray;
}
.clip-item .group-right {
padding: 0;
}
.clip-item .group-right:nth-child(2n+1)
浏览 0提问于2017-12-11得票数 2
回答已采纳
1回答
当我使用id为root元素(App- component )定义选择器(App-component)时，我对选择器感到困惑，我可以呈现该组件。
index.html
<body>
<div id="root"></div>
</body>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: '#root',
templateUrl: './app
浏览 0提问于2019-07-07得票数 3
回答已采纳
2回答
我希望将<a>标记的选择器嵌套到类.class-name中，以便仅将这些样式应用于同时具有<a>标记和类.class-name的元素。我想要做的事情可以通过以下方式执行：
.class-name {
font-size: 40px;
}
a.class-name {
color: #ff6666;
}
<div class="class-name">Hello</div>
<a class="class-name" href="#">World!</a>
浏览 3提问于2017-12-06得票数 6
回答已采纳
2回答
如何连接选择器
、、
有没有一种方法来编写这个css：
div.some-class{
...
}
span.some-class{
...
}
就像这样使用scss？
.some-class{
&div{
...
}
&span{
...
}
}
我尝试了上面的方法，但它返回一个错误。
浏览 0提问于2013-01-17得票数 1
回答已采纳
我的标记是这样的：
<div class="container marker">
<div class="parent">
<div class="child">
content
</div>
</div>
</div>
我的scss会是
.container {
.parent {
.child {
.marker & {
background: red;
}
}
}
浏览 6提问于2014-11-14得票数 7
回答已采纳
4回答
下面是对这个问题的一个摆弄：
第二个“蓝色”如何保持与第一个实例(应该有color: white) 一样，而不改变结构？
<div class="blue">
<div class="content">
<div class="label">blue</div>
<div class="yellow">
<div class="content">
<div class="labe
浏览 6提问于2015-04-06得票数 3
回答已采纳
我在做一个反应项目。我面临这个问题:如果用户单击一个嵌套在antd库组件抽屉中的视频图标(该组件还包含其他信息，如锻炼标题)，我希望用户观看与胸部锻炼相对应的视频。我希望用户在不关闭抽屉的情况下被重定向到这个页面(抽屉占页面宽度的50%，页面的其余部分被灰色bg颜色覆盖，但仍然可见)，然后他可以再次导航到前面的信息，如果他点击一个“回”btn。app.js代码
import { Route, Routes } from "react-router-dom";
// pages & components
import { ListOfExercises } from &#
浏览 8提问于2022-10-26得票数 0
下面是我的JavaScript，它在他们旁边显示人物和图像的列表；如果名字是Jim than，还会显示产品列表。但由于某些原因，循环在Jim和他的列表之后停止：
window.onload = function append() {
var i = 0;
while (i < 4) {
console.log(i);
if (people[i] === "Jim") {
app("div", people[i]);
var arr = document.c
浏览 1提问于2015-03-11得票数 0
1回答
我正在建立一个网站与苏西，以允许灵活的网格，我需要，我还没有设置任何设置，所以我只使用默认值。
我想要能够改变排水沟(使他们更小)的一部分网站。我在这里建的：
SCSS
.feature-box-container
{
@include container(80em);
.feature-box
{
@include gallery(4 of 12);
img
{
margin-bottom:20px;
width: 100%;
}
}
}
浏览 3提问于2014-12-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
