选择仅使用HTML + CSS显示的行/列

Question

有没有办法在元素中选择仅使用HTML + CSS显示的行和/或列？

样品：

HTML：

<div id="long">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>    

<div id="short">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>    

CSS：

div { font-family: courier; }
div div { display: inline-block; }

#long, #short { margin: 1em; }
#long { width: 4em; border: 1px solid red; }
#short { width: 2em; border: 1px solid blue; }

的jsfiddle：

• https://jsfiddle.net/j6gbL0c4/1/

说这个显示如下：

我想将样式应用于显示的列。例如。如果我想在红色矩形中设置第二列的样式，我想选择元素2,5和8.对于第二行蓝色矩形，我想选择元素3和4。

我不知道行/列中元素的数量，这取决于矩形的宽度，这不是常数。

Answer 1

您可以查看nth_child selection in css 对于你想要实现的目标

    <div id="long">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>    

    <div id="short">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>

现在来自#long

的2,5和8

#long div:nth-child(2),#long div:nth-child(5),#long div:nth-child(8)
{
   border: 1px solid black;
}

来自#short

的3和4

#short div:nth-child(3),#short div:nth-child(4)
{
    border: 1px solid black;
}

希望它有所帮助！