Question

我无法处理这种情况：

 <div class="list">
    <div class="bar">
       <header></header>
       <div class="content"></div>
    </div>
    <div class="item">
       <header></header>
       <div class="content"></div>  //select this
    </div>
    <div class="item">
       <header></header>
       <div class="content"></div>
    </div>
 </div>

CSS

.list > .item:first-child .content {
   border-color: red;
}

我尝试了许多解决方案：

.list > .item:nth-of-type(1) .content { border-color: red; }
.list > div.item:first-child .content { border-color: red; }
.list .item:first-child .content { border-color: red; }

但没有任何结果。

Answer 1

快速注释。。:nth-of-type选择器现在仅选择标签。

#include <iostream> #include <pybind11/embed.h> #include <pybind11/numpy.h> #include <pybind11/stl.h> // mandatory for myPyObject.cast<std::vector<T>>() #include <pybind11/functional.h> // mandatory for py::cast( std::function ) namespace py = pybind11; int main() { try { py::scoped_interpreter guard{}; py::module np = py::module::import("numpy"); py::object random = np.attr("random"); py::module scipy = py::module::import("scipy.optimize"); // create some data for fitting std::vector<double> xValues(11, 0); std::vector<double> yValues(11, 0); for (int i = -5; i < 6; ++i) { xValues[i + 5] = i; yValues[i + 5] = i*i; } // cast it to numpy arrays py::array_t<double> pyXValues = py::cast(xValues); py::array_t<double> pyYValues = py::cast(yValues); // add some noise to the yValues using numpy -> Works! py::array_t<double> pyYValuesNoise = np.attr("add")(pyYValues, random.attr("randn")(11)); // create a function f_a(x) = a*x^2 std::function<std::vector<double>(std::vector<double>, double)> squared = [](std::vector<double> x, double a) { std::vector<double> retvals(x); std::transform(x.begin(), x.end(), retvals.begin(), [a](double val) { return a*val*val; }); return retvals; }; // cast it to a python function py::function pySquared = py::cast(squared); // get scipy.optimize.curve_fit py::function curve_fit = scipy.attr("curve_fit"); // call curve_fit -> throws exception /* py::object = */ curve_fit(pySquared, pyXValues, pyYValues); } catch (std::exception error) { std::cout << error.what() << std::endl; } system("pause"); return 0; } CSS伪类根据它们在一组同级兄弟中的位置来匹配给定类型的元素。

如果我理解正确，那么您正在寻找：

:nth-of-type()

.list > div:nth-of-type(2) .content {
  border: 1px solid;
  border-color: red;
}

换句话说，您需要设置<div class="list"> <div class="bar"> <header>Head</header> <div class="content"> Content 1 </div> </div> <div class="item"> <header>Head</header> <div class="content"> Content 2 </div> </div> <div class="item"> <header>Head</header> <div class="content"> Content 3 </div> </div> </div>和border-width以确保显示边框。

HTML / CSS在第一个DIV中指定边框颜色

1 个答案: