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 复合选择器的几个例子
<!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js Author:博客园小dee --> 一. 复合选择器对checkbox的相关操作 1 <inp ...
- 使用CSS的类名交集复合选择器
首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接 ...
- css复合选择器的权重
选择器的权重 标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器 ...
- 使用css的类名交集复合选择器 《转》
复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各 ...
- css学习_css复合选择器
css复合选择器 a.交集选择器 (即...又...:选择器之间不能有空格) p.one{color:red;] b.并集选择器(中间由逗号隔开) p,div{color:red;} c.后代选择器 ...
- CSS复合选择器
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...
- (2)css的复合选择器与特性
css的复合选择器与特性 在本篇学习资料中,将深入了解css的相关概念,上一篇介绍的3种基本选择器的基础上,学习3种由基本选择器复合构成的选择器,然后再介绍css的两个重要的特性. 1.复合选择器 复 ...
- CSS复合选择器是什么？复合选择器是如何工作
复合选择器介绍 复合选择器其实很好理解,说白了就跟我们生活中的有血缘关系家庭成员一样,通过标签或者class属性或id属性,去找对应的有血缘关系的某个选择器,具体的大家往下看哦. 如果是初学者对基本的 ...
- CSS复合选择器和div盒子模型
一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...
随机推荐
- hdu1142 A Walk Through the Forest( Dijkstra算法+搜索）
看到这道题,想起了我家旁边的山! 那是一座叫做洪山寨的山,据说由当年洪秀全的小妾居住于此而得名! 山上盛产野果(很美味)! 好久没有爬上去了! #include<stdio.h> #inc ...
- #define和const的简单区别
面试常问:宏#define和const有什么区别? 1.编译器处理方式 define宏是在预处理阶段展开 const常量是在编译阶段使用 2.类型和安全检查不同 define宏没有类型,不做安全检查, ...
- Jquery学习笔记1-jquery总体代码框架
第一次在博客中记录自己的笔记,希望能坚持下去吧,加油! 今天学习的是Jquery的源代码,官网上下载,然后使用DW(dream waver)编辑器打开Js(下载的是未压缩版),版本是2.0.3.第一次 ...
- Web工程师的工具箱
RequestBin:允许你创建一个URL,利用这款工具进行收集请求,然后通过个性化方式进行检查. Hurl:发出HTTP请求,输入URL,设置标题,查看响应,最后分享给其他人.类似的工具有:REST ...
- thinkphp T方法
为了更方便的输出模板文件,新版封装了一个T函数用于生成模板文件名. 用法: T([资源://][模块@][主题/][控制器/]操作,[视图分层]) T函数的返回值是一个完整的模板文件名,可以直接用于d ...
- 【PRO ASP.NE MVC4 学习札记】使用Moq辅助进行单元测试
清楚问题所在: 先开个头,当我们对A进行单元测试时,可能会发现A的实现必须要依赖B.这时,我们在写单元测试时,就必须先创建B的实例,然后把B传给A再建立A的实例进行测试. 这样就会出现一些问题: 1. ...
- jquery-object.js
/** * jQuery.query - Query String Modification and Creation for jQuery * Written by Blair Mitchelmor ...
- iOS 获取手机 唯一标识-b
存贮在keychainQuery 可以统计用户使用情况 -(void)gatherMessage{ //采集用户设备信息 NSUserDefaults *userDefaults=[NSUserDef ...
- SpEL快速入门
Spring表达式语言(简称SpEL)是一种鱼JSP2 EL功能类似的变道时语言,它可以在运行时查询和操作对象图.与JSP 2的EL相比,SpEL功能更加强大,它甚至支持方法的调用和基本字符串模板. ...
- SCALA常规练习B
package com.hengheng.scala class Point(val x : Int, val y : Int) { val isOriginal : Boolean = { x == ...