Question

id可以是CSS中的父级吗？例如：

<div id="link">
    </a href="www.example.com"></a>
</div>

CSS：

link > a{ 
    /* style goes here*/
}

有可能吗？

Answer 1

是的，这是可能的。

#link >a{
 color:red;
}

#link >a{
  color:red;
}

<div id="link"><a href="www.example.com">LINK</a></div>

Answer 2

您的HTML不正确。您的开始a标记实际上是结束标记。并且您的a元素无法点击。

除此之外，只需在任何有效选择器上使用 "child" operator ：parent > child。

只要选择器parent和child是什么类型（元素，id，类，伪类，伪元素，层次结构等）并不重要它们是有效的。

#parent {
  height:100px;
  background-color:rgba(0,0,255,.2);
  padding:20px;
}

/* This will select all <a> elements that are children of #parent */
#parent > a { 
    background-color:yellow;
    box-shadow:2px 2px 2px rgba(75,75,0,.8);
    padding:5px;
    margin:2px;
    border-radius:20px;
    text-decoration:none;
    display:inline-block;
}

/* This will affect any <a> that is being interactied with */
#parent > a:active { 
    background-color:yellow;
    box-shadow:-2px -2px 2px rgba(100,100,100,.5);
}

<div id="parent">
    <a href="http://www.example.com">Click me</a>
    <a href="http://www.example.com">Click me</a>
    <a href="http://www.example.com">Click me</a>
    <a href="http://www.example.com">Click me</a>    
</div>

父母和孩子在Css

2 个答案: