3回答
这是一个有点老生常谈的问题，但也许值得一问。在CSS中，伪类和伪选择器有机械上的区别吗？我们在这里互换使用这个术语，但似乎这两个术语是有原因的。区分这两者有什么用吗？
浏览 0提问于2010-06-24得票数 7
回答已采纳
这可能是一个愚蠢的问题，但我还没有找到这两个CSS定义之间是否存在差异：
div:hover.item {}
div.item:hover {}
或者..。他们俩的行为是一样的吗？
浏览 4提问于2011-02-23得票数 2
回答已采纳
2回答
我知道这是个愚蠢的问题。
我一直在想，在以下几个方面有什么区别：
.test a {}
or
.test a:link {}
我做了几次测试，看上去都一样。
什么变化？
浏览 3提问于2015-09-20得票数 0
回答已采纳
我有以下CSS：
div.section:not(div.cover) > div { ... }
验证者说：
Parse Error [div.cover) > div]
为什么它不验证(在浏览器中也不起作用)？在伪类之后是不允许的，或者问题是什么？
浏览 2提问于2015-11-06得票数 2
回答已采纳
我学会了如何基于计算css的特异性，但是基于这个参考，我不明白伪类( c)和伪元素(从d)之间的区别是什么？
例如,
input[type="text"]:hover
悬停是伪类( c)还是伪元素( d)？
与input[type="text"].error相比，哪一种具有更高的特异性？
浏览 0提问于2014-09-03得票数 0
回答已采纳
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
回答已采纳
1回答
我在CSS中看到过这样一行代码：
[icon]:not([focused]):not([pressed]):not([disabled]){ background-position-y:-0px; }
本例中的多个冒号是什么意思？它们仍然是伪选择器吗？
浏览 1提问于2012-11-18得票数 2
回答已采纳
2回答
我读过关于css技巧的文章:not不应该添加额外的特性。但看起来是这样吗？
非伪类的特殊性是其论证的特殊性。不()伪类不会增加选择器的特性，不像其他伪类.。
还是我漏掉了什么？
.red:not(.blue) {
background: blue;
}
.red {
height: 100px;
width: 100px;
background: red;
}
<div class="red">
</div>
浏览 4提问于2016-01-27得票数 28
回答已采纳
2回答
我想使用:after on :target元素来选择css中的元素。我试过这个代码，但它不起作用。
.myclass a:target:after{}
我该怎么做呢？
浏览 0提问于2013-07-04得票数 3
我一直在尝试使用Bootstrap的表单样式来处理AngularJS的电子邮件验证，我遇到了这个CSS块。
input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
color: #b94a48;
border-color: #ee5f5b;
}
input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:
浏览 0提问于2013-06-30得票数 3
回答已采纳
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
回答已采纳
1回答
我一直在使用:not()伪类对事物进行样式化，而不需要用第二个不必要的声明来覆盖它来撤销第一个声明，但现在我遇到了一种奇怪的行为，即Safari在:not()中接受后代选择器，但Chrome不接受。
我用了像a:not(.blue a)这样的东西。
我寻找答案，但我仍然不完全理解原因。
后代选择器真的被规范所允许吗？
下面是一个演示：
a:not(.blue a) {
color: red;
}
<div><a>this one should be in red</a></div>
<div class="blue"&g
浏览 2提问于2016-05-18得票数 1
回答已采纳
我正在寻找一种选择具有类galleryBlock的元素的所有伪元素的方法，以及一种选择具有特定id的元素的所有伪元素的方法。
我的代码是这样设置的:一个由多个框组成的网格--全部是联锁的，有些跨越多个列，有些跨越多个行。
这些框中的每一个都有类galleryBlock，以及第二类--第二类取决于盒子比率，因为这些二等的伪元素被用来给盒子一个特定的比率。
例如，.square有一个由:after定义的伪元素，用于给方格一个平方比，等等。
当我在任何.galleryBlock上徘徊时，我希望能够将它的不透明度转换为0.5。我也希望能够单独设置每个伪元素的颜色--每个伪元素的不同颜色。
下
浏览 2提问于2015-04-07得票数 1
回答已采纳
1回答
这个+类选择器
、、
我目前使用的是更少的CSS而不是CSS，我想知道是否有一种方法可以获得当前的选择器+类。有一种方法可以用伪类来实现，但据我所知，不是用类。
Psuedo-级：
li {
a {
&:hover {
}
}
}
&:hover基本上得到了li a:hover。我想知道的是，我将如何在一堂课上做到这一点。例如，如果我想获得ul li.active，我必须使用以下内容：
ul {
li {
}
li.active {
}
}
我希望能找到更接近第一段代码的内容，但在上看不到任何东西。有这样的东西我刚
浏览 4提问于2014-05-03得票数 0
回答已采纳
在css文件中，最后定义的样式优先于先前定义的样式。
但是，当使用not selector时，优先级会被打破，而带有not selector的类即使位于文件的顶部，也会获得优先权。
优先级中断背后的逻辑是什么？
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.red-with-not:no
浏览 6提问于2015-12-28得票数 6
回答已采纳
2回答
我正在对一个CSS元素进行样式化，我想知道是否可以在一个CSS元素上使用多个:selectors。
例如：
p:hover:after {
content: "Hello!";
}
因为，当我希望p被悬停时，我希望:after选择器也被调用。
浏览 3提问于2013-11-13得票数 4
回答已采纳
3回答
在我的应用中，提交按钮和链接看起来是一样的。
我构建css的方式是这样的：
.button, input[type=submit]{
//default colour
background:grey;
}
.button-primary{
background:green;
}
.button-danger{
background:red;
}
如果我想在提交按钮上显示红色背景，我希望能够简单地将.button-danger类添加到提交按钮中。但不幸的是，这什么也不做，提交仍然是灰色的，因为input[type=submit]比.button-danger更
浏览 9提问于2014-04-04得票数 1
我有一个联系人列表，它是作为一个无序列表生成的，其中为每个列表项分配了HTML5 data属性。data属性值是用于字母排序的单个字母。我无法控制生成的标记，但是我需要在每个字母的第一个条目之前插入一个节标题。我希望用:before伪元素来实现这一点。没什么不寻常的。我选择的CSS选择器有很大的自由度，因为这个项目只支持IE9+。
示例标记：
<ul>
<li data-name="a"> ... </li>
<li data-name="a"> ... </li>
<li
浏览 4提问于2013-09-25得票数 4
回答已采纳
2回答
我有过
.table_header:nth-of-type(5) {display: none;}
但是，当我将鼠标悬停在页面上的.table_header上时，会显示"nth-of-type(5)“。我需要做什么才能让它即使我悬停也不会。提前谢谢。
浏览 0提问于2014-03-28得票数 0
3回答
我知道，使用纯CSS，不可能选择元素的先前兄弟姐妹。但我试图用复杂的选择器愚弄浏览器。
请看这个。它包含了几个CSS规则，除了其中的两个规则外，这些规则都很好地工作：
//set border color to white for all elements before .selected and .selected itself
div:not(.selected ~ div) {
border-color: #fff;
}
//set border color to green for the element previous to .selected
div:not(.sele
浏览 8提问于2014-12-29得票数 0
回答已采纳
我正在编写一条嵌套较少的规则，目前如下所示：
.content {
margin-bottom: 30px;
&:last-child {
margin-bottom: 0;
}
}
但是我想用一个非选择器来做这件事，并且不需要两次定义边距。我不想在最后一个孩子选择器里重置。
我想做的是这样的：
.content {
&:not(:last-child) {
margin-bottom: 30px;
}
}
由此产生的CSS：
.content:not(:last-child) {
margin-
浏览 5提问于2013-12-17得票数 5
回答已采纳
目前，我正在尝试使用material UI样式prop对象来应用伪选择器。样式当前与方法一起应用，但排除了伪元素。
styles.jsx--
const SBoxMain = {
display:"inline-block",
margin:"0px 5px",
hover: {backgroundColor: "yellow"}
}
Component.jsx--
<Box style={SBoxMain} id="Other" onClick={e => filterType("Ot
浏览 15提问于2020-02-25得票数 1
1回答
我正在尝试的是:不是伪类选择器，我希望页面上的所有内容都是蓝色的，除了class="pag“的div的子类以外，所以我写道：
:not(.pag > p){
color:blue;
}
<div class="pag">
<p>First</p>
<p>Second</p>
<p>Thirt</p>
<art
浏览 2提问于2014-05-18得票数 1
回答已采纳
我想知道是否有可能在彼此中“嵌入”伪类。我有一种预感，你不能，但我只是想确保我不只是语法错误。
下面是我想要做的一个例子：
p.description { margin-bottom: 20px; }
考虑到这种风格，如果您只希望在不是最后一个p.description的比赛中发生这种情况，有没有什么方法可以这样做呢？
p.description:not(p.description:last-child)
当然，我有两种风格，如下所示：
p.description { margin-bottom: 20px; }
p.description:last-child { margin-bottom
浏览 3提问于2011-04-20得票数 3
回答已采纳
1回答
只是好奇这是vue的预期行为，还是可能有一些我没有看到的潜在的CSS逻辑？
当使用类选择器设置默认的“right”属性时，以下Vue转换工作
.theBoxClass { right: 100px;}
但在使用css ID选择器进行设置时却不是这样
#theBoxId { right: 100px;}
CodePen
码
<div id="background"></div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<
浏览 3提问于2020-05-23得票数 1
回答已采纳
我感兴趣的是当文本块不是“ ;”(空空间)时显示它，否则就隐藏它。我只想使用CSS 。守则是：
<div>Some text here</div>
<div> </div>
<div>Another text here</div>
删除“;”不是变体。(如果您想建议我使用：空)
请注意，div是全局的，也可能是随机放置的，这就是为什么我在寻找隐藏只有一个字符的div的答案。(或其任何其他变体)。
为了说明这一点，我不能更改html，它正在从数据库中加载数据，因此我需要使用CSS文件来隐藏div内容/标记。
浏览 1提问于2014-09-18得票数 9
2回答
我在这里看过类似的问题，但我还没有找到一个与我的案例相关的问题。
如果我没看错这篇文章：
那么所发生的一切对我来说是没有意义的。有没有人能解释一下，这是由于地域、遗传还是特异性？我已经去掉了所有不相关的css。
CSS
a:link {font-size:0.875em;color:#005984}
.button {color:#fff}
HTML
<a class="button">Awesome call to action</a>
我最终得到了一个蓝色文本的按钮，而不是白色的。现在，a是一个元素，所以它的特异性应该比.button类低，不是吗？
浏览 3提问于2012-06-12得票数 4
回答已采纳
我希望使用CSS :not()来针对前面的选择器。这个是可能的吗？
示例：
a.button:before {
content: "Show Text";
}
a.button:not(:before) {
display: none;
}
<a href="#" class="button">Hide Text</a>
浏览 3提问于2015-11-16得票数 16
回答已采纳
我希望选择所有元素，除了在DOM元素中输入text和类“my”之外。
所以，我有这样的CSS选择器
.my-class *:not(input[type="text"]) {
// Some CSS poperties here
}
这不对吗？这似乎不管用！
浏览 3提问于2016-08-05得票数 2
回答已采纳
我正在读一篇文章，网址是
当您查看第17节的演示时，您会看到这个选择器：
input[type=radio]:checked + label {
color: blue;
}
第17节介绍了伪类选择器，但是这个选择器对我来说就像是一个相邻的选择器。你会叫它什么？
浏览 4提问于2017-03-02得票数 0
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
回答已采纳
我创建了一个响应性的css表，如果我单击一个<tr>，就会得到隐藏行中的输出。当然，当我将窗口调整为电话显示大小时，:before选择器将显示该行的内容，这是我不希望发生的。让我给你看看密码。
$(function(){
$('.record td').on('click', function(){
$(this).parent('.record').next('.companion').toggle();
var msgid = $(this).parent('.record'
浏览 1提问于2016-09-26得票数 0
1回答
selectors-list ::=
selector[:pseudo-class] [::pseudo-element]
[, selectors-list]
properties-list ::=
[property : value] [; properties-list] 我正在尝试熟悉CSS，我很乐意了解阅读这些内容的规则(来自https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)。
浏览 26提问于2020-03-22得票数 1
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
回答已采纳
1回答
我正在写一个混合在更少，增加一个播放按钮到视频标签。看起来是这样的：
.playVideoButton(@size: 64px) {
&:before {
content: "";
width: @size;
height: @size;
top: 50%;
left: 50%;
display: none;
position: absolute;
.transform(translate(-50%, -50%));
.border-radius(50%);
border: 2px so
浏览 10提问于2016-11-17得票数 2
回答已采纳
1回答
我想让2个不同风格的按钮在一个css。因此，在创建第二个按钮时，我使用以下命令向其添加类：
close.getStyleClass().add("close-button");
所以现在我可以通过以下方式在css中引用这个按钮：
.button.close-button
但是现在我不知道在使用.close-button类时如何引用按钮的伪类。
我尝试通过以下方式访问它
.button.close-button:selected
或
.button:selected.close-button
这些似乎都不起作用。有没有办法做到这一点？或者，我是否必须为.close-button类
浏览 42提问于2017-08-31得票数 0
回答已采纳
我认为这是一个简单的使用:not()伪类，但在大多数浏览器中似乎不起作用，所以我为此做了一个。
.YYY:not(.ZZZ .YYY) {}
更新的
需要css规则下的解决方案
.YYY:not(.AAA + .YYY) {}
浏览 8提问于2016-09-15得票数 1
我相信解决方案会很容易，但是我对CSS还不熟悉，我有以下代码：
div.main_table td span .red_text
{
border-left: 10px solid;
border-left-color: #e22850 !important;
}
<div class="main_table">
<table>
<tbody>
<tr>
<td>
<div class="caption">Slot 1</div>
浏览 3提问于2022-03-28得票数 0
我正在实现以下CSS选择器
选择所有span 元素，但包含单词图标的类除外
因此，以下几点似乎正在发挥作用：
.music-site-refresh span:not([class*="icon-"]) {
font-family:Montserrat, sans-serif;
}
但我觉得应该是这样：
.music-site-refresh span:not(span[class*="icon-"]) {
font-family:Montserrat, sans-serif;
}
但第二个在我的实验床上行不通。
有人能解释一下哪一个是正确的吗?为什么？
浏览 1提问于2015-09-11得票数 2
回答已采纳
我的问题是：
<div class="div1">
<textarea class="area1"> </textarea>
</div>
<div class="div1">
<textarea class="area1"> </textarea>
</div>
<div class="div1">
<textarea class="area1"> &l
浏览 0提问于2016-02-11得票数 0
回答已采纳
在中看到了这段CSS (来自)，无法理解它应该做什么。显然，第一个选择器对所有内容都应用了框大小样式，但我不理解在本例中如何使用::before/::after。我知道这些被用来在给定元素之前或之后添加内容，但是它在这里有什么用途呢？
*,
*::before,
*::after {
box-sizing: border-box;
}
浏览 2提问于2014-12-08得票数 1
回答已采纳
对不起，我在发帖前已经找过答案了。但我找不到我要找的东西。
我正在尝试使用jQuery UI的tag-it小部件。我尝试将.tagit()方法应用于一个元素，如下所示：
jQuery("#myTags:.5aedf589").tagit();
我尝试对其应用tagit()方法的页面上的实际元素如下：
<ul id="myTags:.5aedf589">
这应该是一个合法的id名称，但以防万一我也尝试使用"#myTags"，但也有同样的问题。
我使用jQuery而不是$别名，因为我的脚本同时包含Prototype和jQuery。首先加载
浏览 1提问于2012-09-25得票数 0
回答已采纳
我有一个很长的表格，有很多字段。一些字段从单独的DIV获取数据，其中还有其他更具体的字段。
每个字段以及它的标签都包含在一个单独的块中。为了突出显示字段，他们的类有一个CSS :hover。
字段块上的CSS :hover运行良好，onmouseover和onmouseout在传递数据给它们的许多DIV上也使用以下Javascript：
function LineOn(whichOne) {
document.getElementById(whichOne).style.backgroundColor = '#cf0';
}
function LineOff(whic
浏览 2提问于2015-03-22得票数 0
回答已采纳
我的头中有两个来自类"menu_top“的链接，因此：
<a class="menu_top" href="adverteerders.html" >adverteerders</a>
<a class="menu_top" href="ondernemers.html" >ondernemers</a>
对应的css代码为：
.menu_top {
font-size: 14px;
}
.menu_top:link {color: #404040;}
.men
浏览 0提问于2013-03-16得票数 0
3回答
我在css中使用了一些类似这样的东西
input[type=radio]:checked + label { color:#121212 }
问题是checked属性在Internet-Explorer-8和7中不起作用。
ifI的用法如下
input[type=radio] + label { color:$888888 }
它工作正常
请告诉我这个的替代方案。
浏览 1提问于2012-06-07得票数 0
回答已采纳
在没有和的情况下，如何将包含<span class="foo">元素的<li>元素作为目标呢？
<ul>
<li><span class="bar">John</span></li>
<li><span class="bar">Paul</span></li>
<li><span class="foo">George</span></l
浏览 2提问于2016-08-10得票数 5
回答已采纳
这是我正在查看的整行代码，其上下文如下：
input[type="radio"] + span::before { content: ""; display: inline-block; width: 20px; height: 20px; background: url("sprite.png") no-repeat -20px 0; vertical-align: middle; }
我对它的工作原理有一个很好的理解，但是我不明白为什么在span和之前之间有两个冒号，而不是一个冒号。
在前面的选择器中，我读到的内容应该使用一个冒号。
在w3
浏览 0提问于2012-11-15得票数 32
回答已采纳
3回答
我想问为什么在custom.css中需要使用!important来覆盖bootstrap.css中的一些样式
例如：输入、按钮、导航栏等。。
例如， :
.navbar{
background :#52B3D9;
border-radius:0px !important;
border-top:4px solid #1E8BC3 !important;}
不使用bootstrap.css就可以覆盖!important?。
浏览 1提问于2014-12-22得票数 0
3回答
嗨，我有这个点击功能，以显示一个:之前，因为某些原因，它不会显示它？这是我的代码，谢谢！此外，.cart-toggle:before类是display:none；所以它可以显示。
$( ".cart-toggle" ).click(function() {
$( ".cart-toggle:before" ).show( "slow", function() {
// Animation complete.
});
});
谢谢！
浏览 2提问于2014-05-01得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
