css 相关问题

Bootstrap 折叠使用 css 选择第一个和最后一个子元素

如何选择 Bootstrap 折叠模块的第一个和最后一个子项有什么建议吗？我需要首先和最后选择“.accordion-heading”。 如何选择 Bootstrap 折叠模块的第一个和最后一个子项有什么建议吗？我需要首先和最后选择“.accordion-heading”.. <div id="accordion2" class="accordion"> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 1<br /> </a></div> <div id="collapseOne" class="accordion-body in collapse" style="height: auto;"> <div class="accordion-inner"> <p>Content 1</p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 2<br /> </a></div> <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> <p>Content 2</p> </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"><br /> Toggle Accordion 3<br /> </a></div> <div id="collapseThree" class="accordion-body collapse" style="height: 0px;"> <div class="accordion-inner"> <p>Content 3</p> </div> </div> </div> http://jsfiddle.net/PzB8D/1/ 你必须先去accordion-group，然后参考accordion-heading 这将是唯一一个具有类accordion-heading的元素:) .accordion-group:first-child .accordion-heading a{color: #f00;} .accordion-group:last-child .accordion-heading a{color: #0f0;} .accordion { &:last-child{ .card-header button.collapsed { border-bottom: none; } } &:first-child{ .card-header button.collapsed { border-bottom: none; } } }

Prime ng：以编程方式调整 p-splitter 中存在的 p-accordion 的大小

