CSS篇

2023-03-10 12:54| 来源: 网络整理| 查看: 265

美丽的紫琪一 : 结构伪类选择器选出第一个与最后一个元素令其变色伪类选择器 li:first-child { color: yellow; } li:last-child{ color: #f10215; } 斯嘉丽邓紫棋雪芙朱莉卡戴珊

效果

效果选出某个元素令其变色伪类选择器 li:nth-child(3){ color: orange; } 斯嘉丽邓紫棋雪芙朱莉卡戴珊效果选出偶数元素令其变色 li:nth-child(2n){ color: orange; } 选出奇数元素令其变色 li:nth-child(2n-1){ color: orange; } 从后往前数选出某一个元素 li:nth-last-child(2){ color: #c81623; } 二 : 属性选择器选出所有带有属性的元素属性选择器 div[class]{ color: greenyellow; } 女神女神女神女神女神女神女神女神女神

效果

效果选出class=girl2 的元素 div[class=girl2]{ color: greenyellow; } 选出以girl开头的元素 div[class^=girl]{ color: greenyellow; } 选出以girl结尾的元素 div[class$=girl]{ color: greenyellow; } 选出带有girl的元素,任意位置都可以 div[class*=girl]{ color: greenyellow; } 三 : 伪元素选择器选出文本第一个词或字伪元素选择器 p::first-letter{ font-size: 20px; color: deeppink; }

日本漫画《火影忍者》及其衍生作品中氏族之一，以擅长三大瞳术之一的写轮眼而闻名。宇智波是六道仙人长子因陀罗后裔，继承仙人之眼，与千手一族进行了多年的战争，最终宇智波斑与千手柱间共同建立木叶村。 [1] 日语发音接近“团扇”，团扇既是其族徽也象征其擅于火遁，被誉为“团扇宇智波”。

效果

效果选出文本的第一行 p::first-line{ font-size: 20px; color: deeppink; } 修改选中文本的样式 p::selection{ color: deeppink; } E::before与E::after

在E元素内部的开始位置和结束位置创建一个元素,该元素为行内元素,且必须要结合content属性使用

before与after div::before{ content: "我的"; } div::after{ content: "是宇智波"; } 名字效果

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，

使用E::before与E::after制作图标字体

注意 : 伪元素默认是行内元素,没有宽高

Document @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"; } 四 : 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里面的

CSS3盒子 div{ width: 100px; height: 100px; background-color: pink; padding: 30px; border-right: 20px solid yellow; box-sizing: border-box;//内减少 } 效果五 : 滑动生成边框

效果预览

效果

为了达到此效果,在鼠标触放在盒子时加上一个内减边框的伪类元素,用定位去实现,让伪类元素压在父盒子上.

11 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; } 六伪元素图标字体应用

鼠标经过时边框与下箭头(文字)同事变换红色

效果

其中下箭头是图标字体,我们利用伪元素在div盒子后面加一个伪元素,是一个图标字体下箭头,设置鼠标经过时候,边框与伪元素的颜色同时变为红色.

伪元素图标字体 @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; }

【本文地址】

公司简介

联系我们