<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 后代选择器会把后代里面所有层级的都选择,子代中间有一层不符合的就不会选择*/
/* 后代选择器形式上只能写一层 */
div p{
width: 500px;
outline:2px solid #0000FF;
background-color: #00FF00;
}
div> p{
width: 500px;
outline:2px solid #ff2684;
}
/* 设置p元素下面所有的兄弟节点 */
p~p{
color:red
}
p+h3{
color:blue;background-color: orange;
height: 80px;
}
/* 设置p元素下面紧挨着的兄弟节点 */
p+p{
border-radius: 20px;
}
#t1{
margin-left: 20px;
text-decoration: underline;
padding: 5px;
margin-bottom: 10px;
/* 边框不能被子代继承 */
outline:1px solid #0000FF;

}
</style>
</head>
<body>
<div id='t1' style='background-color: #007000;width: 100px;height: 100px;'>
<div style='background-color: #700d70;width: 50px;height: 50px;'>
div
</div>
DIV
</div>
<div>
<p>div里面的P1
<p style='text-indent: 20px;'>div里面的P1里面的P1
<h3 style='text-indent: 40px;'>div里面的P1里面的P1再里面的h3
<p style='text-indent: 60px;'>div里面的P1里面的P1再里面的h3再里面的P</p>
</h3>
</p>
</p>
<p>div里面的P2
<p style='text-indent: 20px;'>div里面的P2里面的P1</p>
</p>
<p>
div里面的P3
</p>
<h3>hhhhhhhhhhhhhhhhhhhhhhhhh</h3>
<h3>HHHHHHHHHHHHHHHHHHHHHHHHH</h3>
<p>
div里面的P4
</p>
</div>
</body>
</html>

【相邻父元素选择器】为啥p元素里面的h3也被选择了呢？求赐教的更多相关文章

  1. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  2. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  3. css伪元素选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. jquery 元素选择器

    id选择器 JQuery 能使用CSS选择器来操作网页中的标签元素.如果想要通过一个id号去查找另一个元素就可以使用下面格式的选择 $('#my_id') 其中my_id表示根据id选择器获取页面中的 ...

  5. CSS3之伪元素选择器和伪类选择器

    伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...

  6. 伪元素选择器，选择器优先级，CSS修改文字属性，CSS修改字体属性，CSS修改其他属性

    伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...

  7. 02_Jquery_02_元素选择器

    [简述] 元素选择器就是通过元素名来查询元素 $("elementName")这里就可以通过元素名来获取jquery元素了. 但与id选择器不同的是,名称相同的元素有很多,所以获取 ...

  8. CSS中伪类选择器及伪元素

    1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:vis ...

  9. jQuery选择器之元素选择器

    元素选择器:根据给定(html)标记名称选择所有的元素. 描述: $('element') 搜索指定元素标签名的所有节点,这是一个合集的操作.同样的也有原生方法getElementsByTagName ...

  10. 如何使用CSS3中的结构伪类选择器和伪元素选择器

    结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果. 结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素. E:last-child 匹配E元素的最后一 ...

随机推荐

  1. navicat图形工具和pymysql模块的使用

    一 Navicat 在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时,可以使用可视化工具Navicat,以图形界面的形式操作MySQL数据库 官网下载:http ...

  2. AI大模型学习了解

    # 百度文心 上线时间:2019年3月 官方介绍:https://wenxin.baidu.com/ 发布地点: 参考资料: 2600亿!全球最大中文单体模型鹏城-百度·文心发布 # 华为盘古 上线时 ...

  3. centos6.5升级python3.6并安装boto3模块

    1.先升级openssl yum安装各种依赖,yum install gcc gcc-c++ autoconf automake zlib zlib-devel pcre-devel tar zxvf ...

  4. es 部署 进程、文件数 配置

    1.  /etc/security/limits.conf elasticsearch soft nofile 65536 elasticsearch hard nofile 65536 elasti ...

  5. Django Rest Frame work 如何使用serializers序列化

    Django Rest Frame work 如何使用serializers序列化       Django Rest Framework提供了serializers模块,用于序列化和反序列化模型实例 ...

  6. 高德地图poi关键字搜索-vue+ant-design

    最近有个需求,需要输入上车点,下车点,然后输入上车点的时候还要在下方显示地图附近的车辆.百度了一波之后,完全莫得头绪,很多代码也都用不了,即便改了之后也不怎么生效.我用的是jeecg-boot.最后静 ...

  7. Linux profile、bashrc、bash_profile

    一.profile 文件 1.profile 文件的作用 profile(/etc/profile),用于设置系统级的环境变量和启动程序,在这个文件下配置会对所有用户生效.当用户登录(login)时, ...

  8. M1处理器的电脑xcode模拟器编译报错问题详解及解决方案

    在M1芯片的苹果电脑中使用Xcode编译模拟器时,可能会碰到如下报错: 原因是由于M1模拟器架构是arm64架构,而Intel芯片是x86_64的架构,从而导致编译出现了问题. 这些报错,都是是由于项 ...

  9. 01.BeanFactory实现

    /** beanFactory 不会做的事:* 1.不会主动调用BeanFactory 后处理器* 2.不会主动添加Bean后处理器* 3.不会主动初始化单例(懒加载)* 4.不会解析beanFact ...

  10. C#封装以及访问修饰符

    封装 被定义为"把一个或多个项目封闭在一个物理的或者逻辑的包中".在面向对象程序设计方法论中,封装是为了防止对实现细节的访问. 抽象和封装是面向对象程序设计的相关特性.抽象允许相关 ...