<!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. Vue watch监听 date中的变量 与 数组或者对象的数据变化

    直接看下面代码: 1.红色的的为一个对象,watch监听时.需要借助 computed 属性,否则watch监听打印出来的新旧值看不出.(注:方法可以随便写,但是 computed 中 与 watch ...

  2. openwrt通过gre回源

    创建  ip tunnel add GRE网卡名 mode gre local 本地LAN IP remote SERVER LAN IP ttl 255  ip link set GRE网卡名 up ...

  3. 記錄一下oracle数据库系统的comment數據字典（轉載）

    一.comment是oracle数据库系统的关键字,所以不能用来命名表明或字段名 二.comment关键字用于对表,字段添加注释,有利于用户对表结构以及数据库对象含义的理解. 三.用户可以通过数据字典 ...

  4. 04jsp（1）

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  5. Word List 2023

    Word List 2023 记录 2023 年阅读论文时遇到的单词 wildcard 通配符 wildcard predicate 通配符谓词 maturation 成年过程:长大成人 ever-i ...

  6. 关于sql时间方面的处理

    查询大于时间两小时(例:订单设置两小时后过期 $res = Order::where(['status'=>0,'sid'=>1])->whereRaw("created_ ...

  7. flink udaf函数

    1.Flink-sql自定义UDAF函数 - 简书 (jianshu.com) 2.Flink SQL 自定义UDAF_k_wzzc的博客-CSDN博客_flink udaf 3.Flink 实践教程 ...

  8. springBoot中对mongodb添加2dsphere位置索引

    项目需求:最近有个需求,就是要根据坐标位置找出附近的车辆(车辆有对应的坐标).然后翻了翻百度,cv流一顿操作之后,大概整理出来了一段代码如下 //根据当前位置坐标,找出附近*米内的所有车辆BasicD ...

  9. 织梦dedecms网站迁移搬家图文教程

    织梦dedecms网站迁移搬家图文教程 2014-07-31  dedecms教程  文章介绍 织梦作为国内使用最多的程序之一,难免很多新手在接触dede时不知道怎么转移也就是搬家dede的程序,而且 ...

  10. Linux系统备份与还原——dump备份命令

    dump是Linux下非常好用的备份工具,系统默认没有安装该工具,可以通过yum来安装使用 [root@localhost ~]# rpm -qa |grep dump [root@localhost ...