html伪类选择器入门,css3基础之基本选择器

1,属性选择器

css3中继承了css2中的一般选择器,并且属性选择器有了通配符的概念

1, E[attr^ = "val"]{

//选择元素E且有attr属性，并且属性是以val开头的所有元素;

}

2, E[attr$="val"]{

//选择元素E有属性attr属性,并且属性是以val结尾的所有元素;

}

3, E[attr *="val"]{

//选择元素E有属性attr属性，并且属性包含val的所有元素;

}

2,结构性伪类选择器

1,根选择器 :root{}

:root{

//根选择器,相当于

}

2, :not选择器

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

//选择input不是submit类型的标签

}

3, :empty选择器

//选择元素中没有任何内容的标签

div:empty{

display:none;

}

4, :first-child选择器表示的是选择父元素的第一个子元素的元素E

ul>li:first-child{

//表示选择ul下的第一个li元素

}

5, :last-child选择器选择的是元素的最后一个子元素。

ul>li:first-child{

//表示选择ul下的第一个li元素

}

6, :nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。

其中“n”是其参数，而且可以是整数值(1,2,3,4)，

也可以是表达式(2n+1、-n+5)和关键词(odd、even)，

但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，

选择器将选择不到任何匹配的元素。

ul>li:nth-child(2n-1){

//选择ul的第奇数位置的li元素

}

7, :nth-last-child(n)选择器和前面的“:nth-child(n)”选择器非常的相似，

只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，

从某父元素的最后一个子元素开始计算，来选择特定的元素。

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

//从最后一个开始计算,ul下的最后第五个li元素

}

3, :first-of-type选择器

“:first-of-type”选择器类似于“:first-child”选择器，

不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

.wrapper>div:first-of-type{

background: orange;

//选择div的父元素下的第一个div元素

}

:nth-of-type(n)选择器

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，

不同的是它只计算父元素中指定的某种类型的子元素。

当某个元素中的子元素不单单是同一种类型的子元素时，

使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的

在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，

可以是具体的整数，也可以是表达式，还可以是关键词。

.wrapper > div:nth-of-type(2n-1),

.wrapper > p:nth-of-type(2n){

background: orange;

//选择div的父元素下的第奇数位置的div元素，和父元素下的第偶数位置的p元素

}

last-of-type选择器

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，

不同的是他选择是父元素下的某个类型的最后一个子元素。

.wrapper > div:last-of-type{

background: orange;

//选择div父元素下的最后一个div元素

}

nth-last-of-type(n)选择器

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，

选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，

而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

.wrapper > div:nth-last-of-type(5){

background: orange;

//选择div的父元素下的最后第五个div元素

}

4,表单选择器

在Web的表单中，有些表单元素有可用(“:enabled”)和不可用(“:disabled”)状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

input[type="text"]:disabled{

box-shadow: none;

}

input[type="submit"]:enabled {

background: #eee;

border-color: #eee;

color: #ccc;

}

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

opacity: 1;、

//选择类型为radio的被选的input相邻的span元素

}

::before和::after选择器

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

.clear:before,

.clear:after{

content: ".";

display:block;

height:0;

visibility:hidden;

//visibility可见性为隐藏

}

.clearfix:after{

clear:both;

}

.clearfix{

zoom:1;

}

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

.clearfix:after{

content: "020";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.clearfix {

/* 触发 hasLayout */

zoom: 1;

}

some text