我希望输出如下:
|top|right|bottom|left|
所以我尝试了{border-right,border-left:1px solid black;}
,但它无效。
所以我尝试{border-right:1px solid black; border-left: 1px solid black}
,但输出是这样的:
|top||right||bottom||left|
问题是不可能像这样结合?:{border-right,border-left:1px solid black;}
答案 0 :(得分:7)
你可以做到
.yourclass {
border-right:1px solid black;
padding: 10px; /*just to make it readable */
}
.yourclass:first-child{
border-left:1px solid black;
}

<span class=yourclass>top</span>
<span class=yourclass>left</span>
<span class=yourclass>bottom</span>
<span class=yourclass>right</span>
&#13;
如果.yourclass
元素不是其父母的唯一子元素,则可以使用:first-of-type
代替(IE9 +)。
答案 1 :(得分:1)
您正在寻找的css选择器是
element+element
例如
.spanCoolBorder{
border-left: 1px solid black;
}
.spanCoolBorder+.spanCoolBorder{
border-left: none;
border-right: 1px solid black;
}
元素+元素将css应用于第二个元素,当它直接放在文档流中第一个元素的大小写之后。
答案 2 :(得分:0)
试试这个:
table{ border-collapse: collapse; }
td{ border-right: 1px solid black; }
td:first-child{ border-left: 1px solid black; }
答案 3 :(得分:0)
你可以通过三种方式实现这一目标:DEMO
https://jsfiddle.net/rcshgqxe/
<html>
<head>
<style>
div{
margin: 0 auto;
width: 50%;
height: 200px;
margin-bottom: 20px;
}
.container1{
border-right: 1px solid red;
border-left: 1px solid red;
}
.container2{
border: 1px solid red;
border-top: 0;
border-bottom: 0;
}
.container3{
border-color: red;
border-style: solid;
border-width: 0px 1px 0px 1px;
}
</style>
</head>
<body>
<div class="container1">
</div>
<div class="container2">
</div>
<div class="container3">
</div>
</body>
</html>