- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一堆类名称为red
的元素,但是似乎无法使用以下CSS规则选择class="red"
的第一个元素:
.red:first-child {
border: 5px solid red;
}
<p class="red"></p>
<div class="red"></div>
.home .red:first-child {
border: 1px solid red;
}
<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
red
类的第一个孩子?
最佳答案
这是作者误解:first-child
的原理的最著名例子之一。 Introduced in CSS2,:first-child
伪类表示其父级的第一个子级。而已。有一个非常普遍的误解,认为它选择第一个与其余复合选择器指定的条件相匹配的子元素。由于选择器的工作方式(有关说明,请参见here),事实并非如此。
Selectors level 3 introduces a :first-of-type
pseudo-class,代表其元素类型的同级元素中的第一个元素。 This answer通过插图说明:first-child
和:first-of-type
之间的区别。但是,与:first-child
一样,它不会查看任何其他条件或属性。在HTML中,元素类型由标记名称表示。在问题中,该类型为p
。
不幸的是,没有类似的:first-of-class
伪类可用于匹配给定类的第一个子元素。我(Lea Verou)为此(虽然是完全独立的)提出的一种解决方法是,首先将所需的样式应用于该类的所有元素:
/*
* Select all .red children of .home, including the first one,
* and give them a border.
*/
.home > .red {
border: 1px solid red;
}
~
来“撤消”第一个类之后的类的元素的样式:
/*
* Select all but the first .red child of .home,
* and remove the border from the previous rule.
*/
.home > .red ~ .red {
border: none;
}
class="red"
的第一个元素将具有边框。
<div class="home">
<span>blah</span> <!-- [1] -->
<p class="red">first</p> <!-- [2] -->
<p class="red">second</p> <!-- [3] -->
<p class="red">third</p> <!-- [3] -->
<p class="red">fourth</p> <!-- [3] -->
</div>
red
,因此将其跳过。
red
,但是其父元素中没有任何具有类
red
的元素。因此,不应用第二条规则,仅应用第一条规则,并且元素保留其边界。
red
。它还带有至少一个其他类别为
red
的元素。因此,两个规则都被应用,第二个
border
声明将覆盖第一个规则,从而“撤消”它,可以这么说。
:first-of-type
和
:nth-of-type()
不同,后者仅受IE9及更高版本支持。如果您需要良好的浏览器支持,那么您很幸运。
:first-of-type
问题,只需提供类型选择器而不是类选择器即可(再次,在后面的部分中将详细介绍其不正确的用法):
article > p {
/* Apply styles to article > p:first-of-type, which may or may not be :first-child */
}
article > p ~ p {
/* Undo the above styles for every subsequent article > p */
}
:nth-child()
notation(最初是一个称为
:nth-match()
的全新伪类),它使您可以使用
:nth-child(1 of .red)
之类的东西来代替假设的
.red:first-of-class
。作为一个相对较新的建议,尚无足够的可互操作的实现方式使其可以在生产现场使用。希望这会很快改变。同时,我建议的解决方法应适用于大多数情况。
:eq()
,
:first
,
:last
等,但再次请注意
they function very differently from :nth-child()
et al。使用Selectors API,您可以使用
document.querySelector()
获得第一个匹配项:
var first = document.querySelector('.home > .red');
document.querySelectorAll()
与索引器一起使用以选择任何特定的匹配项:
var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc
.red:nth-of-type(1)
解决方案有效(该解决方案最初由
Martyn编写,但此后已删除),但是它的行为并不符合您的期望。
p
:
<p class="red"></p>
<div class="red"></div>
.red:first-of-type
(等同于
.red:nth-of-type(1)
),因为每个元素都是其类型的第一个(也是唯一)(分别为
p
和
div
),所以两个元素都将匹配通过选择器。
<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
.red:first-of-type
应用于规则将起作用,但是一旦添加不带该类的另一个
p
,则可以:
<div class="home">
<span>blah</span>
<p>dummy</p>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
.red
元素现在是第二个
p
元素。
关于css - 类的第一个元素的CSS选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32204700/
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点? .someClass { //apply rules to
在更新我的 css 之前,我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。 但是,如果元素中的某个属性弄乱了特定页面,而我不想只使用内联 CSS 在该页面中使用它怎么办
我刚刚发现了 initial-scale 元属性。 以前,我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素),以便它们在桌面计算机的屏幕上显示得很好。然后,如果您使用的是
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。 现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗?我不想使用脚本
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页,我可以手动完成。但是有100页。有人有想法吗? 最佳答案 就像有人说的那样,“
当我想从 Styled Components 迁移到 CSS Modules 时,出现了以下问题。 假设我有以下样式组件,它接受动态参数 offset和一个动态 CSS 字符串 theme : con
有没有办法将 CSS 类定义为与另一个类相等?例如,如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
我正在尝试制作一组按钮,这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据,然后我用它来显示按钮。 我的问题在于让按
浏览器是否在加载 CSS 文件时解析 CSS?还是在整个 CSS 文件被浏览器下载后才进行解析?不同浏览器的做法有区别吗?我在哪里可以找到这种底层信息? 这个问题不是 Load and executi
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。 标题有点乱,我给大家看一下。假
我遇到了最奇怪的问题...... 在最简单的形式中,我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中,我已经大大减少了它) 当我查看页面的源代码时,我得到以下信息:
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间,min 文件不会与系统的其余部分一起发布。 我有很多 css
请告诉我 CSS 框架和 CSS 网格之间的区别。 最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途,例如 Hartija
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
我以前使用 bootstrap css import 很好。 但是我正在尝试使用 CSS 模块,所以我添加了几行。 { test: /\.css$/, use:
有没有办法在 css 选择器中创建一个 css 组。 例如: .SectionHeader { include: .foo; include: .bar; include: .
今天我学习了 CSS 中的两个概念,一个是 CSS 定位(静态、相对、绝对、固定),另一个是 CSS Margin,它定义了元素之间的空间。 假设我想移动一个元素,这是最好的方法吗?因为这两个概念似乎
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /
我是一名优秀的程序员,十分优秀!