css03层次选择器
<!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>
</html>
css03层次选择器的更多相关文章
- JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
- CSS层次选择器温故-2
1.层次选择器 通过HTML的DOM元素间的层次关系获取元素,层次关系包括后代.父子.相邻兄弟和通用兄弟,通过其中某类关系可以方便快捷地选定需要的元素 2.语法 3.兼容性 IE7以及以上版本 4.后 ...
- jQuery层次选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Jquery基本、层次选择器
基本选择器: $("#none").css("background","#bbffaa"); 改变id为none的所有元素的背景色 $(&q ...
- jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...
- jQuery选择器之层次选择器Demo
测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- jQuery基础学习7——层次选择器find()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq层次选择器
二. 层次选择器 1. parent > child(直系子元素) $(document).ready(function () { // 选取div下的第一代span元素,将字体颜色设为红色 $ ...
- css03复合选择器
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- vue指令详解
一.vue简绍 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...
- 操作系统（Day2.5）
一.为何要有操作系统 现代的计算机系统主要是由一个或者多个处理器,主存,硬盘,键盘,鼠标,显示器,打印机,网络接口及其他输入输出设备组成. 程序员无法把所有的硬件操作细节都了解到,管理这些硬件并且加以 ...
- [笔记]WiX制作msi安装包的例子
WiX是制作msi安装文件的工具,看了半天文档,感觉没有什么比一个例子更简单粗暴的了. <?xml version="1.0" encoding="UTF-8&qu ...
- js 改变文章字体大小
//设置页面文字大小 function SetFontSize(areaid, size) { document.getElementById(areaid).style.fontSize = siz ...
- PAT 天梯赛 L1-013. 计算阶乘和 【水】
题目链接 https://www.patest.cn/contests/gplt/L1-013 AC代码 #include <iostream> #include <cstdio&g ...
- kill、PKill、xkill 和killall----杀死进程
终止一个进程或终止一个正在运行的程序,一般是通过kill .killall.pkill.xkill 等进行.比如一个程序已经死掉,但又不能退出,这时就应该考虑应用这些工具.另外应用的场合就是在服务器管 ...
- 双camera景深计算
https://sanwen8.cn/p/2e41VC5.html 本文系微信公众号<大话成像>,知乎专栏< all in camera>原创文章,转载请注明出处. 接着上一篇 ...
- 20162326 齐力锋 2017-2018学期 Bag类的补写博客
要求: 代码运行在命令行中,路径要体现学号信息,IDEA中,伪代码要体现个人学号信息 参见Bag的UML图,用Java继承BagInterface实现泛型类Bag,并对方法进行单元测试(JUnit), ...
- 回溯算法 DFS深度优先搜索 （递归与非递归实现）
回溯法是一种选优搜索法(试探法),被称为通用的解题方法,这种方法适用于解一些组合数相当大的问题.通过剪枝(约束+限界)可以大幅减少解决问题的计算量(搜索量). 基本思想 将n元问题P的状态空间E表示成 ...
- 深入理解JVM 垃圾收集器（下）G1收集器
1.回顾CMS 1.1堆内存结构 1.2新生代GC 1.3老年代GC 2.G1收集器 2.1G1实现概览及使用场景 G1的推荐使用场景 2.2GC 2.2.1新生代GC 2.2.2老年代GC 老年代G ...