-
123456789查看全部
-
着重看
这一节内容查看全部 -
1、属性选择器：
例如：a[class^="val"]{}
匹配class的值是以val开头的字符串
a[class$="val"]：匹配以val结尾的字符串
a[class*="val"]：匹配class任意位置包含val的字符串
2、结构伪类选择器：:root
:root{background:orange}
等同于
html{background:orange}
3、否定选择器：:not
例如：
input:not([type='submit']){
}//除type为submit剩下的所有的input框
4、表示为空：:empty
用来选择没有任何内容的的元素，这里的没有内容指连空格也没有，经常用于吧没有任何内容的元素隐藏起来
:empty{
display:none;
}
5、目标选择器：:target
主要用于点击标题，跳转到相对应的内容处，内容格式可以改变，比如加粗或添加背景色等，a标签href中要写#brand（这个名字随意起，但是要和后面对应），div内容里面的id为brand
<h2>< a href="#brand">Brand</ a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
注意：当有多个url时：
<h2>< a href="#brand">Brand</ a></h2>
<div class="menuSection" id="brand">
content for Brand
</div>
<h2>< a href="#jake">Brand</ a></h2>
<div class="menuSection" id="jake">
content for jake
</div>
<h2>< a href="#aron">Brand</ a></h2>
<div class="menuSection" id="aron">
content for aron
</div>
#brand:target {
background: orange;
color: #fff;
}
#jake:target {
background: blue;
color: #fff;
}
#aron:target {
background: red;
color: #fff;
}
6、结构性伪类选择器：:first-child
表示父元素的第一个子元素
ul>li:first-child{
color:red;
}
7、结构性伪类选择器：:last-child
表示父元素的最后一个子元素
ul>li:last-child{
color:red;
}
8、结构性伪类选择器：:nth-child(n)
用来定位某个父元素的一个或多个特定的子元素，n是参数，可以是整数（1,2,3,4），也可以是表达式(2n+1)、和关键词(odd，even),注意，参数的起始值始终是1，不是0。
9、结构性伪类选择器：:nth-last-child(n)
从其父元素的最后一个子元素开始计算，来选择特定的元素
例如：ul>li:nth-last-child(5)选择的就是倒数第5个元素
10、:first-of-type
类似于“:first-child”选择器，不同之处是指定了元素的类型，主要用来定位一个父元素下的某个类型的第一个子元素
例如：
.wrapper > p:first-of-type{
Background:orange;
}
11、nth-of-type(n)
类似于“:nth-child(n)”选择器，只计算父元素中指定的某种类型的子元素。
12、:last-of-type
类似于“first-of-type”,选择的是父元素下某个类型的最后一个子元素
13、:nth-last-of-type(n)
类似于“:last-of-type”选择器
父元素下指定某个子元素的类型，但是起始方向是从最后一个子元素开始
14、:only-child
父元素中只有一个子元素，而且只有唯一的一个子元素
15、:only-of-type
来选择一个元素是它的父元素的唯一一个相同类型的子元素,另一种说法是
表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素.
查看全部 -
box-shadow:像素值1 像素值2 像素值3 像素值4 颜色值 阴影类型查看全部
-
3&4
.nav li:after{
position:absolute;
content:"|";
right:0;
color:#fff;
}
.nav li:last-child:after{
content:"";
}
查看全部 -
添加多个阴影，只需用逗号隔开
查看全部 -
css3浏览器兼容前缀
-webkit chrome和safari
-moz firefox
-ms IE
-o opera
查看全部 -
opacity 不透明级别
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—not</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="#">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" placeholder="John Smith" />
</div>
<div>
<label for="name">Password Input:</label>
<input type="text" name="name" id="name" placeholder="John Smith" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>
查看全部 -
zoom：1 放大一倍
clearfix 清除浮动
visibility 可见度 ：hidden隐藏
border-radius:100px / 10px; 相当于
border-radius: 1em/5em;
/* 等价于： */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;
查看全部 -
transform:rotate(10deg) 旋转十度
transform:skew(10deg) 倾斜十度
transform:scale(1.5) 扩大1.5倍 缩小为负数
transform:translate(100px,0） 向右移动100px 上为0 下左移用负数
-webkit-transform:rotate(10deg); webkit moz o ms 表示浏览器兼容代码
查看全部 -
ol>li:nth-child(-n+2):nth-child(n+1){
background: orange;
}
此运算结果为前两项变色，先运算-n+2，得出结果为第二运算的n，再n+1.二次运算加上的数只能小于第一次运算所加的数。
如前面是-n+2,二次运算只能+-n+1.
查看全部 -
练习？
查看全部 -
使用伪类元素制作渐变分割线并删除第一和最后一个分割线？
查看全部 -
background-clip同background-origin，一个是裁剪一个是全部展示，所用元素相同
查看全部
举报