带有:hover和: PostCSS的嵌套语法
是一种在前端开发中使用的CSS语法。它允许开发人员在编写CSS样式时使用嵌套的方式来组织和管理样式代码，同时还可以方便地应用:hover伪类和PostCSS插件。
:hover是CSS中的一个伪类，用于指定鼠标悬停在元素上时的样式。通过使用:hover伪类，可以在元素被悬停时改变其外观，例如改变背景颜色、字体颜色等。
PostCSS是一个基于JavaScript的CSS处理工具，它可以通过插件机制对CSS进行转换和优化。PostCSS的嵌套语法可以让开发人员在编写CSS时使用类似于Sass和Less的嵌套语法，提高代码的可读性和维护性。
使用带有:hover和: PostCSS的嵌套语法可以使CSS代码更加简洁和易于管理。通过嵌套语法，可以将相关的样式规则组织在一起，减少重复代码的编写。同时，使用:hover伪类可以方便地定义鼠标悬停时的样式效果，提升用户体验。
在腾讯云的产品中，与前端开发和CSS相关的产品包括腾讯云CDN（内容分发网络）和腾讯云Web应用防火墙（WAF）。腾讯云CDN可以加速网站的访问速度，提供更好的用户体验；腾讯云WAF可以保护网站免受各种Web攻击，提高网站的安全性。
更多关于腾讯云CDN的信息，请访问：https://cloud.tencent.com/product/cdn 更多关于腾讯云WAF的信息，请访问：https://cloud.tencent.com/product/waf
相关·内容
我试图让PostCSS为不同的媒体查询导入不同的文件，但是没有执行带有媒体查询的导入。
其他导入可以正常工作，但其中的导入并不是导入的。
示例
@import "variables.css";
h1 {font-family: var(--font-heading);}
@media (--small-device){
@import "detailed/small/base.css";
}
@media (--medium-device){
@import "detailed/medium/base.css";
}
@med
浏览 4提问于2017-11-04得票数 0
回答已采纳
1回答
我正在听Udemy关于吞咽和postCSS的视频课程，做着和导师一样的事情，但是没有什么效果。
我的媒体--混合查询：
@define-mixin atSmall {
@media (min-width: 530px) {
@mixin-content;
}
}
我的postCSS代码：
.large-hero__title {
font-size: 1.1rem;
@mixin atSmall {
font-size: 2rem;
}
}
并将其编译到此代码中，因此媒体查询无法正常工作：
.large-hero__title {
浏览 1提问于2017-10-23得票数 0
回答已采纳
如何让postcss-nesting和使用PWA插件构建的@vue/cli v3项目正常工作呢？
到目前为止我已经试过了
npm install postcss-nesting
然后，我创建了一个包含以下内容的src/main.css
body {
h1 {
color: green;
}
}
在main.js文件中，我导入了css import './main.css';
然后在postcss.config.js中，我将其添加到插件中(与其他插件一起工作)，例如
module.exports = {
plugins: {
'
浏览 0提问于2018-12-16得票数 1
我已经启动了Vim (v8)，并为css3准备了适当的语法高亮符号。我正在使用postcss插件precss在我的代码中提供类似"SASS“的语法。
但是，当我使用带有"&:last-child“或&:first-child的嵌套选择器时，语法抛出错误。它不会破坏代码或任何东西，但那个“红色”错误让我分心。查看下面的屏幕截图。
有谁能想出解决这个错误的办法吗？？我使用了一个名为vim-css3-语法的插件，它包含了scss语法突出显示功能。
编辑:通过下载然后添加au BufRead,BufNewFile *.css set filetype=scss.css修
浏览 3提问于2016-11-06得票数 0
我试图将Stylelint添加到一个带有NextJS的全新EmotionJS类型记录项目中，几乎没有任何规则适用于我的样式文件，我所看到的唯一错误就是Unknown word CssSyntaxError。
发生此Unknown word错误是因为我在JS语法中使用CSS，并且修正了在.eslintrc上添加这一行的问题，因为我计算出了
{
...
"customSyntax": "@stylelint/postcss-css-in-js",
...
}
但是在这个错误之后，我的样式文件上没有规则，我尝试扩展其他标准，删除eslint和pretti
浏览 12提问于2022-03-24得票数 1
回答已采纳
3回答
我使用TailwindCSS和PostCSS，我有这个css代码： .btn {
@apply py-1;
@apply px-4;
@apply border;
@apply rounded;
}
.btn:hover {
@apply bg-white text-black;
}
.btn:focus {
@apply bg-black text-white;
} 在PostCSS中(或使用插件)有没有一种原生的方式来编写下面这样的代码？ .btn {
@apply py-1;
@apply px-4;
@apply border;
@appl
浏览 93提问于2020-08-24得票数 1
1回答
这是我的第一个Tailwind项目，它是从CDN开始的，但是我并不总是有互联网，所以我尝试使用PostCSS安装它，我使用Vite作为我的服务器。
跟随了CodeWithHarry 的视频
我第一次发起这个项目是
npm init -y
和安装所需的软件包
npm install -D tailwind postcss autoprefixer vite
然后启动了Tailwind CSS
npx tailwindcss init -p
此外，我还在一个input.css文件中输入了@顺风指令。
但当我跑的时候
npm start
我的vite服务器向我发出了以下错误的问候：
[plugin
浏览 23提问于2022-01-03得票数 4
回答已采纳
我使用的是nextjs，并在我的nextjs应用程序中添加postcss嵌套时面临困难。
下面是相同的配置：
next.config.js
const withPlugins = require("next-compose-plugins");
module.exports = withPlugins([], {});
postcss.config.js
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer
浏览 3提问于2022-01-02得票数 1
回答已采纳
“顺风”提供 sm、md、lg、xl和2xl，您也可以使用。
我可以在类名中使用它们：
<img class="w-16 md:w-32" src="...">
但我也可以在PostCSS中使用它们吗？
例如，我希望这样做(代码实际上不起作用)：
img {
@apply w-16;
/* I want this section to apply whenever the `md` media query applies. */
md:& {
@apply w-32;
}
}
浏览 9提问于2022-12-01得票数 0
2回答
后置语法错误
、、
因此，我目前正在建立一个项目，只有just和完全放弃scss。有一件事我很纠结，就是如果语法出现故障，就没有任何错误报告。
例如，我添加了precss插件，当我拼写变量错误时：
$somevar: #000;
.body{
color:$oopsvar;
}
显然，在SCSS中，它会抛出一个错误，并告诉我$oopsvar不存在。但它只是解析并返回：
.body{
color:$oopsvar;
}
这显然是无效的。我添加了postcss-记录器、postcss，甚至还试图查看手写笔中是否有可能显示错误的规则，但什么也没有。
现在，我不确定这是否只是一个问题的插件，如precss或什么东
浏览 1提问于2016-10-05得票数 1
回答已采纳
我正在试用Tailwindcss到一个新的Angular 11项目。我安装了以下开发包。
NOTE: Removed other packages for simplicity
"@angular-builders/custom-webpack": "^10.0.1",
"@angular-devkit/build-angular": "~0.1100.2",
"@angular/cli": "~11.0.2",
"@angular/compiler-cli": "~11.0
浏览 4提问于2020-11-23得票数 3
1回答
我有一个简单的css，它使用嵌套规则。
.root {
background: var(--color-accent);
padding: 0.8rem 1.5rem;
color: var(--color-white);
text-decoration: none;
&:hover {
background: var(--color-purple);
}
}
我使用postcss-loader在Webpack作为装载机。
{
test: /\.css$/i,
use: ["style-loader", "cs
浏览 5提问于2022-01-24得票数 1
回答已采纳
1回答
我正在尝试在一个webpack项目中使用css容器查询和css模块。此配置如下所示：
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
}
和如下的postcss配置：
const nested = require('postcss-nested');
const var
浏览 2提问于2016-03-11得票数 1
假设您有一个解析@remove等at规则的PostCSS插件，然后将其删除。下面是一个示例程序： const fs = require('fs');
const postcss = require('postcss');
const plugin = func => {
func.postcss = true;
return func;
};
fs.readFile('test.css', (err, css) => {
postcss([
plugin(() => ({
postcssPlu
浏览 17提问于2021-01-04得票数 1
2回答
例如：
.icon-pinterest{
color:#CC2027;
background: #fff;
&:hover{
color:#CC2027;
background: #fff;
}
}
这将产生：
.icon-pinterest {
color: #cc2027;
background: #fff;
}
.icon-pinterest:hover {
color: #cc2027;
background: #fff;
}
但我想这样做：
.icon-pinterest,
.icon-pint
浏览 2提问于2014-07-07得票数 0
回答已采纳
带有postcss插件的错误
这是一个日志，当我尝试一个ng构建-prod，我‘使用角通用只给我这个错误与引导和字体-可怕。
10% building modules 4/6 modules 2 active ...ules/bootstrap/dist/css/bootstrap.cssUnknown error from PostCSS plugin. Your current PostCSS version is 6.0.17, but postcss-merge-rules uses 5.2.18. Perhaps this i 55% building modules 380/383
浏览 0提问于2018-02-09得票数 3
回答已采纳
我正在使用资料UI，并试图将普通的css类转换为js文件。
.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.navItem {
float: left;
flex: 1;
}
.navLink {
color: white;
text-decoration: none;
display: block;
font-size: '1 rem';
font-weight: 500;
li
浏览 0提问于2019-08-29得票数 6
回答已采纳
当.parentElement:hover被触发时，我想修改.childElement的样式。
如下所示：
<style type="text/css">
.parentElement:hover {
.childElement {
display:block;
}
}
</style>
<div class="parentElement">
<div class="childElement"></div>
</div>
有可能吗？
浏览 1提问于2012-04-28得票数 0
回答已采纳
2回答
我在使用SCSS，想知道是否有更好的方法来写这个.
.nav li a:hover, .nav li a:active, .nav li a:visited, .nav li a:focus
如果这样的事有可能的话我会很高兴的..。
.nav li a:hover:active:visited:focus
浏览 4提问于2015-12-30得票数 1
回答已采纳
2回答
我们有一个场景，我们使用postcss嵌套插件来命名整个样式表。
发自：
@font-face {
font-family:my-font;
src:url('data:application/font-woff;base64,d09GR...') format("woff");
}
.label {
font-family: my-font;
font-weight:normal;
visibility:visible;
}
至：
.wrapper {
@font-face {
font-family:my-font;
浏览 9提问于2017-12-10得票数 1
回答已采纳
2回答
我正在使用Sass 3.4.1和BEM，所以我的scss是：
.photo-of-the-day{
&--title{
font-size: 16px;
}
}
我希望每次在.photo-of-the-day上盘旋时，标题都会发生一些事情，这在css中很常见：
.photo-of-the-day:hover .photo-of-the-day--title{
font-size:12px
}
事情是用边界元，这是我唯一找到的方式，看上去有点丑。
.photo-of-the-day{
&--title{
font-s
浏览 5提问于2014-10-10得票数 7
回答已采纳
我可能是一个一年级在这个编码世界，所以请原谅我，如果这个问题的解决方案是显而易见的。
我正在用TailwindCSS创建一个盖茨比网站，并在观看了YouTube视频后将其设置好。在我整个02周工作的开发模式中，一切都很好。
我已经设置了Gatsby项目的内容，PostCSS，和其他标准的图像，头部和清单插件。
我遵循指南，在我的盖茨比项目设置顺风与JIT和Purge。
供参考，这是Tailwind文件
mode: 'jit',
purge: ['./src/**/*.{js,jsx,ts,tsx}'],
darkMode: false, // or
浏览 2提问于2021-08-09得票数 0
我刚开始使用wp-rig v2.0.1，而postCSS似乎无法识别&-嵌套的CSS。我收到一个错误，说.test后面的花括号是意外的。
.wp-block-group {
background:red;
.test {
background: red;
}
}
Wprig附带安装了postcss-preset-env。
浏览 0提问于2020-06-25得票数 0
1回答
tw-imports.css
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js
const { createGlobPatternsForDependencies } = require('@nrwl/angular/tailwind');
const { join } = require('path');
module.exports = {
mode: 'jit',
content: [
join(__dirname,
浏览 12提问于2022-09-13得票数 0
编辑3:不确定这里的外卖是什么--这是包的问题，或者是我试图修复它时正在做的事情。如果有人成功地安装了我的package.json中的依赖项，没有任何问题，我会很感激的。
编辑2:在另一台计算机上安装相同软件包的只会导致两个漏洞，但它们似乎是不可修复的。NPM这次只建议手动检查，而不是npm audit fix --force。不过，svg-sprite-loader似乎仍然是罪魁祸首。
Manual Review
Some vulne
浏览 27提问于2022-05-17得票数 2
回答已采纳
我是个新手，我想知道为什么我的自定义实用程序没有被应用。 // tailwindcss.config.js
const plugin = require("tailwindcss/plugin");
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
浏览 13提问于2021-04-03得票数 1
1回答
有人能帮我翻译一下Tailwind.css中的括号用法吗？
例1：- &_*是什么意思？
在示例2:嵌套括号与_&组合意味着什么？
示例1：
document.documentElement.classList.add('[&_*]:!transition-none')
示例2：
<LightIcon className="hidden h-4 w-4 fill-slate-400 [:not(.dark)[data-theme=system]_&]:block" />
我能得到的最接近的是[]引用了.css的
浏览 8提问于2022-09-09得票数 0
回答已采纳
我发现了一个令人惊叹的资源，你提供一个网站的网址，它会给你一个性能报告，并给出你通过压缩和优化不同的东西可以节省的东西的估计。
它甚至为你做了大部分工作，它优化了我所有的图像，css和javascript文件，显示了当前页面上没有使用的css，它还显示了一个无效的CSS选择器列表，并显示了选择器和它在css文件中所在的行号。
下面是我在导航菜单中使用的一个结果
带有3个子代选择器的ul#menu-navigation li>ul li a标签键和ID与标签过度限定
带有3个子代选择器的ul#menu-navigation li>ul li a:hover标签键和ID与标签过度限定
浏览 1提问于2012-01-14得票数 4
回答已采纳
1回答
我读了指令，为测试编写了一个简单的插件。
module.exports = (opts) => {
return {
postcssPlugin: "testplugin",
Once(root) {
console.log("Hello")
},
};
};
module.exports.postcss = true;
但我不知道怎么才能把它和顺风联系起来。我知道有一个postcss.config.js文件是关于以下内容的
module.exports = {
浏览 5提问于2022-08-24得票数 0
1回答
任何人都知道如何在gatsby css模块中工作。我试过用。
.dog {
composes: dog from "styles/common.scss"
}
我知道这个错误。
您当前的PostCSS版本是5.2.18，但是postcss-嵌套使用6.0.23。也许这就是下面错误的根源。
我尝试过安装，但这似乎无法阻止盖茨比中的上述错误
浏览 1提问于2018-08-27得票数 0
因此，我有以下postcss.config.js const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss("tailwind.config.js"),
process.env.NODE_ENV === '
浏览 109提问于2021-09-03得票数 1
回答已采纳
1回答
所以我遇到了一个CSS片段
.sun-and-moon {
& > :is(.moon, .sun, .sun-beams) {
transform-origin: center center;
}
& > :is(.moon, .sun) {
fill: var(--icon-fill);
@nest .theme-toggle:is(:hover, :focus-visible) > & {
fill: var(--icon-fill-hover);
}
}
& >
浏览 13提问于2022-04-05得票数 0
我使用的是最新的CkEditor 5和postcss-loader的最新版本的webpack 4(不是5)。当我使用postcss-loader 3.0.0时，一切都很好。在将其更新到4.1.0之后，我收到了以下错误消息：
"ValidationError:无效的options对象。已使用与PostCSS架构不匹配的options对象初始化了API。options具有未知的属性‘plugins’。“
我的webpack.config是：
{
stats: {
modules: false
}
浏览 5提问于2020-12-15得票数 0
我正在构建一个nuxt应用程序，并使用scss设置样式。
我已经安装了node-sass和sass-loader &现在可以加载外部scss文件了。这个全局文件正在由自动修复程序处理(例如:如果我执行display: flex，它会自动添加display: -webkit-box; display: -ms-flexbox;)，
我已经将文档中的这些行添加到我的nuxt.config.js文件中，并安装了下面提到的4个pakcage (postcss-url、postcss-nested等)。
postcss: {
plugins: {
浏览 213提问于2019-07-27得票数 3
1回答
使用以下postcss插件：
后-cssnext
后巢式
色后函数
在使用以下颜色函数时，我经常碰到以下错误。
Unable to parse color from string "l(-20%)"
styles.css
@import 'variables.css';
// ^-- contains: --blue: #3892e0;
& a {
color: color(var(--blue), l(-20%));
&:hover {
color: color(var(-
浏览 5提问于2017-02-19得票数 0
回答已采纳
我试图使用Tailwind和React，但我遇到了一个问题。当我使用尾风CSS时没有错误，但是我得到：
./src/index.css (./node_modules/css-loader/dist/cjs.js??ruleSet1.rules1.oneOf5.use1!./node_modules/react-scripts/node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules1.oneOf5.use2!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)中的错误
浏览 6提问于2022-08-22得票数 3
1回答
挣扎着设置花比一段时间。我遵循了他们的教程- 。但是，下拉列表和其他元素不具有互动性。我有一种感觉，由于某种原因，Javascript没有被激活，因为每当我点击像下拉列表这样的元素时，什么都不会发生。我正在使用Vue，如果我尝试使用带有index.html下拉列表的随机导航条，一切都很好。但是，每当我试图在组件中使用它时，它就无法工作。
这是我的tailwind.config.js：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html',
浏览 13提问于2022-09-17得票数 0
回答已采纳
1回答
我想在vue js上使用带有sass的顺风，我在跟踪顺风文档，但仍然得到了这个错误
这是我的去学究，postcss是最新的
"dependencies": {
"autoprefixer": "^10.1.0",
"core-js": "^3.6.5",
"postcss": "^8.2.1",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import"
浏览 3提问于2020-12-19得票数 3
回答已采纳
3回答
我正在用自己的规则集对.button1类进行样式化。此外，我还为:hover伪类使用CSS选择器.button1:hover提供了一个单独的规则集。
但我希望在现有的:hover规则集中定义.button1伪类样式。
目前：
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
所需：
.button1 {
backgr
浏览 0提问于2018-01-31得票数 0
回答已采纳
TL;DR:，如果我有这样一个对象并使用postcss-简单-vars：
default: {
white: '#ffffff'
}
如何在css中使用$white变量？
长版本：
我有两个项目，一个包含我所有的反应性组件，另一个是使用这些组件的应用程序。(注意:下面的代码是一个精简的版本，而不是与此无关的完整代码)我有一个主题导出如下：
const theme = {
...some other stuff, not relevant to this question,
variables: {
colors: {
white: '#
浏览 2提问于2019-11-19得票数 0
回答已采纳
1回答
我正在尝试在我的全新项目中使用Tailwind，每个工具都工作得很好，但是@apply工具甚至不能编译。 以下是错误消息： Syntax Error: SyntaxError
浏览 37提问于2020-04-24得票数 4
回答已采纳
当我运行npm run dev时，它显示了我的TailwindUI组件的正确输出：
但是当我运行npm run prod时，它不再识别所有的颜色。
怎么啦？
这是我的tailwind.config.js的配置
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
浏览 1提问于2021-05-19得票数 0
我正在使用GatsbyJS和TypeScript以及gatsby- plugin -sass插件。我正在尝试为组件导入单独的样式，如下面的示例- import './Card.scss‘。
import React from 'react';
import Colors from '../../constants/Colors';
import './Card.scss'
interface CardProps {
children: any,
padding?: number,
marginBottom?: number,
浏览 9提问于2020-03-26得票数 29
我得到了一个带有Tailwind的create-react-app项目，最初它是按照官方指南安装的PostCSS 7兼容版本安装的：
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
已安装如下：
"autoprefixer": "^9.8.8",
"postcss": "^7.0.39",
"tailwindcss": "npm:@
浏览 25提问于2021-10-14得票数 5
2回答
我正在尝试在我的ava配置中启用动态导入语法。我发现这个主题中的标准配置(和其他配置)在中不起作用。我的项目非常简单
.
├── package.json
├── router
│ └── index.js
├── test
│ ├── order
│ │ └── actions.spec.js
│ └── setup.js
├── utils.js
├── webpack.config.ava.js
├── webpack.config.js
└── yarn.lock
package.json -many库尚未使用，但它是更大项目的一部分，因此稍后我将需要所有依赖项
{
浏览 3提问于2018-08-07得票数 0
1回答
我正在创建一个lexi.l文件，该文件除了一个部分外，都是按预期工作的。我有个规矩：
[\(\*.*\*\)] {}
所以当我在一个文件中遇到(* this is a test *)时，我什么也不做。然而，当我运行lex lexer.l时，我会在带有规则\(、\*和\)的线路上收到警告，说明它们永远不会被满足。所以，我想我的问题是，为什么[\(\*.*\*\)] {}会干扰\(和其他人呢？怎样才能赶上(* this is a test *)？
浏览 3提问于2016-01-27得票数 2
回答已采纳
例如，不是一个插件，而是一个解析器，它不将scss编译成css。我知道有一个，它工作得很好。
我想开始在postcss上使用插件的原因是因为他们说是。
但是我似乎找不到一个用于postcss的插件，它可以将scss编译成css。拜托救救我。
浏览 1提问于2018-02-11得票数 1
回答已采纳
1回答
我有这样的代码：
const formControlStyles = {
root: {
'&:hover .MuiFormLabel-root': {
}
}
}
在主题重写中使用类名访问其他组件安全吗？另外，是否有从其他组件嵌套样式的JSS方法？
浏览 0提问于2020-03-17得票数 6
回答已采纳
这是我的Webpack吐露的scss/css文件。
...
{
test: /\.s?css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 2 } },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: loader =&g
浏览 0提问于2018-05-18得票数 6
回答已采纳
在Linux中，我正在尝试使用Java的Runtime.getRuntime().exec()来执行git clone，解释器是/bin/bash。但是，我在错误流中得到“没有这样的文件或目录”。我搜索了堆栈溢出，发现没有答案可以解决我的问题。下面是我用Test.java编写的程序： import java.io.*;
public class Test {
public static void main(String[] args) throws IOException, InterruptedException {
String version = "10
浏览 92提问于2020-12-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