请参阅下面我的组件代码： 我有一个 p 分配器，它分为 3 个部分。 我在每个部分都有一个 p-手风琴，而它又有一个 p-表。 ... 请参阅下面我的组件代码： 我有一个 p 分离器，它被分成 3 个部分。 我在每个部分都有一个 p-手风琴，而它又具有一个 p-表。 <div class="card w-full"> <p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5"> <ng-template pTemplate> <p-accordion [activeIndex]="0" styleClass="h-full"> <p-accordionTab header="Signed PDF Documents"> <div class="flex justify-content-between"> <div> <h6>Proposal PDF Documents</h6> </div> <div><a>Add Attachment(s)</a></div> </div> <ng-template pTemplate> <p-table [value]="documentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="name">Attachment Name <p-sortIcon field="name"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.name }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" > <p-accordionTab header="Papervision Documents"> <div class="flex justify-content-between"> <div> <h6>Scanned Contract Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="paperDocumentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="number">Customer Number <p-sortIcon field="number"></p-sortIcon> </th> <th pSortableColumn="name">Customer Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="type">Doc Type <p-sortIcon field="type"></p-sortIcon> </th> <th pSortableColumn="docNumber">Doc Number <p-sortIcon field="docNumber"></p-sortIcon> </th> <th pSortableColumn="docDate">Doc Date <p-sortIcon field="docDate"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.number }}</a></td> <td>{{ doc.name }}</td> <td>{{ doc.type }}</td> <td>{{ doc.docNumber }}</td> <td>{{ doc.docDate }}</td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" class="w-100"> <p-accordionTab header="Docusign Documents"> <div class="flex justify-content-between"> <div> <h6>Docusign Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="docusignDocumentList" styleClass="p-3 p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th pSortableColumn="name">Document Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="number">Doc Id <p-sortIcon field="number"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td>{{ doc.name }}</td> <td><a>{{ doc.number }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> </p-splitter> </div> 我这里有两个问题需要解决： 如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。 （这3个手风琴的最大尺寸） 怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？ 感谢您的阅读，如有任何帮助，我们将不胜感激！ 致以最诚挚的问候， 尼丁阿乌拉。 通常组件 CSS 的作用域仅限于组件内部，我们可以使用 ::ng-deep 来覆盖此行为，并且 CSS 在组件外部可见！ 如何将所有手风琴的大小设置为相同。请注意，内容是动态的，每个手风琴都根据其内容而增长。我希望所有手风琴的大小相同。 （这3个手风琴的最大尺寸） 我只是添加下面的 CSS 以确保完整高度传播到手风琴的所有元素，我使用类 custom-accordion 来确保 CSS 仅限于手风琴本身！ HTML ... <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> ... CSS ::ng-deep .custom-accordion .p-accordion-content { height: calc(100% - 54px) !important; } ::ng-deep .custom-accordion .p-toggleable-content, ::ng-deep .custom-accordion .p-accordion-tab, ::ng-deep .custom-accordion p-accordiontab, ::ng-deep .custom-accordion .p-accordion { height:100% !important; } 怎样才能让分离器不重新调整大小？目前用户可以重新调整分离器的大小。如果我想阻止它，我该如何实现呢？ 我不知道为什么你需要一个调整大小的元素，当不需要调整大小时，你可以对flexbox做同样的事情，如果你想这样做，你可以引用bootstrap grids中的CSS！ 为了实现你想要的，我们可以使用类 p-splitter-gutter 隐藏调整大小栏，我使用类 no-resize 将其范围限定到手风琴级别。 HTML <button (click)="noResize = !noResize">toggle Resize</button> {{noResize}} <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> ... CSS /* disable the resize */ ::ng-deep .no-resize .p-splitter-gutter { display: none !important; } 完整代码 TS import { Component } from '@angular/core'; import { ImportsModule } from './imports'; @Component({ selector: 'splitter-horizontal-demo', templateUrl: './splitter-horizontal-demo.html', standalone: true, imports: [ImportsModule], styles: [ ` ::ng-deep .custom-accordion .p-accordion-content { height: calc(100% - 54px) !important; } ::ng-deep .custom-accordion .p-toggleable-content, ::ng-deep .custom-accordion .p-accordion-tab, ::ng-deep .custom-accordion p-accordiontab, ::ng-deep .custom-accordion .p-accordion { height:100% !important; } /* disable the resize */ ::ng-deep .no-resize .p-splitter-gutter { display: none !important; } `, ], }) export class SplitterHorizontalDemo { noResize = false; documentList = [ { name: 'test' }, { name: 'test1' }, { name: 'test2' }, { name: 'test3' }, { name: 'test4' }, { name: 'test5' }, { name: 'test6' }, ]; paperDocumentList = [ { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, { number: 'test', name: 'test', type: 'test', docNumber: 'test', docDate: 'test', }, ]; docusignDocumentList = [ { name: 'test', number: 'test', }, ]; noAction(event: any) { event.preventDefault(); return false; } } HTML <button (click)="noResize = !noResize">toggle Resize</button> {{noResize}} <div class="card w-full custom-accordion" [ngClass]="{'no-resize': noResize}"> <p-splitter [panelSizes]="[30, 40, 30]" styleClass="mb-5" (onResizeEnd)="noAction($event)" (onResizeStart)="noAction($event)" > <ng-template pTemplate> <p-accordion [activeIndex]="0" styleClass="h-full"> <p-accordionTab header="Signed PDF Documents"> <div class="flex justify-content-between"> <div> <h6>Proposal PDF Documents</h6> </div> <div><a>Add Attachment(s)</a></div> </div> <ng-template pTemplate> <p-table [value]="documentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="name"> Attachment Name <p-sortIcon field="name"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.name }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0"> <p-accordionTab header="Papervision Documents"> <div class="flex justify-content-between"> <div> <h6>Scanned Contract Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="paperDocumentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="number"> Customer Number <p-sortIcon field="number"></p-sortIcon> </th> <th pSortableColumn="name"> Customer Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="type"> Doc Type <p-sortIcon field="type"></p-sortIcon> </th> <th pSortableColumn="docNumber"> Doc Number <p-sortIcon field="docNumber"></p-sortIcon> </th> <th pSortableColumn="docDate"> Doc Date <p-sortIcon field="docDate"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td><a>{{ doc.number }}</a></td> <td>{{ doc.name }}</td> <td>{{ doc.type }}</td> <td>{{ doc.docNumber }}</td> <td>{{ doc.docDate }}</td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> <ng-template pTemplate> <p-accordion [activeIndex]="0" class="w-100"> <p-accordionTab header="Docusign Documents"> <div class="flex justify-content-between"> <div> <h6>Docusign Documents</h6> </div> </div> <ng-template pTemplate> <p-table [value]="docusignDocumentList" styleClass="p-3 p-datatable-striped" > <ng-template pTemplate="header"> <tr> <th pSortableColumn="name"> Document Name <p-sortIcon field="name"></p-sortIcon> </th> <th pSortableColumn="number"> Doc Id <p-sortIcon field="number"></p-sortIcon> </th> </tr> </ng-template> <ng-template pTemplate="body" let-doc> <tr> <td>{{ doc.name }}</td> <td><a>{{ doc.number }}</a></td> </tr> </ng-template> </p-table> </ng-template> </p-accordionTab> </p-accordion> </ng-template> </p-splitter> </div> Stackblitz 演示

用一些通用的css代码优化scss嵌套代码

嗨，我正在尝试为某些类别和子类别设计样式。这是代码 const listStyle = styled.div` --填充值：40px； 。裹 { 。项目清单， .listItemCategory { 填充...

内联块和内联表有什么区别？

据我所知，这些显示选择器似乎是相同的。 来自 Mozilla CSS 文档： inline-table：inline-table 值在 HTML 中没有直接映射。它的行为...

带有独立滚动列的Material UI网格

我希望在 React 中使用 Material UI 制作多个滚动列。我有一种方法可以在 bootstrap 中使用 Flex 来完成此操作，但我无法将其翻译过来。我已经整理了一个黑客演示......

CSS 文件在浏览器中显示为空且未链接到 HTML 文件的问题

我创建了一个custom.css 文件并将其添加到css 文件夹中。之后，我进入该网站。这是行不通的。该文件显示为空。我将附上浏览器中的代码和图片。 .缩略图.

CSS操作的计算顺序

这是我的问题的最小示例： 这是我的问题的最小示例： <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> .container { display: flex; height: 500px; /* should not be there */ } .dependent__height { aspect-ratio: 16 / 9; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } 我想要实现的是.container不会设置高度，高度的唯一来源是.source__height。它会在运行时发生变化，一切都应该正常工作。我没有附加到弹性盒或其他东西，我只是想得到想要的行为（宽度将根据长宽比和.source__height的高度计算） 我尝试了很多跳跃，还有 JavaScript。如果使用 MutationObserver 和同步高度，JavaScript 可能会工作，但非常笨拙，对于我的用例来说，编写和维护会非常痛苦。 如果 .container 设置了高度，则可以正常工作： 但如果 height 属性被删除则不然： 注意：在现实场景中，我使用 <img> ，问题大致相同，可以通过该问题的解决方案来解决。如果你想要更多真实世界的例子，我也可以添加。 这是一种通过网格实现您想要的效果的方法： .container { display: grid; grid-template-columns: 100% max-content; } .dependent__height { aspect-ratio: 16 / 9; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> 但是，如果宽度不够，则 16/9 的依赖高度将无法在该纵横比下增长到所需的完整高度。一种解决方案是将高度设置为 100%，但这会导致其溢出容器（添加轮廓以说明这一点）： .container { display: grid; grid-template-columns: 100% max-content; outline: 4px solid skyblue; } .dependent__height { aspect-ratio: 16 / 9; height: 100%; background-color: yellow; } .source__height { width: 10px; height: 500px; /* can change arbitrary */ background-color: tomato; } <div class="container"> <div class="dependent__height"></div> <div class="source__height"></div> </div> 希望这足以让您玩并获得您想要的东西，如果这不能完全回答所有问题，请通过编辑为您的问题添加详细信息，我可以更新我的答案

CSS 背景过滤器忽略过渡持续时间（ReactJS）

我在 React 中有一个组件，它是一个仅有时会弹出的模式。我无法发布所有代码，因为它太多了，但我会简化并发布我能发布的代码。 问题： 模态应该是

打印时将图像格式化为最大尺寸为1页

我正在开发一个显示聊天对话的 html 页面，我希望它能够支持打印机，以便可以轻松导出为 PDF。我的问题是长图像可以跨越多个...

如何在cakephp中内联文本框和按钮

我试图将文本框和提交按钮内嵌在默认布局页面的顶部以进行搜索，但提交按钮却落在文本框下方，弄乱了我的布局。我尝试...

从 HTML 表单获取用户输入

我希望能够获取用户在 HTML 表单中输入的输入，并能够稍后在我的网站上打印它们。我希望能够打印所有用户信息以及他们所做的选择...

如何通过后端动态设置元素的CSS样式？ （用户自定义面板可更改其他网页的样式）

假设我们有一个包含多个页面的网站，还有一个用户帐户页面。用户在他的面板中有一个设置可以更改网站其他页面中某些部分的颜色/字体大小/样式等...

网格布局和剪辑路径帮助（中间图像消失）

我目前正在探索剪辑路径。我在网格布局和消失的图像方面遇到了一些麻烦。 我在名为 .gallery 的 div 中有三个图像。我希望他们： 并排显示...

引导模式打开时无法在输入类型=“文本”中键入（甚至无法聚焦）

我有一个 jquery 代码，它创建一个下拉菜单并将其精确放置在用户右键单击的位置。一切正常，除了一件事：我无法在输入字段中键入内容。 生成的dro...

卡片下方的按钮

我有产品卡，我想要产品卡，我想在它们下面添加一个“购买”按钮。但按钮不断向右移动。我如何放置一个按钮，以便每个按钮...

HTML5 - 保留 <img> 供以后使用

我正在建立一个网站，用户可以上传图片，然后就会显示出来。稍后我需要将此图像设置为他们的个人资料图片。这是我的代码： 我正在建立一个网站，用户可以上传图片，然后就会显示出来。稍后我需要将此图像设置为他们的个人资料图片。这是我的代码： <input id="inp" type='file' accept="image/*"onchange="readURL(this);" /><br> <img id="blah"/> <script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#blah') .attr('src', e.target.result) .width(150) .height(150); }; reader.readAsDataURL(input.files[0]); } } </script> 我不太明白你的问题，你可以将数据保存在一个变量中，然后在必须发布图像时使用该变量，你应该避免将图像直接存储在数据库中，而是存储对它们的引用。 但是如果你想在选择图像后简单地显示图像，你可以这样做： let input = $('input'), img = $('img'), reader = new FileReader(); function readFile(e) { reader.onload = function(e) { img.attr('src', e.target.result) } reader.readAsDataURL(e.target.files[0]) } input.on('change', readFile) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="inp" type='file' accept="image/*"/> <img/> 但是，如果您想将图像永久保存在数据库中，您将必须了解后端如何工作，并且可能需要设置一个 Restful API。

Bootstrap 5.3 tablist 里面<select><option>不能在除最新的firefox之外的其他浏览器上工作

除了 Mozilla Firefox 浏览器之外，我的以下代码无法正常工作。我正在使用 Bootstrap 5.3。任何人都可以帮助我制作带有选择选项的工作表格列表吗？ 这是我的代码在

中心文件输入 - Html/Css

我正在使用 HTML、Javascript 和 CSS 构建一个网站，并且我有一个文件输入，但由于某种原因它不会完全居中。 身体 { 宽度：100%； 高度：100%； 保证金：自动； 文字...

Drop-shadow 在 iOS Safari 上无法正常工作

我已向复选框标签添加了阴影，以便在选中它们时出现阴影。它们在 chrome 上完美运行，但是当我在 mac 和 iPhone 上的 safari 上尝试它们时......

如何显示小数点下的单位（Woocommerce 价格）？

问题： 我需要在小数点下显示单位。 所以我使用以下代码分隔小数部分。 但它显示如下（单位位于价格旁边）： 请让我知道如何...