我使用类似的几个div
我想选择所有这些并if ( $(this).hasClass() )用来检查它们中的一个.目前我只检查一个班级.例如,我如何检查所有这些.hasClass('wrap-*-addon-1')?
最好的祝福.
我有如下代码:
<div class="new-modal *max-height--xxl flex--0-1">
Run Code Online (Sandbox Code Playgroud)
我想知道*max-height--xxl这里的意思是什么?
对于类,CSS中的通配符*是一个不同的问题
我想在html类引用中询问*前缀.
这行代码适用于Apple.com的导航栏
#globalheader #globalnav[class*="nosearch"] { width:100%; }
Run Code Online (Sandbox Code Playgroud)
有人知道课后的星号是什么意思吗?
我正在使用Angular材质表,我想在表格中设置边框,使用CSS我能够设置边框:正常情况
[
但是当特定单元格的内容增加时,相邻单元格的边界不会增长,并且该表格看起来非常糟糕,具有额外内容 
这是CSS:
`.example-container {
display: flex;
flex-direction: column;
max-height: 500px;
min-width: 300px;
}
.mat-table {
overflow: auto;
max-height: 500px;
}
.mat-column-name{
border-left: 1px solid grey;
min-height: 48px;
}
.mat-column-weight{
border-left: 1px solid grey;
min-height: 48px;
.mat-column-symbol{
border-left: 1px solid grey;
min-height: 48px;
}`
Run Code Online (Sandbox Code Playgroud)
HTML`
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<mat-header-cell …Run Code Online (Sandbox Code Playgroud) 我正在创建一个包含默认(即未命名)插槽和一些命名插槽的自定义元素。我特别想设计一个命名插槽的内容,而不是其他任何一个。
有没有办法选择特定的命名插槽。
作为我想做的事情的一个例子,我的自定义元素包含一个对话框 - 像这样:
<dialog>
<slot></slot> <!-- general content -->
<div class="buttons">
<slot name="action"></slot>
<slot name="cancel"></slot>
</div>
</dialog>
Run Code Online (Sandbox Code Playgroud)
我想将所有操作按钮设置为纯色,将取消按钮设置为更褪色的颜色。
我想使用正则表达式来定义关于边界半径的复杂角点选项集
我想要一种方法来定义类角*而无需在html或css中使用每个组合
例:
这是我现在的css:
.corner-tl {
border-top-left-radius:8px;
}
.corner-tr {
border-top-right-radius:8px;
}
.corner-bl {
border-bottom-left-radius:8px;
}
.corner-br {
border-bottom-right-radius:8px;
}
Run Code Online (Sandbox Code Playgroud)
但是我希望能够应用以上所示的全部,部分或全部,如下所示,仅使用以下代码完成仅左上角和右上角的框:
<div class="corner-tl corner-tr">
Run Code Online (Sandbox Code Playgroud)
这是显而易见的解决方案 - 但是我将对填充和边距,边框等许多内容应用相同的逻辑,因此类将变得非常长.这样做的原因是,实际值(8px)可以通过php操纵到我的CMS的每个和所有实例.我宁愿使用的是:
<div class="corner-tl-tr">
Run Code Online (Sandbox Code Playgroud)
在css中是否有一种方法可以使用正则表达式来执行此操作,以便任何带有'corner'的东西以及它之后的任何内容都可以组合以向单个类添加任意数量的角落效果?
不知道怎么做表达我想要的是这个:
.corner*-tl* {
border-top-left-radius:8px;
}
Run Code Online (Sandbox Code Playgroud)
对于每个角落,其中*是之前或之后的任何内容,但仅在'角落'之后.这样,我只需要4个类来实现许多可能的组合.
示例我想在我的html中使用corner-tl-tr-br创建一个半径为左上,右上和右下的div.我也希望能够使用corner-tr-tl-br来创建相同的内容,但不为每个变体编写一个类.如果我找不到解决方案,我将被迫使用内联样式,因为可能的组合很多.此外,我的数据库将存储这些值,这些值可以按整个站点上的任何div的任何顺序添加或不添加.在四行中执行此操作会很好,每行可以合并为一行.它甚至可能是不可能的,但到目前为止的例子只显示单个类,而不是组合类.
如果我可以帮助它,我不想要制作很多样式,例如 - 角落,角落,角落,角落,角落,角落,角落,角落,角落, corner-tl-bl,corner-bl-tl,corner-tl-br,corner-br-tl等......理论上不需要角落,因为它没有半径设置,所以它是一样的在html中,由于没有应用类但可能需要实现其他类,但其余部分在我的系统中是可行的.我希望能够在一个具有4个选项的css表达式的类中应用任何组合.
我想知道是否可以定位所有以开头col-和结尾开头的类12吗?
例如类似的类:
.col-sm-12
.col-md-12
.col-lg-12
Run Code Online (Sandbox Code Playgroud)
但不是类似的类:
.col-sm-8
.col-lg-6
Run Code Online (Sandbox Code Playgroud)
我尝试了类似的东西,但不起作用:
[class^="col-*-12"] {
border: 1px solid red;
}
Run Code Online (Sandbox Code Playgroud) 我觉得我在这里遗漏了一些非常明显的东西,我可以为其编写 CSS,但我想知道是否有一种方法可以使用嵌套 SCSS 来做到这一点。如果您在某个类上设置了样式,并且该类位于不同的元素上,是否可以调整样式。例如一个h2然后是一个h3。我知道你可以通过额外的课程来做到这一点,比如......
.title-class {
background-size: 30px;
font-size: 30px;
&.another-class {
background-size: 20px;
font-size: 20px;
}
}
Run Code Online (Sandbox Code Playgroud)
这将呈现为.title-class.another-class {}
我所追求的是基类.title-class {}和嵌套样式h3.title-class {}- 这可能吗?
我认为类似以下内容(理论上)显然行不通!我尝试使用@root,但我对此的理解很少,所以我无法让它工作。
.title-class {
background-size: 30px;
font-size: 30px;
&h3 {
background-size: 20px;
font-size: 20px;
}
}
Run Code Online (Sandbox Code Playgroud)
提前致谢!
如何按类选择每个动态生成的 div?
<div class="thumbs-1 col-sm-4 col-md-4"></div>
<div class="thumbs-2 col-sm-4 col-md-4"></div>
<div class="thumbs-3 col-sm-4 col-md-4"></div>
<div class="thumbs-4 col-sm-4 col-md-4"></div>
etc
Run Code Online (Sandbox Code Playgroud)
我的静态简化 css 看起来像
.thumbs-1 {
display: inline-block;
vertical-align: top;
}
.thumbs-2 {
display: inline-block;
vertical-align: top;
}
.thumbs-3 {
display: inline-block;
vertical-align: top;
}
.thumbs-4 {
display: inline-block;
vertical-align: top;
}
Run Code Online (Sandbox Code Playgroud)
如何使我的 .css 文件动态化?
我在网页上注意到了这个CSS,并想知道它是如何工作的!
这是什么意思? input[class*="span"]
input[class*="span"], select[class*="span"], textarea[class*="span"] {
float: none;
margin-left: 0;
}
Run Code Online (Sandbox Code Playgroud) 我正在尝试将CSS样式应用于多个div元素,如以下HTML代码所示:
{% for i in player_range %}
<div id="container-frame-{{ i }}"
...
</div>
{% endfor %}
Run Code Online (Sandbox Code Playgroud)
i的值是可变的,并从我的软件的Python端传递给HTML.
下面是我想要为每个元素应用的CSS样式.
#container-frame-0{
border-style: solid;
border-width: 5px;
border-color: green;
}
Run Code Online (Sandbox Code Playgroud)
我试图将i的不同值(例如,0,1,2等......)硬编码到容器框架样式,并且它工作正常.但是,我正在寻找一种更清洁的方法.
理想情况下,我正在寻找这样的东西:
#container-frame-{{i}}{
border-style: solid;
border-width: 5px;
border-color: green;
}
Run Code Online (Sandbox Code Playgroud)
我和HTML中的相同.知道怎么做吗?