css权重优先级是如何计算的 - css父元素



在一个元素上使用两个CSS类 (6)

我在这里做错了什么?

我有一个.social div ,但是第一个我想在顶部填充零填充,而第二个填充我不需要底部边框。

我试图为这个第一个和最后一个创建类,但我认为我错了某处:

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border-bottom: dotted 1px #6d6d6d;
}

.social .first{padding-top:0;}

.social .last{border:0;}

和HTML

<div class="social" class="first">
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

我猜这是不可能有两个不同的类? 如果是这样,我该怎么做?


你可以用不同的方式来表达,例如你可以把焦点或其他任何东西放在焦点上......

input[type="text"] {
   border: 1px solid grey;
   width: 40%;
   height: 30px;
   border-radius: 0;
}
input[type="text"]:focus {
   border: 1px solid 5acdff;
}

你可以试试这个:

HTML

<div class="social">
    <div class="socialIcon"><img src="images/facebook.png" alt="Facebook" /></div>
    <div class="socialText">Find me on Facebook</div>
</div>

CSS代码

.social {
  width:330px;
  height:75px;
  float:right;
  text-align:left;
  padding:10px 0;
  border-bottom:dotted 1px #6d6d6d;
}
.social .socialIcon{
  padding-top:0;
}
.social .socialText{
  border:0;
}

要在同一元素中添加多个类,可以使用以下格式:

<div class="class1 class2 class3"></div>

DEMO


如果你只有两件物品,你可以这样做:

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border: none;
}

.social:first-child { 
    padding-top:0;
    border-bottom: dotted 1px #6d6d6d;
}


如果您只想将样式应用于作为其父母的第一个孩子的元素,是否更好地使用:first-child伪类

.social:first-child{
    border-bottom: dotted 1px #6d6d6d;
    padding-top: 0;
}
.social{
    border: 0;
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
}

然后,规则.social包含常用样式和最后一个元素的样式。

.social:first-child用第一个元素的样式来压倒他们。

您也可以使用:last-child选择器,但是:first-child老一代浏览器更支持:first-child :请参阅https://developer.mozilla.org/en-US/docs/CSS/:first-child#Browser_compatibilityhttps://developer.mozilla.org/es/docs/CSS/:last-child#Browser_compatibility


我知道这篇文章已经过时了,但这是他们所问的。 在你的样式表中:

.social {
    width: 330px;
    height: 75px;
    float: right;
    text-align: left;
    padding: 10px 0;
    border-bottom: dotted 1px #6d6d6d;
}
[class~="first"] {
    padding-top:0;
}
[class~="last"] {
    border:0;
}

但是,使用选择器可能是一种不好的方法。 另外,如果您需要多个“第一”扩展名,则必须确保设置不同的名称,或者优化选择器。

[class="social first"] {...}

我希望这会帮助某人,在某些情况下它可以非常方便。

例如,如果你有一小部分的css必须链接到许多不同的组件,并且你不想写一百次相同的代码。

div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}

div.myClass1.red {color:red;}
div.myClass2.red {color:red;}
...
div.myClassN.red {color:red;}

变为:

div.myClass1 {font-weight:bold;}
div.myClass2 {font-style:italic;}
...
div.myClassN {text-shadow:silver 1px 1px 1px;}

[class~=red] {color:red;}




class