CSS 第一个 child

标签 css css-selectors

“使用 h1、h2、h3、h4、h5 和 h6 中任何一个的第一个子后代元素设置任何内容 id 标签元素,如下所示:”

我创建的选择器如下所示:

#content:first-child h1,
#content:first-child h2, 
#content:first-child h3, 
#content:first-child h4, 
#content:first-child h5, 
#content:first-child h6 {}

这是正确的吗?如果可以,可以进一步简化吗?

感谢大家的帮助!

最佳答案

描述有点不清楚,但是,据我所知,你想要要么

  • 选择那些 h* 元素,然后样式如下:

    #content h1:first-child,
    #content h2:first-child, 
    #content h3:first-child, 
    #content h4:first-child, 
    #content h5:first-child, 
    #content h6:first-child {}
    

Example

  • 选择 #container 元素本身,以防它的第一个子元素是 h* 家族之一。然后你不能用纯 CSS 实现这个,需要添加一个简单的 JS,比如(在这种情况下使用 jQuery):

    $('#content').has('h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child');
    

Example

关于CSS 第一个 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6645732/

相关文章:

python - Selenium 蟒 : find_element_by_css_selector() using :contains()

CSS Cascade 帮助 - 需要子级覆盖父级

css - nth-last-child 选择器不准确

css - 标签的 CSS 选择器之前的句号

html - 第二个 flex 元素的元素也应该并排排列

php - Page.php 不显示 wordpress 中的更改

html - 如何删除选择框/复选框的默认状态?

javascript - 单击动态列表创建的元素并显示动态内容

CSS3 :target issue

html - Css 背景颜色不起作用