css伪类选择器-css教程-PHP中文网

css伪类选择器

无忌哥哥

发布： 2018-06-28 17:16:14

原创

1947人浏览过

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;

AI封面生成器

专业的AI封面生成工具，支持小红书、公众号、小说、红包、视频封面等多种类型，一键生成高质量封面图片。

108

查看详情

/*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伪类选择器的详细内容，更多请关注php中文网其它相关文章！