css 开发技巧
一、css 选择器
基础选择器
| 选择器 | 别名 | 说明 | 版本 | 常用 |
|---|---|---|---|---|
| tag | 标签选择器 | 指定类型的标签 | 1 | √ |
| #id | ID 选择器 | 指定 id 的标签 | 1 | √ |
| .class | 类选择器 | 指定类名的标签 | 1 | √ |
| * | 通配选择器 | 所有类型的标签 | 2 | √ |
| div p | 后代选择器 | 元素的所有后代元素 | 1 | √ |
| div>p | 子代选择器 | 所有父级是 div 元素的 p 元素 | 2 | √ |
| div1+div2 | 相邻同胞选择器 | div1 元素 后面相邻 的兄弟元素 div2 | 2 | √ |
| div~p | 通用同胞选择器 | div 元素 后面 的兄弟元素 p | 3 | √ |
| div,p | 并集选择器 | 所有 div 元素和 p 元素 | 1 | √ |
| div.class | 交集选择器 | 指定类名的 div 元素 | 1 | √ |
伪类选择器
| 选择器 | 说明 | 版本 | 常用 |
|---|---|---|---|
| :not | 非指定条件的元素 | 4 | √ |
| :active | 鼠标激活的元素 | 1 | × |
| :hover | 鼠标悬浮的元素 | 1 | √ |
| :link | 未访问的链接元素 | 1 | × |
| :visited | 已访问的链接元素 | 1 | × |
| :valid | 输入合法的表单元素 | 3 | √ |
| :invalid | 输入非法的表单元素 | 3 | √ |
| :checked | 选项选中的表单元素 | 3 | √ |
| :disabled | 事件禁用的表单元素 | 3 | √ |
| :focus-within | 内部表单元素处于聚焦状态的元素 | 4 | √ |
| :placeholder-shown | 确定元素是否显示占位符，可用于检查输入是否为空 | 4 | √ |
input:placeholder-shown {
border-color: pink;
}
input::placeholder {
color: blue;
}
<!-- 没有占位符时，可以传空字符串使样式生效 -->
<input placeholder=" " />
<input placeholder="输入框" />
结构选择器
| 选择器 | 说明 | 版本 | 常用 |
|---|---|---|---|
| p:empty | 无子元素(或文本节点)的 p 元素 | 3 | √ |
| :nth-child(n) | 元素中指定顺序的兄弟元素(n 为正数是向后找) | 3 | √ |
| :nth-last-child(n) | 元素中指定逆序的兄弟元素(n 为负数是向前找) | 3 | × |
| :first-child | 父元素中为首的子元素 | 2 | √ |
| :last-child | 父元素中为尾的子元素 | 3 | √ |
| p:only-child | 父元素(不包含 body)中仅有一个元素，且是元素 p | 3 | √ |
| p:nth-of-type(n) | p 标签中指定顺序的兄弟元素 | 3 | √ |
| p:nth-last-of-type(n) | p 标签中指定逆序的兄弟元素 | 3 | × |
| p:first-of-type | p 标签中为首的标签 | 3 | √ |
| p:last-of-type | p 标签中为尾标签 | 3 | √ |
| p:only-of-type | 父元素(包括 body)中元素 p 是唯一的，可以有不是 p 的兄弟元素 | 3 | √ |
<div>
<p>1111</p>
</div>
<div>
<span>3333</span>
<p>2222</p>
</div>
<p>444</p>
p:only-of-type {
color: blue;
}
p:only-child {
color: red;
}
属性选择器
| 选择器 | 说明 | 版本 | 常用 |
|---|---|---|---|
| [attr] | 指定属性的元素 | 2 | √ |
| [attr=val] | 属性等于指定值的元素 | 2 | √ |
| [attr*=val] | 属性含有指定值的元素 | 3 | √ |
| [attr^=val] | 属性以指定值开头的元素 | 3 | √ |
| [attr$=val] | 属性以指定值结尾的元素 | 3 | √ |
/* [attr] 指定属性的元素 */
[title] {
color: blue;
}
/* [attr=val] 属性等于指定值的元素 */
// [title=one] {
// color:red;
// }
/* [attr*=val] 属性含有指定值的元素*/
// [title*=one] {
// color:green;
// }
/* [attr^=val] 属性以指定值开头的元素*/
// [title^=one] {
// color:pink;
// }
/* [attr$=val] 属性以指定值结尾的元素*/
// [title$=one] {
// color:orange;
// }
<div>
<p title="one">111111</p>
<p title="tow one">22222</p>
<p title="oneeenn">33333</p>
<p title="eeeoneen">44444</p>
<p title="rrwwone">55555</p>
<p title="two">66666</p>
</div>
伪元素选择器
| 选择器 | 说明 | 版本 | 常用 |
|---|---|---|---|
| ::before | 在元素前插入的内容 | 2 | √ |
| ::after | 在元素后插入的内容 | 2 | √ |
| ::placeholder | 表单元素的占位 | 4 | √ |
css 权重优先级：!important > 行内样式 > ID 选择器 > 类选择器(包括属性选择器、伪类) > 标签选择器 > 通配符* > 继承 > 浏览器默认属性
二、常见样式布局
居中布局
flex + margin
<div class="center-layout">
<div></div>
</div>
.center-layout {
display: flex;
width: 400px;
height: 400px;
background-color: #f66;
div {
margin: auto;
width: 100px;
height: 100px;
background-color: #66f;
}
}
对齐两端文本
text-align-last 设置为 justify 实现文字两端对齐
<ul class="justify-text">
<li>账号</li>
<li>密码</li>
<li>手机号</li>
<li>电子邮件</li>
<li>通讯地址</li>
</ul>
.justify-text {
li {
padding: 0 20px;
width: 100px;
height: 40px;
background-color: #f66;
line-height: 40px;
text-align-last: justify;
color: #fff;
& ~ li {
margin-top: 10px;
}
}
}
符号分割文字
:not()
<div data-title="使用:not()去除无用属性">
<ul class="cleared-attr">
<li class="first-line">
<span>AAA</span>
<span>BBB</span>
<span>CCC</span>
<span>DDD</span>
<span>EEE</span>
</li>
<li class="second-line">
<span>AAA</span>
<span>BBB</span>
<span>CCC</span>
<span>DDD</span>
<span>EEE</span>
</li>
</ul>
</div>
.cleared-attr {
li {
height: 40px;
line-height: 40px;
}
span {
display: inline-block;
color: #66f;
&:hover {
text-decoration: underline;
}
}
.first-line span:not(:last-child)::after {
content: ',';
}
.second-line span:not(:nth-child(-n + 3)) {
display: none;
}
}
左右横向布局
margin 使用 flexbox 横向布局时，最后一个元素通过 margin-left:auto 实现向右对齐
<div class="bruce flex-ct-y" data-title="使用margin排版凸显布局">
<div class="highlight-list left">
<p>Alibaba</p>
<p>Tencent</p>
<p>Baidu</p>
<p>Jingdong</p>
<p>Ant</p>
<p>Netease</p>
</div>
<div class="highlight-list right">
<p>Alibaba</p>
<p>Tencent</p>
<p>Baidu</p>
<p>Jingdong</p>
<p>Ant</p>
<p>Netease</p>
</div>
</div>
.highlight-list {
display: flex;
align-items: center;
padding: 0 10px;
width: 600px;
height: 60px;
background-color: #3c9;
& + .highlight-list {
margin-top: 10px;
}
p {
padding: 0 10px;
height: 40px;
background-color: #3c9;
line-height: 40px;
font-size: 16px;
color: #fff;
}
&.left p {
& ~ p {
margin-left: 10px;
}
&:last-child {
margin-left: auto;
}
}
&.right p {
& ~ p {
margin-left: 10px;
}
&:first-child {
margin-right: auto;
}
}
}
折叠面板
max-height
<div data-title="使用max-height切换自动高度">
<ul class="auto-height">
<li>
<h3>列表1</h3>
<p>内容1<br />内容2<br />内容3<br />内容4</p>
</li>
<li>
<h3>列表2</h3>
<p>内容1<br />内容2<br />内容3<br />内容4</p>
</li>
<li>
<h3>列表3</h3>
<p>内容1<br />内容2<br />内容3<br />内容4</p>
</li>
</ul>
</div>
.auto-height {
width: 300px;
li {
cursor: pointer;
& ~ li {
margin-top: 5px;
}
&:hover p {
border-bottom-width: 1px;
max-height: 600px;
}
}
h3 {
padding: 0 20px;
height: 40px;
background-color: #f66;
cursor: pointer;
line-height: 40px;
font-size: 16px;
color: #fff;
margin: 0;
}
p {
overflow: hidden;
padding: 0 20px;
border: 1px solid #f66;
border-top: none;
border-bottom-width: 0px;
max-height: 0;
line-height: 30px;
transition: all 500ms;
margin: 0;
}
}
自定义光标颜色
通过 caret-color 根据主题颜色自定义光标颜色
<div data-title="使用:valid和:invalid校验表单内容">
<form class="form-validation">
<div>
<label>名字</label>
<input
type="text"
placeholder="请输入你的名字(1到4个中文)"
pattern="^[\u4e00-\u9fa5]{1,4}$"
required
/>
</div>
<div>
<label>手机号</label>
<input type="text" placeholder="请输入你的手机号" pattern="^1[3456789]\d{9}$" required />
</div>
<div>
<label>简介</label>
<textarea></textarea>
</div>
</form>
</div>
.form-validation {
width: 500px;
div + div {
margin-top: 10px;
}
label {
display: block;
padding-bottom: 5px;
font-weight: bold;
font-size: 16px;
}
input,
textarea {
display: block;
padding: 0 20px;
border: 1px solid #ccc;
width: 100%;
height: 40px;
outline: none;
caret-color: #09f;
transition: all 300ms;
&:focus:valid {
border-color: #3c9;
}
&:invalid {
border-color: #f66;
}
&:required {
background-color: #eee;
}
}
textarea {
height: 122px;
resize: none;
line-height: 30px;
font-size: 16px;
}
}
绘制三角形
border
<div class="triangle"></div>
.triangle {
border: 50px solid transparent;
border-left-color: #f66;
width: 0;
height: 0;
}
自定义 title 提示框
attr + data-
<div class="hover-tips">
<p data-name="中国红"></p>
<p data-name="罗兰紫"></p>
<p data-name="箩底橙"></p>
<p data-name="姣婆蓝"></p>
<p data-name="嫩叶青"></p>
<p data-name="大地绿"></p>
</div>
$color-list: #f66 #66f #f90 #09f #9c3 #3c9;
.hover-tips {
margin-top: 100px;
display: flex;
justify-content: space-between;
width: 200px;
p {
position: relative;
padding: 2px;
border: 2px solid transparent;
border-radius: 100%;
width: 24px;
height: 24px;
background-clip: content-box;
cursor: pointer;
transition: all 300ms;
&::before,
&::after {
position: absolute;
left: 50%;
bottom: 100%;
opacity: 0;
transform: translate3d(0, -30px, 0);
transition: all 300ms;
}
&::before {
margin: 0 0 12px -35px;
border-radius: 5px;
width: 70px;
height: 30px;
background-color: rgba(#000, 0.5);
line-height: 30px;
text-align: center;
color: #fff;
content: attr(data-name);
}
&::after {
margin-left: -6px;
border: 6px solid transparent;
border-top-color: rgba(#000, 0.5);
width: 0;
height: 0;
content: '';
}
@each $color in $color-list {
$index: index($color-list, $color);
&:nth-child(#{
$index}) {
background-color: $color;
&:hover {
border-color: $color;
}
}
}
&:hover {
&::before,
&::after {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
}
}
迭代计数器
<div data-title="迭代计数器">
<div class="iterative-counter">
<ul>
<li>
<input id="angular" type="checkbox" />
<label for="angular">Angular</label>
</li>
<li>
<input id="react" type="checkbox" />
<label for="react">React</label>
</li>
<li>
<input id="vue" type="checkbox" />
<label for="vue">Vue</label>
</li>
</ul>
<p class="count" data-unit="个">框架：</p>
<p class="weight" data-unit="%">权重：</p>
</div>
</div>
.iterative-counter {
ul {
/* 定义计数器的递增量 */
counter-reset: index 0 count 0 weight 0;
}
li {
display: flex;
position: relative;
align-items: center;
counter-increment: index 1;
&::before {
/* 调用计数器值 */
content: counter(index) '、';
}
& + li {
margin-top: 10px;
}
}
input {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
opacity: 0;
&:checked + label::before {
color: #3c9;
content: '\2713';
}
}
label {
display: flex;
align-items: center;
height: 20px;
&::before {
margin-right: 5px;
border: 1px solid #3c9;
width: 20px;
height: 20px;
cursor: pointer;
line-height: 20px;
text-align: center;
color: transparent;
content: '';
transition: all 300ms;
}
}
p {
margin-top: 10px;
&.count::after {
/* 调用计数器值 */
content: counter(count) attr(data-unit);
}
&.weight::after {
/* 调用计数器值 */
content: counter(weight) attr(data-unit);
}
}
}
#angular:checked {
counter-increment: count 1 weight 20;
}
#react:checked {
counter-increment: count 1 weight 50;
}
#vue:checked {
counter-increment: count 1 weight 30;
}
内容滚动进度条
calc()
<div data-title="滚动指示器">
<div class="scroll-indicator">
<div>
<article>
<h1>2019中国互联网企业100强榜单</h1>
<p>
8月14日，中国互联网协会、工业和信息化部网络安全产业发展中心（工业和信息化部信息中心）在2019年中国互联网企业100强发布会暨百强企业高峰论坛上联合发布了2019年中国互联网企业100强榜单、互联网成长型企业20强榜单和《2019年中国互联网企业100强发展报告》。阿里巴巴（中国）有限公司、深圳市腾讯计算机系统有限责任公司、百度公司、京东集团、浙江蚂蚁小微金融服务集团股份有限公司、网易集团、美团点评、北京字节跳动科技有限公司、三六零安全科技股份有限公司、新浪公司位列榜单前十名。
</p>
<p>今年互联网百强企业聚焦创新引领、产业融合、工业互联网等方面，主要呈现出六大特点：</p>
<p>
一是整体规模跨越式提升，成为数字经济新引擎。2019年互联网百强企业互联网业务收入高达2.75万亿元，比2018年互联网百强企业互联网业务收入增长超过1万亿元，占我国数字经济的比重达8.8%，对数字经济的贡献率达14%，带动数字经济增长近2个百分点成为带动我国互联网产业发展的重要支撑。从互联网业务收入增长率分布看，有86家企业互联网业务收入实现增长。
</p>
<p>
二是研发投入强度突破10%，打造中国核心技术。2019年互联网百强企业的研发投入达到1538.7亿元，同比增长45.1%，平均研发强度突破10%，比我国R&D经费投入强度高出近8个百分点。从研发强度分布看，有40家企业研发强度在10%以上，4家企业研发强度在30%-35%之间。互联网百强企业不断突破核心技术，互联网百强企业不断提升原始创新能力，加快推进5G、人工智能、云计算、大数据等关键核心技术突破，部分技术处于国际领先水平。2019年互联网百强企业已经拥有专利近8万项，其中发明专利数近6万项。2019年互联网百强企业中应用大数据企业29家，云计算28家，人工智能相关企业24家，运用物联网技术相关的企业3家。
</p>
<p>
三是应用场景多元化，智能+打造生活消费新模式。互联网百强企业深化消费互联网发展，已对衣、食、住、行等各方面进行了全场景覆盖，业务涵盖互联网公共服务、网络媒体、音乐与视频、社交网络、科技创新与知识产权等17个领域，全方位提升了人民群众的生活、工作、文化、娱乐、教育等方面的生活质量。2019年互联网百强企业中从事电子商务的共18家；涉及互联网公共服务的共41家，主要提供信息查询、教育医疗、政务办理、公共出行等便民服务，让普通人民享受到“互联网+”带来的便利生活；21家企业涉及音乐与视频业务。同时，互联网百强企业积极发展智能产业，不断拓展“智能+”，创造了智慧门店、VR/AR试衣试妆、无感支付等丰富的新消费业态和场景，打造未来智能生活消费新模式。
</p>
<p>
四是工业互联网入实践深耕，赋能传统产业高质量发展。互联网百强企业通过不断向各行各业“渗透”和“赋能”，推动云计算、大数据、物联网等信息通信技术与实体经济深入融合，培育新产业、新业态、新模式，支撑实体经济高质量发展。2019年互联网百强企业产业互联网数量再创新高，以服务实体经济客户为主的产业互联网领域企业数量达到60家，累计服务近4000万家企业。其中，涉及互联网数据服务41家，生产制造服务13家，科技创新和知识产权24家，B2B电商11家，互联网基础服务10家。
</p>
<p>
五是“独角兽”
企业快速增长，国际行业地位再创新高。2019年互联网百强企业及下属企业涌现出蚂蚁金服、字节跳动、京东数科、满帮集团、优刻得、找钢网等25家独角兽企业，同比增长38.9%，业务涉及金融科技、智慧物流、电子商务、新文娱等领域。从全球公司市值排名情况看，2018年，全球互联网公司市值前三十强中互联网百强企业占10家，其中，腾讯集团和阿里巴巴稳居全球互联网公司市值前十强。
</p>
<p>
六是覆盖地域实现新扩展，网络扶贫取得新成效。2019年拥有互联网百强企业的省份达到18个，在2018年基础上新增江西和山东两个省份，地域覆盖不断增加。在区域分布上，东部地区互联网百强企业数量共86家，中西部地区互联网百强企业共12家，东北地区互联网百强企业数量保持2家。其中，安徽、贵州、河南、湖北、湖南、江西、重庆、四川8个中西部地区互联网百强企业数量不断增加，较去年增长1家。互联网百强企业积极践行企业社会责任，发挥互联网在助推脱贫攻坚中的作用，探索“直播+电商”等扶贫新模式，推进精准扶贫、精准脱贫。据统计，超过一半以上互联网百强企业参与网络扶贫。
</p>
</article>
</div>
</div>
</div>
.scroll-indicator {
overflow: hidden;
position: relative;
border: 1px solid #66f;
width: 500px;
height: 300px;
&::after {
position: absolute;
left: 0;
right: 5px;
top: 2px;
bottom: 0;
background-color: #fff;
content: '';
}
div {
overflow: auto;
height: 100%;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
&::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: #66f;
}
}
article {
padding: 0 20px;
background: linear-gradient(to right top, #f66 50%, #f0f0f0 50%) no-repeat;
background-size: 100% calc(100% - 298px + 5px);
> * {
position: relative;
z-index: 9;
}
}
h1 {
line-height: 40px;
text-align: center;
font-size: 20px;
}
p {
margin-top: 20px;
line-height: 20px;
text-indent: 2em;
}
}
圆角进度条
background + border-radius
<div data-title="圆角进度条">
<div class="fillet-progressbar"></div>
</div>
@mixin progress-bar($width: 100px, $height: 10px, $color: #f66, $percent: 0) {
border-radius: $height / 2;
width: $width;
height: $height;
background-color: #ccc;
background-image: radial-gradient(
closest-side circle at $percent,
$color,
$color 100%,
transparent
), linear-gradient($color, $color);
background-repeat: no-repeat;
background-size: 100%, $percent;
}
.fillet-progressbar {
@include progress-bar(500px, 10px, #66f, 50%);
}
加载中…
animation
<div data-title="加载指示器">
<div class="loading-indicator">加载中<span></span></div>
</div>
.loading-indicator {
font-size: 16px;
color: #09f;
span {
display: inline-block;
overflow: hidden;
height: 1em;
line-height: 1;
vertical-align: -0.25em;
&::after {
display: block;
white-space: pre-wrap;
/* \A 使content中的内容换行 */
content: '...\A..\A.';
/* step-start 使动画不连续*/
/* both：该过渡方式会使动画的变化先快后慢，再慢后快 */
animation: loading 3s infinite step-start both;
}
}
}
@keyframes loading {
33% {
/* translate3d(x,y,z) 分别代表要移动的轴的方向的距离 */
// transform: translate3d(0, -2em, 0);
transform: translateY(-2em);
}
66% {
// transform: translate3d(0, -1em, 0);
transform: translateY(-1em);
}
}
三、拓展
标签导航栏
input + label
<div data-title="标签导航">
<div class="tab-navbar">
<input id="tab1" type="radio" name="tabs" hidden checked />
<input id="tab2" type="radio" name="tabs" hidden />
<input id="tab3" type="radio" name="tabs" hidden />
<input id="tab4" type="radio" name="tabs" hidden />
<nav>
<label for="tab1">标题1</label>
<label for="tab2">标题2</label>
<label for="tab3">标题3</label>
<label for="tab4">标题4</label>
</nav>
<main>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</main>
</div>
</div>
.active {
background-color: #3c9;
color: #fff;
}
.tab-navbar {
display: flex;
overflow: hidden;
flex-direction: column-reverse;
border-radius: 10px;
width: 300px;
height: 400px;
input {
&:nth-child(1):checked {
& ~ nav label:nth-child(1) {
@extend .active;
}
& ~ main ul {
background-color: #f66;
transform: translate3d(0, 0, 0);
}
}
&:nth-child(2):checked {
& ~ nav label:nth-child(2) {
@extend .active;
}
& ~ main ul {
background-color: #66f;
transform: translate3d(-25%, 0, 0);
}
}
&:nth-child(3):checked {
& ~ nav label:nth-child(3) {
@extend .active;
}
& ~ main ul {
background-color: #f90;
transform: translate3d(-50%, 0, 0);
}
}
&:nth-child(4):checked {
& ~ nav label:nth-child(4) {
@extend .active;
}
& ~ main ul {
background-color: #09f;
transform: translate3d(-75%, 0, 0);
}
}
}
nav {
display: flex;
height: 40px;
background-color: #f0f0f0;
line-height: 40px;
text-align: center;
label {
flex: 1;
cursor: pointer;
transition: all 300ms;
}
}
main {
flex: 1;
ul {
display: flex;
flex-wrap: nowrap;
width: 400%;
height: 100%;
transition: all 300ms;
margin: 0;
}
li {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
font-weight: bold;
font-size: 20px;
color: #fff;
}
}
}