css03层次选择器
2024-05-27 22:39:58
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><!--内部样式 写在head中--><style type="text/css">/* 并集选择器 多个选择器之间使用,（英文半角状态）隔开.word,#s,span{color: green;}*//*交集选择器 格式：01.标签选择器+类选择器 02.标签选择器+ID选择器必须是标签选择器在前div.word｛｝ 去div标签中查找class属性值为 word的标签div#s{} 去div标签中查找id属性值为 s的标签div.word{color: green;} *//* 后代选择器 必须有层级关系 选择器之前使空格隔开*/#dv span {color: green;}</style>
</head>
<body>
<div>这是一个div1</div>
<div>这是一个div2</div><div class="word">类选择器</div>
<div class="word">类选择器</div><div id="s">ID选择器</div>
<span>div外面的span</span><div id="dv"><span>div里面的span标签1</span>
</div><div><span>div里面的span标签2</span>
</div></body>
</html><!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>层次选择器</title><style type="text/css">/*并集选择器*/p,ul{border: 1px solid red;}/* 后代选择器body p{background: pink;}*//* 子选择器body>p{background: pink;}*//*相邻的兄弟选择器.first+p{background: pink;}*//*所有兄弟选择器*/.first~p{background: pink;}</style>
</head>
<body>
<p class="first">1</p>
<p>2</p>
<p>3</p><ul><li><p>4</p></li><li><p>5</p></li><li><p>6</p></li></ul></body>
</html><!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>结构伪类选择器</title><!-- 不需要在节点上 增加 额外的属性！ 结构伪类选择器--><style type="text/css">/*01.改变ul中第一个li元素的样式 颜色是红色ul li:first-child{color: red;}*//*02.改变ul中最后一个li元素的样式 颜色是红色ul li:last-child{color: red;}*//*03.改变页面中第3个p标签 颜色是红色 ! 只看顺序 不看类型！001.无论p标签隐藏的多深！ 始终是自上而下的第三个p标签002.body节点下面第3个元素 如果是p 就显示样式body p:nth-child(3){color: red;}*//*04.改变页面中第2个p标签 颜色是红色先看类型 再看顺序body p:nth-of-type(2){color: red;}*//* 05.改变第一个ul中的第一个li 的样式 颜色是红色 */ul:nth-of-type(1) li:nth-of-type(1){color: red;}</style></head>
<body>
<p>p1</p>
<span>span</span>
<p>p2</p>
<p>p3</p>
<ul><li>u1li1</li><li>u1li2</li><li>u1li3</li><li>u1li4</li>
</ul>
<ul><li>u2li1</li><li>u2li2</li><li>u2li3</li><li>u2li4</li>
</ul></body>
</html><!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>爱奇异视频播放列表</title><style type="text/css">li{display: inline-block; /*让li标签中的内容一行显示*/}/*使用结构伪类选择器选择li元素下的标题元素，并设置字体大小为16px，字体颜色为#4D4D4D*/li h4:nth-of-type(1){font-size: 24px;color: #4D4D4D;}
/*使用结构伪类选择器选择li下第一个p元素，设置字体大小为14px，字体颜色为 #640000*/li p:nth-of-type(1){font-size: 14px;color:#640000;}
/*使用结构伪类选择器选择li下第二个p元素，设置字体大小为12px，字体颜色为蓝色*/li p:nth-of-type(2){font-size: 12px;color:blue;}</style>
</head>
<body>
<h3>热播</h3>
<ul><li><img src="data:images/img1.png" alt=""/><h4>神武赵子龙</h4><p>怒，林更新不抱网红抱女神</p><p>点击次数：242445次</p></li><li><img src="data:images/img2.png" alt=""/><h4>旋风十一人</h4><p>胡歌变教练在撩前女友</p><p>点击次数：242445次</p></li><li><img src="data:images/img3.png" alt=""/><h4>太阳的后裔</h4><p>宋慧乔吃嫩草</p><p>点击次数：242445次</p></li><li><img src="data:images/img4.png" alt=""/><h4>山海经之赤影传说</h4><p>娜扎张翰再度联手</p><p>点击次数：242445次</p></li>
</ul></body>
</html><!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>CSS3属性选择器的使用</title><style type="text/css">/*此段代码只是让结构更美观，后续会详细讲解*/.demo a {float: left;display: block;height: 50px;width: 50px;border-radius: 10px;text-align: center;background: #aac;color: blue;font: bold 20px/50px Arial;margin-right: 5px;text-decoration: none;margin: 5px;}/*存在属性id的元素a[id]{background: chartreuse;}*//*属性id=first的元素a[id="first"]{background: chartreuse;}*//*属性class="links"的元素a[class="links"]{background: chartreuse;}*//*属性class里包含links字符串的元素a[class*="links"]{background: chartreuse;}*//*属性href里以http开头的元素a[href^="http"]{background: chartreuse;}*//*属性href里以png结尾的元素*/a[href$="png"]{background: chartreuse;}</style>
</head>
<body>
<p class="demo"><a href="http://www.baidu.com" class="links item first" id="first" >1</a><a href="" class="links active item" title="test website" target="_blank" >2</a><a href="sites/file/test.html" class="links item" >3</a><a href="sites/file/test.png" class="links item" > 4</a><a href="sites/file/image.jpg" class="links item" >5</a><a href="efc" class="links item" title="website link" >6</a><a href="/a.pdf" class="links item" >7</a><a href="/abc.pdf" class="links item" >8</a><a href="abcdef.doc" class="links item" >9</a><a href="abd.doc" class="linksitem last" id="last">10</a>
</p>
</body>转载于:https://www.cnblogs.com/xtdxs/p/7094133.html
css03层次选择器相关推荐
- CSS学习04之层次选择器
回顾 什么是选择器 在 CSS 中,选择器是选取需设置样式的元素的模式. 选择器的作用 CSS 选择器用于"查找"(或选取)要设置样式的 HTML 元素. 方便我们对元素添加样式. ...
- html层次选择器例题,JQuery 层次选择器的例子
层次选择器_www.jbxue.com $(function () { //------1.在给定的祖先元素下匹配所有后代元素(包含了子元素,以及子元素的元素,一直往下延伸) //var $divs ...
- jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器
这篇文章来介绍下jQuery的选择器. 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半 ...
- CSS基本选择器、层次选择器、结构伪类选择器、属性选择器
目录 基本选择器 1.标签选择器 2.类选择器 3.ID选择器 层次选择器 结构伪类选择器 属性选择器 基本选择器 1.标签选择器 2.类选择器 3.ID选择器 层次选择器 选择器 类 型 功能描 ...
- 设置某个元素的标签内容、设置元素的样式、层次选择器、总结选择器
点击按钮设置某个元素的标签内容 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- jQuery常用的层次选择器
常用层次选择器 儿子 手机品牌 苹果 华为 vivo 电脑品牌 苹果 联想 戴尔 销量排行 vivo 苹果 华为 <!DOCTYPE html> <html> <head ...
- html层次选择器例题,详解强大的jQuery选择器之基本选择器、层次选择器
jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器.另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件, ...
- jquery 中多条件选择器,相对选择器,层次选择器的区别
一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$(&qu ...
- jquery的层次选择器
1.层次选择器 1.1.后代选择器:$("s h") s和h之间有一个空格 1.2.儿子选择器:$("s>h") s和h之间有一个> 1.3.相 ...
最新文章
- linux c 指针 内存 泄漏几种情况
- php上传报文,PHP-02.文件上传、php保存／转移上传的文件、常见的网络传输协议、请求报文及属性、响应报文及属性...
- 将图片缩放成指定尺寸
- 超时时间已到，但是尚未从池中获取连接。出现这种情况可能是因为所有池连接均在使用，并且达到了最大池大
- linux （centos）下安装 mongodb v3.2 笔记(启动的时候可以指定配置文件)
- php multi_query()函数 实现批量执行sql语句
- 互联网公司的架构设计要怎么落地？| 技术头条
- java集群解析文件_java相关：springboot整合redis集群过程解析
- 3.Java垃圾回收机制面试题
- ReLU,PReLU和LReLUD的区别
- 对外汉语语料库有哪些_国内外有哪些比较好的语料库？(corpora)
- 从面试官的角度，聊聊java面试流程
- cvpr 2018 image caption generation论文导读(含workshop)
- python字典forward_python工具库库介绍-bidict: 双向字典
- 数字序号的级别与文章层次结构的关系
- 项目升级与环境变化架构侧重点
- 新闻资讯APP——Resultpage.vue组件
- java导出excel包含图片
- 计算机科学概论第三版重点,计算机科学概论重点.doc
- 飞凌嵌入式-基于国产A40i核心板-医用呼吸机解决方案