Web全栈-子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        /*
        div>p{
            color: red;
        }
        */
        /*
        #identity>p{
            color: blue;
        }
        */
        div>ul>li>p{
            color: purple;
        }
    </style>
</head>
<body>
<!--
1.什么是子元素选择器?
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性

格式:
标签名称1>标签名称2{
    属性:值;
}
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
-->
<!--div>ul>li>p-->
<p>我是段落</p>
<div id="identity">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li><p>我是段落</p></li>
    </ul>
</div>
<p>我是段落</p>
</body>
</html>

原文地址:https://www.cnblogs.com/yindanny/p/11669242.html

时间: 2024-10-14 06:19:09

Web全栈-子元素选择器的相关文章

Web全栈-浮动元素的脱标

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动元素的脱标</title> <style> .box1{ float: left; width: 100px; height: 100px; background-color: red; } .box2{ width: 150px; heig

Web全栈-浮动元素贴靠现象、浮动元素字围现象

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动元素高度问题</title> <style> *{ margin: 0; padding: 0; } div{ border: 1px solid #000; } p{ float: left; width: 50px; height: 50

Web全栈-后代选择器和子类选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style> /* div p{ color: red; } */ /* #identity p{ color: red; } */ /* .para p{ color: blue; } */ /* #identit

Web全栈-选择器练习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器练习</title> <style> /*标签选择器 p{ color: red; } */ /*id选择器 #identity1{ color: red; } #identity2{ color: red; } */ /*类选择器 .pa

H5 14-后代选择器和子元素选择器

14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-后代选择器和子元素选择器</title> </head> <body> <!-- 1.后代选择器和子元素选择器之间的区别? 1.1 后代选择器使用空格作为连接符号 子元素选择器使用>作

基于LeanCloud云引擎的Web全栈方案

LeanEngine-Full-Stack The FULL STACK DEVELOPER 复杂的项目, 协作分工, 自动化流程,代码组织结构,框架选择,国际化方案等 Generator 或者Seed LeanCloud Node.js 服务的 Web 全栈开发技术解决方案. 将基础架构, 自动化构建, 国际化方案等底层技术解决方案组织成一个整体. 整套方案Javascript代码全部使用ECMAScript6 Server端运行基于LeanEngine Node.js环境,npm  Expr

《web全栈工程师的自我修养》阅读笔记

在买之前以为这本书是教你怎么去做一个web全栈工程师,以及介绍需要掌握的哪些技术的书,然而看的过程中才发现,是一本方法论的书.读起来的感觉有点像红衣教主的<我的互联网方法论>,以一些自己的经历和感悟来阐述web全栈工程师需要具备哪些素质,而不仅仅是需要哪些技术.这算是我买的书中看的最快的一本书. 在阅读这本书之前,我对全栈工程师的理解还停留在node阶段,随着node在服务端的风生水起,有一段时间会认为使用nodejs作为服务端开发,前后端统一使用js开发,便是所谓的全栈开发,比较流行的技术栈

[ jquery 子元素选择器 总结 ] 总结: 伪类子元素选择器

总结: 伪类中的子元素选择器: 第一种类型: :first-child :last-child :nth-child() :nth-last-child() 第二种类型: :only-child :only-of-type 第三种类型: :first-of-type :nth-last-of-type() :nth-of-type() 特点: 伪类选择器很有特点: 1.位置:可以直接通过伪类选择器直接获取开始 结束 和第几个,通常和目标元素在什么位置上有关,可以从正着数,也可以从倒着数,计数从

Web全栈工程师修养

全栈工程师现在是个很热的话题,如何定义全栈工程师?在著名的问答网站Quora上有人提出了这个问题,其中一个获得了高票的回答是: 全栈工程师是指,一个能处理数据库.服务器.系统工程和客户端的所有工作的工程师.根据项目的不同,客户需要的可能是移动栈.Web栈,或者原生应用栈 深以为然,所以,全栈工程师应该分为Web全栈和App全栈.恰巧最近看了本有关Web全栈工程师的书,记录下其中一些观点. 笔记 应该从能力和思维方式两方面来判定一个人是否是一个合格的全栈工程师. 对于一些经理来说,宁可雇佣多个可管