欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css伪类选择器

程序员文章站 2022-04-02 15:32:45
...
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中仅有一个<p>子元素,所有只选中了第一个div中的<p>*/

/*color:red;*/}

/*only-of-type:选择父元素下的唯一的<p>元素,与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标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.伪类选择器</title>
</head>
<body>
<ul>
<li id="item1">1</li>
<li>2</li>
<li class="green red">3</li>
<li>4</li>
<li>5</li>
<li id="item2">6</li>
<li>7</li>
<li class="php css">8</li>
<li>9</li>
<li>10</li>
</ul>
<div>
<p>我是当前div元素中的唯一子元素</p>
</div>
<div>
<p>我是当前div元素中的第一个子元素</p>
<p>我是当前div元素中的第二个子元素</p>
</div>
<div>
<p>我虽然是div下唯一的类型为p的子元素</p>
<h4>我是div下的另一个子元素h4</h4>
</div>
</body>
</html>

以上就是css伪类选择器的详细内容,更多请关注其它相关文章!