选择仅使用 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>

现在 2,5 和 8 来自 #long

#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;
}

希望对你有帮助！