[TOC]
#### 元素选择器
div>p 选择父元素为 <div> 元素的所有 <p> 元素。
p~ul 选择前面有 p>元素的每个 ul 元素。
div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。
<style type="text/css">
/*选择的是#hd里的儿子辈的p标签*/
/*#hd>p{
color: red;
font-size: 25px;
}*/
/*选择的是紧邻在#one后面的p标签*/
/*#one+p{
color: red;
font-size: 25px;
}*/
/*选择的是#one后面所有同级的p标签*/
/*#one~p{
color: red;
font-size: 25px;
}*/
/*选择的是#hd里有id属性的p标签,不论id是多少,只要有id属性就行!*/
/*#hd p[id]{
color: red;
font-size: 25px;
}*/
/*选择的是#hd里name属性值是shuai的元素*/
/*#hd p[name=shuai]{
color: red;
font-size: 25px;
}*/
/*选择的是#Hd里id属性以o开头的p标签*/
/*#hd p[id^=o]{
color: red;
font-size: 25px;
}*/
/*选择的是#hd中id属性以e结尾的p标签*/
/*#hd p[id$=e]{
color: red;
font-size: 25px;
}*/
/*选择的是#hd里id属性值中有iv的p标签*/
#hd p[id*=iv]{
color: red;
font-size: 25px;
}
/*选中页面的根元素(html标签)*/
/*:root{
background: red;
}*/
/*选择的是#hd里空的p标签*/
/*#hd p:empty{
width: 200px;
height: 40px;
background: blue;
}*/
/*选择#hd里所有的p标签,排除掉id是one的*/
/*#hd p:not(#one){
width: 200px;
height: 40px;
background: blue;
}*/
/*择用户被选取的部分*/
p::selection{
background: green;
color: white;
}
p::-moz-selection{
background: green;
color: white;
}
火狐 -moz-
谷歌 -webkit-
ie -ms-
opera -o-
</style>
<div id="hd">
<p>后盾人 人人做后盾0</p>
<p id="one">后盾人 人人做后盾1</p>
<p>后盾人 人人做后盾2</p>
<p name='shuai'>后盾人 人人做后盾3</p>
<p>后盾人 人人做后盾4</p>
<p id="five">后盾人 人人做后盾5</p>
<p>后盾人 人人做后盾6</p>
<p>后盾人 人人做后盾7</p>
<div>
<p>我们也是p标签</p>
<p>我们也是p标签</p>
<p>我们也是p标签</p>
</div>
</div>
:target #news:target 选择当前活动的 #news
eg:
<a href="#one">第一章</a>
<a href="#two">第二章</a>
<h2 id="one">第一章 朝气蓬勃</h2>
<h2 id="two">第二章 骨文</h2>
#### 伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/index.css" />
<title></title>
<style type="text/css">
/*获取div下面的所有第一个p标签(0,8,12)*/
/*div p:first-of-type{
color: red;
font-size: 25px;
}*/
/*获取div儿子的第一个p标签((0,8,12)*/
/*div>p:first-of-type{
color: red;
font-size: 25px;
}*/
/*获取div下面的所有最后一个p标签(7,10,12)*/
/*div P:last-of-type{
color: red;
font-size: 25px;
}*/
/*获取div儿子的第一个p标签(7,10,12)*/
/*div>P:last-of-type{
color: red;
font-size: 25px;
}*/
/*选择的是独生子的p标签(12)*/
/*不能有任何兄弟元素*/
/*p:only-child{
color: blue;
font-size: 20px;
}*/
/*获取倒数第3个元素（6，8）*/
/*div p:nth-last-child(3){
color: blue;
font-size: 20px;
}*/
/*获取div下面的第三个p标签元素，不管你有几个其他的兄弟元素（2，10）*/
/*div p:nth-of-type(3){
color: blue;
font-size: 20px;
}*/
/*获取div下面的倒数第三个p标签元素，不管你有几个其他的兄弟元素（8，5）*/
/*div p:nth-last-of-type(3){
color: blue;
font-size: 20px;
}*/
/*获取div下儿子的最后一个元素*/
/*div p:last-child{
color: blue;
font-size: 20px;
}*/
/*获取div下儿子的第一个元素*/
/*div p:first-child{
color: blue;
font-size: 20px;
}*/
</style>
</head>
<body>
<div id="hd">
<p>后盾人 人人做后盾0</p>
<p id="one">后盾人 人人做后盾1</p>
<p>后盾人 人人做后盾2</p>
<p name='shuai'>后盾人 人人做后盾3</p>
<p>后盾人 人人做后盾4</p>
<p id="five">后盾人 人人做后盾5</p>
<p>后盾人 人人做后盾6</p>
<p>后盾人 人人做后盾7</p>
<div>
<span>11</span>
<p>我们也是p标签8</p>
<p>我们也是p标签9</p>
<p>我们也是p标签10</p>
</div>
</div>
<div>
<p>我们也是p标签12</p>
</div>
</body>
</html>
#### 文本选择器
:first-letter p:first-letter 选择每个 <p> 元素的首字母。
:first-line p:first-line 选择每个 <p> 元素的首行。
:before p:before 在每个 <p> 元素的内容之前插入内容。
:after p:after 在每个 <p> 元素的内容之后插入内容。
eg:
<style type="text/css">
div{
width: 800px;
margin: 200px;
}
div:before{
content: '123';
}
div:after{
content: '456';
}
/*div:first-line{
color: blue;
font-size: 20px;
}*/
div:first-letter{
color: blue;
font-size: 20px;
}
</style>
<div>后盾 HDPHP 框架是一个为用 PHP 程序语言编写网络应用程序的人员提供的软件包。 提供强大的、完整的类库包，满足开发中的项目需求，HDPHP 框架可以将需要完成的任务代码量最小化，大大提高项目开发效率与质量，当然使用是非常简便、快捷的。高效的核心编译处理机制让系统运行更快，提供丰富的的错误解决方案，让修正代码变得更快速。
做为优秀的框架产品，HDPHP在系统性能上做了大量的优化处理，只为让程序员使用 HDPHP 框架强悍的功能，用最短的时间完成项目的开发。为了便于快速进行项目开发，框架也提供了相应的前端功能组件使程序员从繁琐的组件调试中解脱出来。</div>
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
padding: 100px 200px;
}
ul li{
list-style: none;
line-height: 25px;
font-size: 16px;
position: relative;
padding-left: 20px;
}
/*ul li:after{
content: ' ';
display: block;
width: 5px;
height: 5px;
background: mediumpurple;
position: absolute;
left: 0;
top: 10px;
border-radius: 50%;
}*/
ul li:after{
content: ' ';
display: block;
width: 5px;
height: 16px;
background: mediumpurple;
position: absolute;
left: 0;
top: 5px;
}
</style>
</head>
<body>
<ul>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
<li>后盾人 人人做后盾</li>
</ul>
</body>
</html>
#### 表单选择器
选择器 示例 描述
:focus input:focus 选择获得焦点的 input 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:checked input:checked 选择每个被选中的 <input> 元素。
#### 子选择器
:first-of-type p:first-of-type 选择属于其父元素的首个p元素的每个p元素
:last-of-type p:last-of-type 选择属于其父元素的最后p元素的每个p元素
:only-of-type p:only-of-type 选择属于其父元素唯一的p元素的每个p元素
:only-child p:only-child 选择属于其父元素的唯一子元素的每个p元素
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个元素的每个p元素
:nth-last-oftype(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数
:last-child p:last-child 选择属于其父元素最后一个子元素每个p元素
:first-child p:first-child 选择属于父元素的第一个子元素的每个 p元素
#### RBGA颜色设置
• rgb表示红、绿、蓝、a表示透明度1为不透明，0.5为半透明
示例：
#div1~div {
background: rgba(255,0,0,0.5);
}
#### 字体单位
px:
使用具体像素点为单位，好处是比较稳定和精确。但在浏览器中放大或缩放浏览
页面时会存在一个问题
em:
em是以父级大小为参考的单位。好处是字体可以自适应。但父元素标签发生改
变时字体大小将不确定。
rem：
rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参
考值即可。
示例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
#### 文字样式
属性规定当文本溢出包含元素时发生的事情：
• text-overflow: clip|ellipsis|string;
参数说明：
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
示例：
h2{
width:100px;
overflow: hidden;
white-space: nowrap;/*文字不换行*/
text-overflow:ellipsis;
}
#### 文本阴影
• 向文本添加阴影
语法：text-shadow: h-shadow v-shadow blur color
说明：
h-shadow 水平阴影的位置。允许负值
v-shadow 垂直阴影的位置。允许负值
blur 模糊距离
color 阴影的颜色
示例：
h2{
text-align:center;
text-shadow: 20px 20px 15px red;
}
#### 盒子阴影
• 向元素添加盒子阴影
语法：box-shadow: h-shadow v-shadow blur spread color
说明：
h-shadow 水平阴影的位置。允许负值
v-shadow 垂直阴影的位置。允许负值
blur 模糊距离
spread 阴影的尺寸
color 阴影的颜色
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
margin: 100px auto;
width: 500px;
height: 300px;
background: dodgerblue;
/*box-shadow: -20px -10px 30px 10px red;*/
box-shadow: 0px 0px 30px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
#### 盒子尺寸
• min-width 元素最小可接受的宽度
• max-width 元素最大可接受的宽度
• min-height 元素最小可接受的高度
• max-height 元素最大可接受的高度
#box img{
max-width: 780px;
}
#### 盒子空间
属性允许您以特定的方式定义匹配某个区域的特定元素
box-sizing: content-box|border-box;
参数说明：
• content-box border和padding不计算入width之内
• border-box border和padding计算入width之内，其实就是怪异模式了
#box{
width: 300px;
height: 400px;
border: 4px solid mediumpurple;
margin: 50px auto;
padding-top: 100px;
/*box-sizing: border-box;*/
}
#### 分栏
• column-width 栏宽
• column-count 列数
• column-gap 列间距
• column-rule 分隔线
说明：
-moz是针对firefox的设置，-webkit是针对chrome与苹果
safari的设置
<style type="text/css">
#news{
border: 1px solid mediumpurple;
/*栏宽*/
/*column-width: 400px;*/
/*分栏数量*/
column-count: 6;
/*栏间距*/
column-gap: 50px;
/*分割线*/
column-rule: 2px dotted blue;
}
</style>
#### 更改背景图像大小
background-size:
• 规定背景图像的尺寸
语法：
• background-size:宽度 高度
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html{
width: 100%;
height: 100%;
}
body{
background: url(bg.jpg) no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
</style>
#### 线性渐变 linear-gradient
• 语法：linear-gradient( [<point> || <angle>,]? <stop>,<stop> [, <stop>]* )
示例：
• background: linear-gradient(top right,green,red,blue);
#box{
width: 700px;
height: 400px;
margin: 100px auto;
border: 2px solid mediumpurple;
/*浏览器前缀
火狐 -moz-
谷歌 -webkit-
欧朋(Opera) -o-
IE -ms-*/
/*background: -moz-linear-gradient(left,yellow,blue,green,pink,purple);*/
background: -moz-linear-gradient(top,yellow,blue,green,pink,purple);
/*background: -webkit-linear-gradient(left,yellow,blue);*/
}
//示例：按钮。
<style type="text/css">
#btn{
width: 300px;
height: 50px;
margin: 100px auto;
border: #D27D00 1px solid ;
background: -moz-linear-gradient(top,#F6E6B3,#ED9319);
border-radius: 5px;
</style>
<div id="btn"></div>
#### outline轮廓线
• outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的
外围，可起到突出元素的作用
• 轮廓线不同于边框，不占用空间尺寸。
• 只有在获得焦点或者激活时呈现属性值：
outline-color 规定边框的颜色
outline-style 规定边框的样式
outline-width规定边框的宽度
<style type="text/css">
div{
width: 200px;
height: 400px;
background: dodgerblue;
float: left;
margin: 20px;
}
div:hover{
outline: 3px solid black;
}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
- html&jquery网页特效
- 标签分类及特点
- 关于文字标签
- 网页定时跳转
- css透明度和插件
- 0.前端常用工具
- 1.tab切换效果
- 2.tab切换效果多个代码复用
- 3.百度新闻导航条效果
- 4.解决鼠标移入过快的问题
- 5.滚动条位置
- 6.元素尺寸
- 7.全选反选操作
- 8.固定定位
- 9.开关效果
- 10.节点操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果复用
- 13.固定导航栏效果
- 14.凡客轮播图效果
- 15.顶部下滑广告效果
- 16.京东左右滑动轮播图
- 17.京东左右滑动无缝轮播图
- 18.选择器
- 19.筛选
- 20.开关效果
- 21.滑动效果
- 22.小米商品效果css实现
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介绍&安装
- javascript & css 脚手架
- php常用工具类
- 安装laravel-ide-helper增强代码提示
- 使用migration创建表和数据填充
- 解决mysql5.7以下laravel不能执行数据迁移的问题
- 路由
- 登陆操作自定义模型
- 使用中间件middleware进行登录权限验证
- 进行表单验证处理
- 使用laracasts-flash定制消息提示
- 资源路由
- 宝塔面板安装fileinfo扩展
- laravel上传处理与使用hdjs快速实现前端上传组件
- thinkphp
- phpstorm
- phpstorm安装插件
- 定义快捷键
- 关闭提示
- 将代码实时同步到远程服务器
- sublime
- composer
- git使用
- git安装和配置作者信息
- git新建项目和维护项目
- git日志操作
- git别名操作
- git分支操作
- git生成发布压缩包
- git系统别名
- gitrebase操作
- 使用SSH与GITHUB远程服务器进行无密码连接
- 本地版本库主动使用remote与远程GITHUB进行关联
- 本地分支与GITHUB远程分支同步
- 项目实战-新入职员工参与项目开发时分支使用
- 自动部署
- ios开发
- linux
- 1.centos6.5 mysql忘记登入密码
- html5
- 标签
- 表单
- 音频与视频
- webstorage储存
- canvas
- css3
- 01.CSS3布局
- 02.transition动画
- 03.animation动画
- 04.flex弹性盒模型
- Less
- gulpjs
- es6
- ES6模块化
- let和const命令
- ES6函数扩展&解构赋值
- JavaScript之数据遍历
- class类
- Set和Map数据结构
- Vue
- 1.创建第一个应用
- 2.属性动态绑定
- 3.表达式
- 4.解决phpstorm不识别ECMASCRIPT6语法的问题
- 5.watch监听属性
- 6.使用object与array控制class
- 7.条件渲染
- 8.循环
- 9.变异方法
- 10.事件
- 11.表单
- 12.组件
- 13.css过渡动
- 14.js库控制vue过渡动作
- 15.自定义指令directive
- 16.使用vue-cli初始化单页面应用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs