Html :not()选择器不工作
我有一个有标签的布局,里面有一个手风琴,里面还有一组标签。在每个内部选项卡中,我希望有一组复选框。当我把它们放进去并设置样式时,它们与外部选项卡的CSS之间存在冲突。因此,我使用了not选择器,以便选项卡的输入样式不会应用于复选框,但它尚未应用 下面是一个代码笔,显示了问题:Html :not()选择器不工作,html,css,less,Html,Css,Less,我有一个有标签的布局,里面有一个手风琴,里面还有一组标签。在每个内部选项卡中,我希望有一组复选框。当我把它们放进去并设置样式时,它们与外部选项卡的CSS之间存在冲突。因此,我使用了not选择器,以便选项卡的输入样式不会应用于复选框,但它尚未应用 下面是一个代码笔,显示了问题: .wrap选项卡{ 部分{ 显示:无; 填充:20px0; 边框顶部:1px实心#ddd; } 输入:非(.squaredFour){ 显示:无; } 标签:非(.squaredFour){ 显示:内联块; 利润率:0-
.wrap选项卡{
部分{
显示:无;
填充:20px0;
边框顶部:1px实心#ddd;
}
输入:非(.squaredFour){
显示:无;
}
标签:非(.squaredFour){
显示:内联块;
利润率:0-1px;
填充:15px 25px;
字号:600;
文本对齐:居中;
颜色:#bbb;
边框:1px实心透明;
}
标签:悬停:非(.squaredFour){
颜色:#888;
光标:指针;
}
输入:选中+标签:非(.squaredFour){
颜色:#555;
边框:1px实心#ddd;
边框顶部:2件纯色橙色;
边框底部:1px实心#fff;
}
#表1:选中~#内容1,
#表2:选中~#内容2,
#表3:选中~#内容3,
#表4:选中~#内容4{
显示:块;
}
}
.访问权限{
填充:10px;
}
.访问权限.选项卡内容{
填充:10px;
}
.访问权限。面板标题a:后{
字体系列:“字形图标半身人”;
内容:“\2212”;
浮动:左;
颜色:#fff;
字体大小:16px;
线高:16px;
右边距:8px
}
.访问权限.面板标题a.折叠:之后{
内容:“\2b”;
}
.访问权限.面板组.面板+.面板{
页边顶部:1px;
}
.访问权限.面板组.面板{
边界半径:0;
}
.访问权限.面板{
边界:0无;
}
.access privilages.panel group.panel heading+.panel collapse>.panel body{
边界顶部:0无;
}
.访问权限.面板{
-webkit盒阴影:0px 0px rgba(0,0,0,05);
盒影:0px0pxrgba(0,0,0,05);
}
.access privilages.panel default>.panel heading{
颜色:#fff;
边界半径:0;
背景色:@深浅;
}
.nav选项卡>li.active>a,
.nav选项卡>li.active>a:悬停,
.nav选项卡>li.active>a:焦点{
颜色:@primary;
}
四平方英尺{
位置:相对位置;
标签{
宽度:20px;
高度:20px;
光标:指针;
位置:绝对位置;
排名:0;
左:0;
背景#fcfff4;
背景:-webkit线性梯度(顶部,#fcfff4 0%,#dfe5d7 40%,#B3 100%);
背景:线性梯度(至底部,#fcfff4 0%,#dfe5d7 40%,#B3 100%);
边界半径:4px;
盒影:嵌入0px 1px 1px白色,0px 1px 3px rgba(0,0,0,0.5);
}
标签:后{
内容:'';
宽度:9px;
高度:5px;
位置:绝对位置;
顶部:4px;
左:4px;
边框:3px实心#333;
边界顶部:无;
边界权:无;
背景:透明;
不透明度:0;
-webkit变换:旋转(-45度);
变换:旋转(-45度);
}
标签:hover::after{
不透明度:0.5;
}
输入[类型=复选框]{
可见性:隐藏;
}
输入[类型=复选框]:选中+标签:之后{
不透明度:1;
}
}
门户设置
-
星期一
星期二
-
星期一
星期二
收集规则
全局设置
帐户设置
这是因为:not
与它所使用的元素相关。您的标签
没有.squaredFour
类,但它的父(div
)有。您应该将类添加到标签中或更改
label:not(.squaredFour)
到
它将应用于每个标签
,它不是类为的元素的后代(任何级别)。squaredFour
您的。squaredFour
类应用于div
而不是标签
上,即没有标签
或输入
.squaredFour
类。有两种方法可以解决这个问题
将.squaredFour
添加到输入
和标签
,您不想在其上冲突css
规则
或者,如果您不想添加类,则更改:而不是的css,如snippet中所示
输入:非(.squaredFour>标签){
显示:无;
}
标签:非(.squaredFour>标签){
显示:内联块;
利润率:0-1px;
填充:15px 25px;
字号:600;
文本对齐:居中;
颜色:#bbb;
边框:1px实心透明;
}
sooo,选择器是:不工作?哈哈。。。很抱歉糟糕的笑话。
*:not(.squaredFour) label