文章目录
一、CSS3中的属性选择器
总结:
选择器[属性1][属性2]… 同时拥有多个属性
选择器[属性名^=属性值] 以 属性值 开头
选择器[属性名$=属性值] 以 属性值 结尾
选择器[属性名*=属性值] 包含 属性值
选择器[属性名~=属性值] 属性值是以空格分隔的独立部分
代码示例如下：
<style>
*{margin: 0;padding: 0;}
/* 选择具有.cartoon类的图片 加黄边 */
.cartoon{border: 3px solid yellow;}
/* 选择具有alt属性的图片 加橙色边 */
img[alt]{border: 3px solid orange;}
/* 选择具有title属性的图片 加灰色边 */
img[title]{border: 3px solid grey;}
/* 选择具有title属性 且title属性为"小狗" 给黑边 */
img[title="小狗"]{border: 3px solid black;}
/* 选择具有title属性 且title属性以"猫"为开头 给红边 ^ */
img[title^="猫"]{border: 3px solid red;}
/* 选择具有title属性 且title属性以"猫"为结尾 给紫色边 $ */
img[title$="猫"]{border: 3px solid purple;}
/* 选择具有title属性 且title属性包含"猫" 给蓝边 * */
img[title*="猫"]{border: 3px solid blue;}
/* 具有alt属性 并且alt属性中"猫"是以空格分隔的独立部分 加绿色边 */
img[alt~="猫"]{border: 3px solid green;}
/* 多属性 既有title又有alt */
/* img[title][alt]{border: 3px solid rgb(240, 21, 86);} */
/* 选择具有.cartoon 加橙色边 */
img[class~="cartoon"]{border: 3px solid orange;}
</style>
<body>
<img src="../images/02/1.jpg" alt="猫" title="猫">
<img src="../images/02/2.jpg" title="多啦a梦机器猫" >
<img src="../images/02/3.jpg" alt="加菲 猫" class="cartoon">
<img src="../images/02/4.jpg" alt="猫 和老鼠" class="cartoon">
<img src="../images/02/5.jpg" alt="龙-猫" title="龙-猫" class="cartoon">
<img src="../images/02/6.jpg" title='黑猫警长' >
<img src="../images/02/7.jpg" title="小狗">
<img src="../images/02/8.jpg" title="猫王" >
</body>
结果如下：
二、CSS3中的后代选择器
空格 后代选择器
+ 下一个兄弟
~ 下边所有的兄弟
> 儿子选择器
代码示例如下：
<style>
*{margin: 0;padding: 0;}
/* 选择section的后代 加蓝色边框 */
section div{border:1px solid blue}
/* 选择section 的第一代p 子代 加橙色边框 */
section>p{border:1px solid orange}
/* 选择 金敬姬 后面紧挨着的第一个弟弟div，加绿边 */
.widow+div{border:1px solid green}
/* 选择 金敬姬 下边所有的兄弟姐妹 */
.widow~div{border:1px solid red}
</style>
<section>
金日成section
<div>金正日(男)
<p>金惠姬(女)</p>
<div>金正哲</div>
<div>金正恩</div>
</div>
<div>金万一</div>
<p class="widow">金敬姬</p>
<div>金安一</div>
<div>金平一</div>
<div>金庆真</div>
</section>
结果如下：
三、CSS3中的伪类选择器
1.伪类选择器之child
代码示例如下：
<style>
*{margin: 0;padding: 0;}
h2{width:33.3%;float:left}
section{width:33.3%;float:left}
/* 文档根元素标签 */
html{background-color: #ccc;}
:root{background-color: #ccc;}
/* 每家的第二个孩子加橙色标签 nth-child会找当前标签的父亲 */
img:nth-child(2){border: 3px solid orange;}
/* 每家最大的孩子 */
img:first-child{border:3px solid red;}
img:nth-child(1){border:3px solid red;}
/* 每家最小的孩子 */
img:last-child{border: 3px solid pink;}
/* 独生子女的孩子加蓝色 */
img:only-child{border: 3px solid blue;}
/* 排行是偶数的加颜色 n是从0开始 0 , 1 , 2 ... */
img:nth-child(2n){border: 3px solid purple;}
img:nth-child(even){border: 3px solid purple;}
/* 排行是奇数的加颜色*/
img:nth-child(2n+1){border: 3px solid yellow;}
img:nth-child(odd){border: 3px solid yellow;}
/* 排行前三的孩子加颜色 3 2 1 */
img:nth-child(-n+3){border: 10px solid grey;}
</style>
<body>
<div>
<h2>贾赫</h2>
<h2>贾政</h2>
<h2>贾敏</h2>
<section class="jiahe">
<img src="../images/04/jialian.png" width="260" height="210" alt="">
<img src="../images/04/jiayingchun.png" width="260" height="210" alt="">
</section>
<section class="jiazheng">
<img src="../images/04/jiazhu.png" width="260" height="210" alt="">
<img src="../images/04/jiayingchun.png" width="260" height="210" alt="">
<img src="../images/04/jiabaoyu.png" width="260" height="210">
<img src="../images/04/jiatanchun.png" width="260" height="210">
<img src="../images/04/jiahuan.png" width="260" height="210">
</section>
<section class="jiamin">
<img src="../images/04/lindaiyu.png" width="260" height="210" alt="">
</section>
</div>
</body>
结果如下，图片及名字仅为示例：
2.伪类选择器之type
<style>
*{margin: 0;padding: 0;}
h2{width:33.3%;float:left}
section{width:33.3%;float:left}
/* 第二个必须是div 才能变成红色 但是第二个是p 严格匹配 */
div:nth-of-type(2){border: 3px solid red;}
/* section下的第一个p加橙色边 */
div:nth-of-type(1){border:3px solid orange}
/*section下的最后一个p 加绿色边 */
div:last-of-type{border: 3px solid green;}
/* section p唯一的独生女 */
p:only-of-type{border: 3px solid blue;}
/* section div 奇数 加pink */
div:nth-of-type(2n+1){border: 3px solid pink;}
div:nth-of-type(odd){border: 3px solid pink;}
/* section p 偶数 加紫色 */
p:nth-of-type(2n){border: 3px solid purple;}
p:nth-of-type(event){border: 3px solid purple;}
</style>
type和child区别?
相同点:
基本用法是一样的
nth-child(n) nth-of-type(n) n是从0,1,2 …
first-child first-of-type 第一个
last-child last-of-type 最后一个
nth-child(even) nth-of-type(even) even都是偶数
nth-child(odd) nth-of-type(odd) odd都是奇数
only-child only-of-type 惟一的一个
不同点:
child会严格匹配找到父亲下的符合条件的那个元素 不论元素是什么都会查
type会沿着元素去数数 会沿着当前元素去找
3.伪类选择器之hover和active
（1）hover：鼠标经过或停留时触发。
（2）active：当在一个链接上点击时触发激活。
<style>
*{margin: 0;padding: 0;}
section{
width: 300px;
height: 430px;
background: url(../images/06/bg.jpg);
margin: 100px auto;
}
/* hover 鼠标经过触发 */
section:hover{
background-image: url(../images//06/hover.jpg);
}
/* 当在一个链接上点击时，它就会成为活动的（激活的） */
/* active 激活的 */
section:active{
border: 5px solid red;
}
</style>
<body>
<section></section>
</body>
4.伪类选择器之表单新增
fieldset是一个框
<body>
<fieldset>
<legend>表单</legend>
</fieldset>
</body>
结果如下：
代码示例如下：
结果如下，当勾选同意时：
不勾选时：
5.伪类选择器之空和非空
代码示例如下：
<style>
li{
list-style-type:none;
height:30px;
line-height: 34px;
}
li b{
width:18px;
height:18px;
line-height:18px;
margin:8px 4px 0 4px; /* 顺时针 */
background-color: red;
}
/* 空元素 */
li:empty{
border: 1px solid black;
}
/* 非空元素 */
li:not(:empty){
border: 1px solid pink;
}
/* 除了前三个的排名数字都换背景 */
li:not(:nth-of-type(-n+3))>b{
background-color: yellow;
}
</style>
<body>
最喜欢的歌手排行榜
<ol>
<div>ceshi</div>
<li><b>01</b>张国荣</li>
<li><b>02</b>周杰伦</li>
<li><b>03</b>王菲</li>
<li><b>04</b>孙燕姿</li>
<li><b>05</b>陈奕迅</li>
<li></li>
</ol>
</body>
结果如下：
6.伪元素选择器之target（锚点）
代码示例如下：
<style>
ul{
position:fixed;
top:100px;
}
article{
width:960px;
margin:20px auto
}
/* 锚记 */
h2:target{color: brown;}
/* 选中的时候背景给颜色 */
p::selection{background-color: rosybrown}
</style>
<body>
<!-- 什么是锚点? -->
<!-- 当点击某个带有锚点的a标签时，会将有href中id的元素显示到页面的最上方 -->
<ul>
<li><a href="#title1">CSS（层叠样式表）</a></li>
<li><a href="#title2">实例</a></li>
<li><a href="#title3">发展历史</a></li>
<li><a href="#title4">使用方法</a></li>
</ul>
<article>
<h2 id="title1">CSS (层叠样式表)</h2>
<p>层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
<p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
<h2 id="title2">实例</h2>
<p>如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。[1] d 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="para1":</p>
<p>class 选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。</p>
<h2 id="title3">发展历史</h2>
<p>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</p>
<p>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</p>
<h2 id="title4">使用方法</h2>
<p>有三种方法可以在站点网页上使用样式表：外联式Linking（也叫外部样式）：将网页链接到外部样式表。嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。其中，优先级：内联式 > 嵌入式 > 外联式</p>
<p>当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。</p>
<p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。</p>
</article>
</body>
结果如下：
四、CSS3中的伪元素选择器
1.伪元素选择器之before和after
代码示例如下：
<style>
div{
width:200px;
height:200px;
border:1px solid blue
}
/*
IE8中
:before 是在盒子内容最前插入
:after 是在盒子之后插入内容
在IE9中
将:before和:after归为了伪元素::before和::after
:和::在使用上没有区别 都代表伪元素 目前使用::较多
*/
section::before{
content: "在前面插入的内容";
width: 200px;
height: 200px;
border: 1px solid red;
display: block;
}
section::after{
content: "在后面插入的内容";
width: 200px;
height: 200px;
border: 1px solid yellow;
display: block;
}
</style>
<body>
<section>
<div>你好，世界</div>
</section>
</body>
结果如下：
2.伪元素选择器的使用
结果如下：
3.伪元素选择器之清除浮动
代码示例如下：
<style>
*{margin: 0; padding: 0;}
.box-top{
/* width:600px; */
}
.box-left{
width:300px;
height:300px;
background-image: url("../images/12/01.jpg");
float:left
}
.box-right{
width:300px;
height:300px;
background-image: url("../images/12/02.jpg");
float:left
}
.box-bottom{
width:800px;
height:400px;
background-color: tomato;
}
.clearfix::after{
content: "";
display: block;
clear: both;/* 清除浮动 */
height: 0;
visibility: hidden;
}
/* 兼容IE6的做法 */
.clearfix{
zoom: 1;
}
</style>
<body>
<div class="box-top clearfix">
<div class="box-left"></div>
<div class="box-right"></div>
</div>
<div class="box-bottom"></div>
</body>
如果父元素box-top不加高度，此时它的高度就会塌陷下面的元素就会钻上去，结果如下：
利用伪元素清除浮动后，结果如下：
4.伪元素值selection
代码如下：
<style>
article{
width:150px;
margin:50px auto
}
/* 改变第一个字的颜色 */
article>p::first-letter{color: yellow;}
section{
width:800px;
margin:50px auto
}
/* 改变第一行的颜色 */
section::first-line{color: blue;}
div{
width:200px;
margin:50px auto;
}
/* 选中给背景色 */
::selection{background-color: pink;}
</style>
<body>
<article>
<p>秦时明月汉时关，</p>
<p>万里长征人未还。</p>
<p>但使龙城飞将在，</p>
<p>不教胡马度阴山。</p>
</article>
<section>
<p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？</p>
<p>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</p>
</section>
<div>
<p>四张机</p>
<p>鸳鸯织就欲双飞</p>
<p>可怜未老头先白</p>
<p>春波碧草</p>
<p>晓寒深处</p>
<p>相对浴红衣</p>
</div>
</body>
结果如下：
扫一扫
1186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
