如何在SASS中链接伪选择器
在 SASS 中，伪选择器是通过在选择器之前添加特殊字符来创建的。它们不会实际选择元素，而只是定义选择器之间的关系。下面是 SASS 中的伪选择器：
- 符号选择器 (
foo-bar, 它实际上只是用来分隔选择器)
例子用法：
li {
font-weight: bold;}
li:first-child {
@extend li;}
li.active {
@extend li;}
li {
@extend li.active;}
- 类名选择器 (
.foo, 实际选择器之前添加类名)
例子用法：
li.foo {
display: inline-block;}
- 标签选择器 (
>foo, 选择类名)
例子用法：
li {
> a {
font-weight: bold; font-size: 1.2rem; }}
这个伪选择器将选择每个 li 之后的所有元素，然后将其应用特定样式。
- ID 选择器 (
#foo, 使用 ID 属性而不是类名)
例子用法：
li#foo {
background-color: #ff0000;}
这个伪选择器将选择具有 ID "foo" 的每个 li。
这些伪选择器用于在 SASS 中进行层次关系和复杂关系的样式控制，以便更加清晰地定义 CSS 规则。不过，在实际开发中，我们通常更喜欢更清晰地使用 SASS 和 CSS，而不是使用伪选择器。
相关·内容
2回答
我可以在CSS规则中的伪类之后添加类选择器吗，例如：
a:hover.my-class {
background: red;
}
因此，如果我悬停在我的锚标签，<a class="my-class">link</a>，背景会是红色的所有浏览器？这是有效的CSS？
为什么我需要这个
我有这个问题，因为它是由SASS中的混合元素生成的：
@mixin focus($classA, $classB) {
&:focus {
&#{$classA} {
background: blue;
}
&
浏览 8提问于2017-07-23得票数 3
回答已采纳
5回答
我是sass的新手，我有很多这样的台词：
-webkit-border-top-right-radius: $topright;
-moz-border-radius-topright: $topright;
和
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
我不知道那些以"-“开头的名字是什么，我想知道"&:”和"&::“的意思。
谢谢
浏览 3提问于2014-08-19得票数 1
回答已采纳
我正在开发一个ReactJS应用程序，我有以下在组件中使用的代码： <div class="order-box">
<div class="order-header">Table #1</div>
<div class="order-list">
<div class="order-item-container ">
<span class="checkmark"></span&
浏览 31提问于2020-04-08得票数 2
回答已采纳
我需要把所有的CSS改成SASS..。然后发现
margin:10px
在CSS中工作，在SASS中失败，有点令人不安……
很容易错过一个，你不知道你错过了什么(什么在最终的CSS中不起作用，但你不知道)
我很可能是grep for /:\S/ (冒号后跟非空格)，使用TextMate ( Mac文本编辑器)查看是否存在这样的情况……但那些a:hover也会出现。
浏览 0提问于2010-06-15得票数 2
回答已采纳
我有一个CSS，我试着移动到SASS，它有许多类似的结构
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
...
}
在这方面：
.btn-primary {
...
&:hover,
&:focus,
&:active,
&.active,
.open .dropdown-toggle#{&} {
很明显我明白：
.
浏览 3提问于2016-04-27得票数 5
回答已采纳
我将我的Sass编译器从libsass/sassc 3.6.2转换为Dart Sass 1.44.0，现在我得到了这个错误。我不知道那是什么意思。是虫子吗？
Error: Invalid parent selector "[type=button]"
╷
312 │ ┌ &a:link,
313 │ │ &a:visited
314 │ │ {
│ └────^
╵
这是代码：
#{$buttonInputs},
div.buttons a,
span.buttons a,
a.button
{
// (s
浏览 3提问于2021-12-02得票数 0
当下面代码中的子元素span.图标-汉堡包接收到一个:焦点状态时，我想要更改li元素的样式。使用SASS解决方案，我读到@at-root可以在这里工作。然而，我无法为这个用例找到一个使用@at的SASS解决方案。你对这个用例有什么想法？
HTML:
<ol>
<li>
<span class="icon-hamburger"></span>
</li>
</ol>
CSS/SASS:
.icon-hamburger:focus {
@at-root ol li #{&} {
浏览 9提问于2016-10-21得票数 1
我有一个ReactJS应用程序，使用SASS为文本输入中的占位符值设置CSS样式。下面的代码没有问题(我已经为其他浏览器供应商省略了样式，所以我只显示webkit)：
*::-webkit-input-placeholder {
color: rgb(126, 126, 126);
transition: color .25s linear;
}
input:focus::-webkit-input-placeholder {
color: rgb(187, 187, 187);
}
... others emitted for brevity ...
但是，由于我
浏览 3提问于2018-03-09得票数 3
回答已采纳
在SASS的class selecter中，我想选择parent的兄弟。
.bw-textarea {
height: 150px;
padding: 10px;
overflow-y: auto;
background: white;
text-align: left;
width: 100%;
border: 1px solid #eeeeee;
font-size: 12px !important;
color: #666666;
// textarea:disabled & {
// bac
浏览 0提问于2017-03-17得票数 1
2回答
我知道你可以
a[href^="http"]{...}
a[data-test*="test"]{...}
a[href$=".com"]{...}
但是，除了^、$和*之外，您还能在CSS/3中使用其他更复杂的正则表达式(而不是使用sass或sass之类的框架)吗？
浏览 2提问于2013-10-10得票数 2
回答已采纳
在SASS中，为了跳出巢穴，我们可以这样写：
div {
color: #666;
@at-root p {
color: #f00;
}
}
然后会像这样产生：
div {
color: #666;
}
p {
color: #f00;
}
但是在LESS中，如何实现相同的功能呢？
浏览 4提问于2016-07-21得票数 9
2回答
如何将伪元素(如:after )与伪类(如:hover和:not )组合
li {
margin-bottom: 10px;
}
li:after {
content: '';
display: block;
width: 0;
height: 3px;
background: #009688;
transition: width .8s;
}
li:hover:after {
width: 100%;
}
<ul>
<li>first</li>
<li>second</li>
浏览 2提问于2016-09-14得票数 8
回答已采纳
3回答
我正在慢慢学习html/css。我有一个客户端，希望页面上的3个链接是明显的链接颜色(在这种情况下，蓝色)。但是，当我尝试编辑链接的样式时，它们中只有两个显示了更改。
我无法在全球范围内设置它，否则其他链接(如一些社交媒体图标)正在发生变化。
以下是我尝试过的：
div.entry-content a:link {
color: blue;
}
entry-content a:link {
color: blue;
}
下面是我在查看页面时所看到的内容：
我哪里出问题了？我希望我增加了援助所需的一切。谢谢。
浏览 3提问于2016-07-27得票数 1
回答已采纳
我想能够得到两个不同的弹出窗口，可以打开和关闭使用不同的链接在同一页上只使用HTML和CSS，没有Javascript。这是可能的吗?如何实现？
浏览 0提问于2021-10-23得票数 0
1回答
运行grunt任务编译scss文件时出现以下错误：
Running "watch:sass" (watch) task
Waiting...
>> File "Content\sass\main.scss" changed.
Running "sass:dist" (sass) task
Error: expected "{".
@import "layout";
^
Content\sass\main.scss 4:17 root stylesheet
Warni
浏览 7提问于2018-06-12得票数 0
2回答
我知道这是个愚蠢的问题。
我一直在想，在以下几个方面有什么区别：
.test a {}
or
.test a:link {}
我做了几次测试，看上去都一样。
什么变化？
浏览 3提问于2015-09-20得票数 0
回答已采纳
我使用以下代码来更改我的网站的游标(SASS)：
body {
cursor: url(../images/cursor.png), auto;
a {
color: grey;
text-decoration: none;
&:hover {
cursor: url(../images/cursor.png), pointer;
color: black;
}
}
}
我使用Chrome作为浏览器，出于某种原因，无论我尝试了什么，当我悬停在<a>标签上时，我总是看到这种抖动发生：
我怀疑Chro
浏览 0提问于2018-04-18得票数 0
回答已采纳
在Sass中是否可以@extend类而不包括一些伪类。
例如：
&.sprite-icon-thumbs-up {
@include sprite(-130px, -239px, 51px, 22px);
}
&.sprite-icon-thumbs-up:hover {
@include sprite(-185px, -239px, 51px, 22px);
}
稍后，我将介绍雪碧@extend：
.some-class {
@extend .sprite;
@extend .sprite-icon-thumbs-up;
&
浏览 0提问于2014-06-02得票数 1
回答已采纳
我有一个重置(Eric‘set )来设置字体，然后在此之上加载样式表，其中我想使用通用选择器全局设置字体
但是，尽管在我的SASS中，通用选择器是在重置后加载的，但重置是优先的。(请参阅附自devtools的截图)
我知道这与特异性有关，但我认为通用的选择器会起到通配符的作用。为什么会这样呢？
浏览 5提问于2015-06-05得票数 3
回答已采纳
我希望有人能给我一个提示，如何调查这个问题。 在Vue项目中，buefy包含在main.js中，如下所示： import Vue from 'vue'
import Buefy from 'buefy'
import './style.scss'
Vue.use(Buefy)
import Client from './client.vue'
let vm = new Vue({
el: '#app',
render: h => h(Client)
}) ，其中style.css导
浏览 20提问于2020-09-28得票数 0
4回答
我已经很长一段时间没有使用SASS了，我想知道:first-child或:last-child等伪元素是否有问题？
浏览 0提问于2011-05-02得票数 36
回答已采纳
3回答
正如我已经说过的，我的问题是在悬停按钮时看不到悬停操作 这是我的html按钮 <button class="btn">button</button> 这是我在scss中悬停的代码 .btn{
background-color: $secondColor;
font-variant-caps: all-petite-caps;
border-radius: 2px;
:hover{
background-color: aqua;
}
} 这是'sass watcher‘后的css代码 .b
浏览 48提问于2021-09-13得票数 0
回答已采纳
4回答
有:链接的奇怪之处
、、、
我的HTML：
<a href="http://google.fr">Google</a><br>
<a href="http://wikipedia.org">Wikipedia</a>
CSS：
a:link {
text-decoration: none
}
我只会样式未访问的链接(逻辑上，a:链接样式未访问的链接)，但即使访问链接失去下划线。为什么？
更新: JSFiddle：
浏览 2提问于2014-06-11得票数 2
回答已采纳
如果元素的n等于同一选择器中的另一个元素的n，那么是否可以编写CSS来选择元素：
input:nth-child(1):checked ~ div > div:nth-child(1)
input:nth-child(2):checked ~ div > div:nth-child(2)
input:nth-child(3):checked ~ div > div:nth-child(3)
...
input:nth-child(n):checked ~ div > div:nth-child(n)
CSS是否支持这种功能，还是一切都必须逐行写出？
浏览 1提问于2021-04-15得票数 0
回答已采纳
1回答
我得到了下面的html和css
.a {
text-align: center;
a {
text-decoration: none;
color: $blue;
font-size: 1.2rem;
font-weight: 700;
}
}
.btn {
display: block;
padding: 1rem 2.5rem;
text-align: center;
text-decoration: none;
font-size: $medium;
font-weight: $bold;
cursor: po
浏览 0提问于2018-03-09得票数 0
1回答
div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; width: 75px; height: 75px; background: #0f0; }
div::before::before { position: absolute; content: ''; width: 50px; height: 50px; background: #00f; }
我的语法错误还是伪元素中的
浏览 2提问于2013-07-25得票数 9
回答已采纳
1回答
选择所有伪元素和类
、、、
有一堆伪元素和类：
*在，之前，：第一行，：：选择，：：背景
*活动，：默认，:dir()，：禁用，：空，启用，:first -type，：first-type，：全屏，：焦点，：悬停，:invalid，：无效，:lang()，：last type，:left，:link，:not()，:nth-child()，：nth-last()，：nth-末位类型()，:nth-of-type()，：only，：only类型，：可选的，：超出范围的，：只读，：读-写，:required，:right，:root，：作用域，：有效，访问：
还有其他类似：：-webkit-输入-占位符，
浏览 5提问于2015-07-10得票数 6
回答已采纳
下面的错误让我有点困惑。我没有SCSS的经验。这是一个分包前端设计公司给我们的文件。我试图使用考拉进行编译，这似乎是一个简单的开放源码的免费windows sass编译器。
错误：
assets\sass\main.scss
Error: Invalid CSS after "&:not(": expected ")", was "'.full')"
on line 23 of assets/sass/components/_last-update.scss
from line 13 of
浏览 1提问于2017-03-01得票数 0
回答已采纳
1回答
导航栏边距的间距不起作用
、、、、
我遵循了这篇关于构建React应用程序的教程:面向初学者的react JS教程#1 -使用React、Sass、Gulp和Node.js构建网站
除了导航栏的间距之外，所有东西都工作得很好。他调整间距的方式是：
代码：
我重新看了几遍视频，也找不出哪里搞砸了。这可能是一个简单的解决方案，但我似乎找不到解决方案。
文件链接：
浏览 1提问于2017-08-28得票数 0
我正面临一个奇怪的问题，在我的网站上的工具提示。
我在其中一个页面中呈现一个AJAX数据表，在某个列下面有一个链接列表，当用户悬停在页面上时，这些链接会显示一些信息。现在工具提示的背景涵盖了相邻的文本，而不是相邻的链接--它们“穿透”了背景：
链接的HTML元素：
<a class="tooltip" href="http://some.url.com/browse/${dmpItem["id"]}" target="_blank" data-text="${dmpItem["name"]}
浏览 1提问于2022-04-19得票数 0
回答已采纳
即使DOM有一些访问过的链接，document.querySelectorAll('a:visited')也总是返回空的NodeList。
我已经在Chrome上试过了。是否有任何已知的错误或它是预期的行为？
如果我在样式表中使用:visited而不是querySelectorAll，那么它工作得非常好。
a:visited{
color:yellow;
}
我认为伪类可以作为querySelectorAll()的参数。
浏览 0提问于2013-04-16得票数 5
回答已采纳
我对SASS非常陌生，目前我正在使用用SASS编写的库。我不仅要覆盖这个库中的变量，还要覆盖几个位的样式。如何在不复制特定类的CSS的情况下重写此样式？
为了清楚起见，假设我的库中有这个类，我在我的main.scss中导入了这个类：
.twitter-foo {
float: none;
}
现在在我自己的档案里：
.twitter-foo {
float: a lot more;
}
那么我的输出是：
.twitter-foo {
float: none; // overriden!
}
.twitter-foo {
float: a lot more;
}
浏览 3提问于2015-03-16得票数 10
1回答
我正在开发像这样的面包屑：
<div class="breadcrumb">
<ul>
<li><a href="behandelingen.html">Behandelingen</a></li>
<li><a href="behandelingen-cat.html">Gelaatsverzorgingen</a></li>
<li class="active">Env
浏览 3提问于2014-03-29得票数 3
回答已采纳
这可能是一个愚蠢的问题，但我还没有找到这两个CSS定义之间是否存在差异：
div:hover.item {}
div.item:hover {}
或者..。他们俩的行为是一样的吗？
浏览 4提问于2011-02-23得票数 2
回答已采纳
1回答
在中，我们清楚地表明
JavaFX级联样式表( CSS )基于W3C CSSVersion2.1 ，并从当前版本3 的工作中添加了一些内容。
在JCRG中，它们经常直接链接到W3C的CSS参考指南，在讨论选择器时就是这样。
在JCRG中，他们提到了、和-they，甚至说他们没有提到。
如果JavaFX支持它们，它们是如何工作的？JavaFX认为属性是什么？我认为CSS引擎可能会查看FXML中的属性，但并不是所有场景图都来自FXML。
浏览 1提问于2018-03-01得票数 2
回答已采纳
2回答
通用选择器*会影响伪元素如:before和:after吗？
让我举一个例子：
当这样做时：
* { box-sizing: border-box; }
.上面的声明不也自动包含/影响伪元素(如:before和:after )吗？
或者，为了影响像:before和:after这样的伪元素，必须声明这一点吗？
*, *:before, *:after { box-sizing: border-box; }
这有道理吗？
我一直只使用* { box-sizing: border-box; }，从来没有遇到过任何伪元素的问题。但是我看到很多教程在做*, *:before, *:after，但它们从未
浏览 4提问于2014-07-17得票数 26
回答已采纳
2回答
也许我做错了但我做了：
<td style="width: 15%; vertical-align: text-top; background:#666;">
<strong><div style="color:#FFF;">Description:</div></strong>
</td>
是否可以创建一个css <style>类，只有一个这样我就可以这样做：
<td class="darkstyle">Description</td>
浏览 0提问于2016-02-29得票数 0
回答已采纳
2回答
我正在用textarea和wysihtml解决我正在看到的一个问题。
目前我有这样的事情
<textarea class="wysihtml wysi-fix" required></textarea>
我有一些CSS看起来像这样
.wysi-fix{
//some css here
}
..wysi fix CSS在textarea上工作，但是如果我将textarea更改为.
<textarea class="wysihtml" required></textarea>
我将CSS更改为
.wysihtml[r
浏览 11提问于2016-10-24得票数 1
回答已采纳
2回答
我有一种图像地图，我用li来创建元素，然后在悬停时弹出信息。html代码是：
<li id="b906" style="z-index: 1000;">
<a href="#">
<span> </span>
<span class="para">Some text and maybe an image goes here.</span>
</a>
</li>
对应的HT
浏览 2提问于2010-07-21得票数 1
回答已采纳
4回答
我正试图修改我的HTML，JavaScript和CSS3考试；我有点困惑的CSS选择器，谁优先。
我有以下CSS：
table { border: 1px solid black; }
tr:nth-child(odd) { background-color: red; }
tr td:nth-of-type(even) { background-color: blue; }
td { background-color: green; }
我认为，不管最后是什么，都是优先考虑的，所以在我看来，桌子上的所有
浏览 3提问于2015-06-15得票数 7
回答已采纳
2回答
我正在调试引导选项卡模块和使用Tab模块的应用程序，将其所有的颜色更改都放在li:hover：：color元素中。Firefox并没有将：：the从DOM元素中分离出来，但Chrome却是这样。在常规DOM元素上，例如a，我可以右击打开菜单以选择悬停，也可以单击右侧的引脚选择悬停。
当我右键单击“元素”窗口中的“之前”或尝试在dev tools窗口的右侧选择“悬停”时，我不能。
有办法在伪元素上创建悬停操作吗？
浏览 3提问于2016-03-02得票数 1
回答已采纳
1回答
我在CSS中看到过这样一行代码：
[icon]:not([focused]):not([pressed]):not([disabled]){ background-position-y:-0px; }
本例中的多个冒号是什么意思？它们仍然是伪选择器吗？
浏览 1提问于2012-11-18得票数 2
回答已采纳
我试图重新着色在一个离子3项目的SCSS页面的所有元素的背景和文本。
我目前使用的SASS代码是：
* {
background-color: black;
color: white;
}
问题是只有背景颜色被改变了。问题是文本保持默认颜色。
我会寻找一个不同的属性来覆盖，但是"color“属性在html样式中工作。以下HTML代码执行所需的更改：
<ion-card-header style="color: white">
Title
</ion-card-header>
"color“属性也适用于所有需要重新着
浏览 5提问于2017-11-02得票数 1
回答已采纳
这样做很好：
d3.selectAll('ul li')
.style('background', 'red');
然而，这并没有任何作用：
d3.selectAll('ul li:before')
.style('background', 'red');
d3.selectAll('ul li:before')返回的选择是空的，即使:before元素确实存在，并且具有一些现有的CSS样式。
有可能用d3瞄准伪元素吗？
如果是的话，一个快速跟进的问题:我将如何将所有:befo
浏览 2提问于2015-03-03得票数 7
回答已采纳
3回答
角动态颜色
、、、、
编辑:我不想在我们可以使用预定义调色板的地方使用角度主题。我想对暗类和光类都使用自定义颜色。。
我们是否可以有一个styles.sass(这是主要的sass)文件，如下所示：
.light {
$background:#ffffff;
$text-foreground: #000000;
$text-foreground-onhover: #ffffff;
$text-background-onhover: #000000;
}
.dark{
$background:#000000;
$text-foreground: #ffffff;
浏览 1提问于2018-01-17得票数 1
1回答
在sass中有没有一种方法可以像这样链接选择器：
input {
&::-webkit-input-placeholder,
&:-moz-placeholder,
&::-moz-placeholder,
&:-ms-input-placeholder {
color: red;
}
}
浏览 0提问于2014-05-27得票数 0
3回答
在这种情况下，为什么:not选择器根本不能工作：
a {
color:red;
}
div a:not(.special a) {
color: green;
}
例如：
<div>
<span>hello<a href="#">link</a></span>
</div>
<div class="special">
<span>hello<a href="#">link</a></span>
&l
浏览 2提问于2016-03-03得票数 1
回答已采纳
我以前从来没有使用过SCSS，我想知道它是否允许我根据位于其中的复选框是否被选中来设置元素的样式。
例如，我有：
<label>
<input type="checkbox"/>
</label>
我想更改label::before的内容，这取决于该框是否被选中。
SCSS允许这样的事情吗？如果是，我该怎么做？
促使我考虑使用SCSS来执行此操作的原因是(如果我没有弄错的话)使用SASS确实是可能的。
然而，由于我不熟悉SASS，我宁愿使用SCSS，因为转换我的文件显然非常容易。
浏览 0提问于2016-10-19得票数 6
回答已采纳
有谁能解释一下为什么通用选择器不适用于:after？该标准的相关部分将是伟大的，但也是其背后的理由。
编辑：我可以看到我的问题措辞很糟糕，我很抱歉。我的意思是，* { color: green; }使文档中的文本几乎全部变成绿色，但不适用于，#mypar:after { content:"newly-added content"; }说。我意识到这个内容不在原始DOM中.但是看起来* { color: green; }应该足够了，而不是需要编写*, *:after { color: green; }。
为了清楚起见，我还编辑了我问题的标题。
2编辑：这太糟糕了.好吧，我试着提供
浏览 3提问于2014-02-17得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
