<!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. IDEA中引入smarttomcat后控制台输出乱码，运行跳转到浏览器

    解决乱码 这里只讲一种解决方法,其他方法,百度即可 1.打开Tomcat文件,找到配置文件config 2.在配置文件中找到logging.properties 3.修改文中含有encoding的语句 ...

  2. zookeeper(1)-集群的搭建

    集群搭建 1. 下载二进制文件 $ wget --no-check-certificate https://mirrors.ustc.edu.cn/apache/zookeeper/zookeeper ...

  3. 把本地项目上传到github

    一在本地项目文件内,git初始化,并add, commit cd /test/xxxdemo git init add . commit -m "inits" 二在github创建 ...

  4. 如何快速下载xcode等官方app

    为了避免xcode ghost类的风险,用app store又是如此的卡,如何解决呢? https://developer.apple.com/downloads/ 这里各种版本的下载. 绝对官方签名 ...

  5. How to Avoid Trivial Solutions in Physics-Informed Neural Networks

    未发表(2021) 本文也是关注采样点的一篇工作.主要从PINN的性能与采样点数量的关系方面入手考虑.提出了一个新的惩罚项,并对采样策略提出了一点看法. 本文的工作相对比较直观,简单,效果可能并不是很 ...

  6. 一个新App上线应该注意什么？

    一个新App上线应该关注哪些地方: 功能使用上无大问题遗留 用户使用体验尚佳 (前两条属于普通app更新也需要关注的点) 用户需要有反馈的入口,比如app内的反馈.用户可以直接联系到对应负责人进行反馈 ...

  7. bilibili经典面试题

    1. 如何向面试官解释什么是Redis,看看普通人和高手是如何回答的?_哔哩哔哩_bilibili 2.Java面试热点问题,synchronized原理剖析与优化_哔哩哔哩_bilibili 3.黑 ...

  8. fix: because the volume group on the selected device also consist of physical volumes on other devices

    because the volume group on the selected device also consist of physical volumes on other devices 目标 ...

  9. 为什么gdb通过0地址显示偏移会提示地址错误

    现象 在gdb中,如果想看一个struct的某个field的偏移量,和C语言一样可以通过对一个0地址变量取地址,然后取成员的偏移量获得.更神奇的地方在于和C语言一样,这里也不会触发内存访问异常. 另外 ...

  10. ubuntu20.0.4 安装influxdb

    官网:https://docs.influxdata.com/influxdb/v2.3/install/?t=Linux1.命令:# Ubuntu/Debian wget https://dl.in ...