css伪类选择器

css伪类选择器

/*元素选择器*/

ul {   

padding: 0;

margin: 0;

width: 450px;

border: 1px dashed #666;

padding: 10px 5px;

}

ul:after {  /*子块撑开父块*/

content:'';  /*在子元素尾部添加空内容元素*/

display: block;  /*并设置为块级显示*/

clear:both;   /*清除二边的浮动*/

/*visibility: none;  !*hidden也行*!*/

/*height: 0;*/

/*_height: 1%;  !*针对IE*!*/}

li { list-style: none; /*去掉默认列表项样式*/

float: left;  /*左浮动*/

width: 40px;  /*设置宽度*/

height: 40px; /*设置高度*/

line-height: 40px; /*文本垂直居中*/

text-align: center; /*文本水平居中*/

border-radius: 50%; /*设置边框圆角*/

background: skyblue; /*背景色天蓝*/

margin-right: 5px; /*每个球之间的右外边距*/}

/*:before:在指定选择器之前插入,默认为行内元素*/

ul:before {/*插入文本*/content: 'PHP中文网'; 

/*转为块元素*/ display: block;  }

ul:before {/*转为块元素*/display: block; 

     /*content: url(../html/images/5.jpg);*/

     /*content: '';  */

     /*只有将图片设置为背景才可以设置大小*/

     /*background-image: url(../html/images/5.jpg);*/

     /*background-size:100px 100px;*/

     /*height: 100px; */

/*width: 100px;*/}

/*:after:在指定元素的后面添加元素,默认为行内元素,可以是文本,图像,甚至视频等*/

ul:after {/*content:'www.php.cn';*/

/*color:red;*/}

/*:first-child:选择父元素中的第一个子元素*/

/*注意:当前页面中只有一个ul元素,所以可以省略父级ul*/

ul li:first-child {

background-color: brown;}

/*:last-child:选择父元素中的第一个子元素*/

ul li:last-child {

background-color: lightgreen;}

/*:only-child:选择是当前父元素中的唯一子元素的元素,IE不支持*/

p:only-child {

/*二个div中,只有第一个div中仅有一个e388a4556c0f65e1904146cc1a846bee子元素,所有只选中了第一个div中的e388a4556c0f65e1904146cc1a846bee*/

/*color:red;*/}

/*only-of-type:选择父元素下的唯一的e388a4556c0f65e1904146cc1a846bee元素,与only-child不同之处是指定了子元素的类型(标签名称)*/

p:only-of-type {

/*先把上面的only-child注释掉,执行后你会发现,第三个div中的p也会选中,因为它是指定了p类型的唯一子元素*/

color:red;}

only-child和only-of-type的区别:

1.共同点: 都是选择父元素中的唯一子元素;

2.区别: only-child并不限定子元素的类型,only-of-type:限定了子元素的类型,如必须是p标签

1
2
3
4
5
6
7
8
9
10


我是当前div元素中的唯一子元素


我是当前div元素中的第一个子元素
我是当前div元素中的第二个子元素


我虽然是div下唯一的类型为p的子元素
我是div下的另一个子元素h4

以上是css伪类选择器的详细内容。更多信息请关注PHP中文网其他相关文章！