美丽的紫琪
一 : 结构伪类选择器
-
选出第一个与最后一个元素令其变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
li:first-child {
color: yellow;
}
li:last-child{
color: #f10215;
}
</style>
</head>
<body>
<ul>
<li>斯嘉丽</li>
<li>邓紫棋</li>
<li>雪芙</li>
<li>朱莉</li>
<li>卡戴珊</li>
</ul>
</body>
</html>
效果
效果
-
选出某个元素令其变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
li:nth-child(3){
color: orange;
}
</style>
</head>
<body>
<ul>
<li>斯嘉丽</li>
<li>邓紫棋</li>
<li>雪芙</li>
<li>朱莉</li>
<li>卡戴珊</li>
</ul>
</body>
</html>
效果
-
选出偶数元素令其变色
<style>
li:nth-child(2n){
color: orange;
}
</style>
-
选出奇数元素令其变色
<style>
li:nth-child(2n-1){
color: orange;
}
</style>
-
从后往前数选出某一个元素
li:nth-last-child(2){
color: #c81623;
}
二 : 属性选择器
-
选出所有带有属性的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
div[class]{
color: greenyellow;
}
</style>
</head>
<body>
<div>女神</div>
<div>女神</div>
<div>女神</div>
<div>女神</div>
<div class="firstgirl">女神</div>
<div class="girl">女神</div>
<div class="girl1">女神</div>
<div class="girl2">女神</div>
<div class="girl3">女神</div>
</body>
</html>
效果
效果
-
选出class=girl2 的元素
<style>
div[class=girl2]{
color: greenyellow;
}
</style>
-
选出以girl开头的元素
<style>
div[class^=girl]{
color: greenyellow;
}
</style>
-
选出以girl结尾的元素
<style>
div[class$=girl]{
color: greenyellow;
}
</style>
-
选出带有girl的元素,任意位置都可以
<style>
div[class*=girl]{
color: greenyellow;
}
</style>
三 : 伪元素选择器
-
选出文本第一个词或字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
p::first-letter{
font-size: 20px;
color: deeppink;
}
</style>
</head>
<body>
<p>
日本漫画《火影忍者》及其衍生作品中氏族之一，以擅长三大瞳术之一的写轮眼而闻名。宇智波是六道仙人长子因陀罗后裔，继承仙人之眼，与千手一族进行了多年的战争，最终宇智波斑与千手柱间共同建立木叶村。 [1] 日语发音接近“团扇”，团扇既是其族徽也象征其擅于火遁，被誉为“团扇宇智波”。
</p>
</body>
</html>
效果
效果
-
选出文本的第一行
<style>
p::first-line{
font-size: 20px;
color: deeppink;
}
</style>
-
修改选中文本的样式
<style>
p::selection{
color: deeppink;
}
</style>
-
E::before与E::after
在E元素内部的开始位置和结束位置创建一个元素,该元素为行内元素,且必须要结合content属性使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before与after</title>
<style>
div::before{
content: "我的";
}
div::after{
content: "是宇智波";
}
</style>
</head>
<body>
<div>名字</div>
</body>
</html>
效果
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，
-
使用E::before与E::after制作图标字体
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hrstq9');
src: url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hrstq9') format('truetype'),
url('fonts/icomoon.woff?hrstq9') format('woff'),
url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
div {
font-family: 'icomoon';
}
div::after {
content: "\e91b";
}
</style>
</head>
<body>
<div></div>
</body>
</html>
四 : css3盒子模型
css3中可以通过box-sizing来指定盒子模型,即可指定为content-box,border-box,我们计算盒子大小的方式就发生了变化.
box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3盒子</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
padding: 30px;
border-right: 20px solid yellow;
box-sizing: border-box;//内减少
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
效果
五 : 滑动生成边框
效果预览
效果
为了达到此效果,在鼠标触放在盒子时加上一个内减边框的伪类元素,用定位去实现,让伪类元素压在父盒子上.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11</title>
<style>
img{
width: 100%;
height: auto;
display: block;
}
div{
width: 300px;
overflow: hidden;
position: relative;
border-radius: 10px;
}
div:hover::after{
content: "";
border: 20px solid rgba(255,255,255,0.5);
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>
<img src="1.png" >
</div>
</body>
</html>
六 伪元素图标字体应用
鼠标经过时边框与下箭头(文字)同事变换红色
效果
其中下箭头 是图标字体,我们利用伪元素在div盒子后面加一个伪元素,是一个图标字体下箭头,设置鼠标经过时候,边框与伪元素的颜色同时变为红色.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素图标字体</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hrstq9');
src: url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hrstq9') format('truetype'),
url('fonts/icomoon.woff?hrstq9') format('woff'),
url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
div {
width: 200px;
height: 30px;
border: 1px solid #ccc;
margin: 100px auto;
font-family: "icomoon";
position: relative;
}
div::before{
content: "\ea51";
position: absolute;
right: 10px;
top: 5px;
}
div:hover{
color: red;
border-color: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
网友评论