php子类选择器代码,css子类选择器是什么

本文介绍了CSS中的子类选择器(E> F),该选择器用于选取E元素的所有直接子元素F。通过实例展示了如何使用'>'来指定只对第一代子元素应用样式,例如给`.clothes > li`添加样式只会影响一级子类。文章通过代码演示和浏览器显示效果,帮助读者理解并掌握这一选择器的用法。
摘要由CSDN通过智能技术生成

在css中,类选择器是值“E > F”选择器,用于匹配E元素的所有一级子元素F;子类选择器仅仅指的是父元素的直接后代,大家可以理解为仅作用于第一代子元素,通过“>”进行选择。

7a73782b7700c2e4812fd9efdc76208e.png

本文操作环境:windows10系统、css 3、thinkpad t480电脑。

子类选择器

选定元素下面的子类,用>符号表示。

语法解释

你应该已经注意到了,子选择器使用了大于号(子结合符)。

子结合符两边可以有空白符,这是可选的。因此,以下写法都没有问题:h1 > strong

h1> strong

h1 >strong

h1>strong

如果从右向左读,选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

示例:

  • 衣服
    • T恤
    • 衬衣
    • 短袖
  • 裤子
    • 牛仔裤
    • 休闲裤
    • 七分裤

这是没有任何样式的,我们在浏览器中显示如下:

755af9c7175fad095b813a70bb4a5882.png

这是没有任何样式的,我们在浏览器中显示如下:

$(function () {

$(".clothes>li").css("border","1px solid red");

});

浏览器显示效果如下图所示:

9ce5104bfc27bb390e70b02b9c7527c1.png

我们可以看到只有第一代子类为li(衣服、裤子)的加上了红色边框,而其他的如T恤、牛仔裤等等并没有任何样式。

更多编程相关知识,请访问:编程视频!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值