CSS3学习笔记<1>

CSS3学习

border-radius：25px 圆角

box-shadow: 10px 10px 5px #888888; 阴影

属性选择器

CSS3新增三个

a[class^=icon]{

background: green;

color:#fff;

}

a[href$=pdf]{

background: orange;

color: #fff;

}

a[title*=more]{

background: blue;

color: #fff;

}

:root {

background:orange;

}

:root等同于 .html

:not 否定选择器

form {

width: 200px;

margin: 20px auto;

}

div {

margin-bottom: 20px;

}

input:not([type=”submit”]){

border:1px solid red;

}

:empty空选择器

p{

background: orange;

min-height: 30px;

}

p:empty {

display: none;

}​

:targer目标选择

HTML代码：

<h2><a href="#brand">Brand</a></h2>

<div class="menuSection" id="brand">

content for Brand

</div>

CSS代码：

.menuSection{

display: none;

}

:target{/*这里的:target就是指id="brand"的div对象*/

display:block;

}

如果是多个url

#brand:target {

background: orange;

color: #fff;

}

#jake:target {

background: blue;

color: #fff;

}

#aron:target {

background: red;

color: #fff;

}

first-child选择子代第一个元素

ol > li:first-child{

color: red;

}

last-child最后一个

nth-child(n)

用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

nth-last-child(n)

ol > li:nth-last-child(5){

background: orange;

}

:first-of-type

类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

/*我要改变第一个段落的背景为橙色*/

.wrapper > p:first-of-type {

background: orange;

}

nth-of-type类似

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

.post p:only-child {

background: orange;

}

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

:enabled和disabled

input[type="text"] :enabled{

border: 1px solid #f36;

box-shadow: 0 0 5px #f36;

}

input[type="text"]:disabled{

box-shadow: none;

}

:checked

设置选择框选中的样式

input[type="checkbox"]:checked + span {

opacity: 1;

}

可以做出好看的选中效果（如打钩，中间标点）

“::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示

::-moz-selection {

background: red;

color: green;

}

::selection {

background: red;

color: green;

}

火狐需要moz-selection

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

input[type="text"]:-moz-read-only{

border-color: #ccc;

}

input[type="text"]:read-only{

border-color: #ccc;

}

read-write相反

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动。

.clearfix::before,

.clearfix::after {

content: ".";

display: block;

height: 0;

visibility: hidden;

}

.clearfix:after {clear: both;}

.clearfix {zoom: 1;}

当然可以利用他们制作出其他更好的效果，比如右侧中的阴影效果

.effect::before, .effect::after{

content:"";

position:absolute;

z-index:-1;

-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);

-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:50%;

bottom:0;

left:10px;

right:10px;

-moz-border-radius:100px / 10px;

border-radius:100px / 10px;

}

上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效。