收藏
批改状态：合格
老师批语：
网页有3种单位，分别是px、em、rem。px是根据屏幕的，只和屏幕有关，em则是和字体大小有关，字体越大，em越大，而rem则是和根html标记有关，下面是手抄图片：
px是绝对单位，而em和rem都是相对单位，所以一般会用px。
常用的css选择器有很多种，有元素相关和伪类相关的，伪类的选择器就比较多了，以下是常用选择器的案列
<!DOCTYPE html>
<html>
<head>
<title>常用样式选择器</title>
<meta charset="utf-8">
<style type="text/css">
h2,p {font-size:2rem;font-weight:bold;}/*群组选择器，用逗号隔开标记*/
ul {
border: 1px dashed red;
margin:0;
width: 700px;
padding: 10px 5px;
}
ul:after {/* ul:after 在ul子元素尾部插入内容;*/
content:"";
/*color: red;*/
/*clear: both;*/
display: block;
}
ul li {
width: 50px;
height: 50px;
/*float:left;*/
display:inline-block;
border-radius: 50%;
box-shadow:2px 2px 2px #888;
text-align: center;
border:1px solid black;
line-height:50px;
list-style: none;
background:skyblue;
margin-right: 5px;
}
/*id选择器*/
#item1 {
background:white;
}
/*类选择器*/
.item2 {
background: gold;
}
/*属性选择器*/
ul li[class] {
background: blue;
}
/*属性值选择器*/
ul li[class="item2"] {
background: pink;
}
/*属性选择器：指定字符串开头*/
ul li[class^="cat"] {
background: coral;
}
/*属性选择器：指定字符串结尾*/
ul li[class$="pig"] {
background: green;
}
/*属性选择器：指定包含字符串*/
ul li[class*="em"] {
background: gray;
}
/*后代层级派生选择器 空格隔开，可以隔多代*/
body ul li {
border: 1px solid red;
}
/*子选择器*/
ul>li[class$="pig"] {
background: greenyellow;
}
/*相邻选择器 ,不包括起点 ~*/
ul li[class^="ca"] ~ * {
background: lightgreen;
}
/*相邻兄弟选择器 用+号连接相邻得标记*/
ul li[class$="pig"] + li{
background: orange;
}
/*伪类选择器：位置*/
/*第一个子元素first-child*/
ul li:first-child {
background: gold!important;
}
/*最后一个子元素last-child*/
ul li:last-child{
background: blue;
}
/*指定位置子元素nth-child(n)*/
ul li:nth-child(5){
background: purple;
}
/*倒数选择指定位置的元素nth-last-child(n)*/
ul li:nth-last-child(2){
background: wheat;
}
/*选择偶数位置nth-child(2n)*/
ul li:nth-child(2n){
background: yellow;
}
/*奇数位置nth-child(2n+1)*/
ul li:nth-child(2n+1){
background: pink;
}
/*伪类选择器鼠标状态link、visited、hover、action、focus*/
a{
font-size:2rem;
color: coral;
}
a:link{
color: pink;
}
a:hover {
color: green;
}
a:active{
color: red;
}
a:visited{
color: orange;
}
a:focus{
color: gold;
}
/*唯一子元素only-child*/
ol li:only-child{
background:gold;
}
/*限定类型唯一子元素*/
ol li:only-of-type{
background: green;
}
/*指定父级位置的子元素nth-of-type(N)*/
ol li:nth-of-type(2){
background: coral;
}
/*选择页面中的空元素*/
:empty {
width: 600px;
/*height:100px;*/
background:yellow;
}
:empty:after{
content:"看见我了吗";
display:block;
/*clear:both;*/
}
:empty:before{
content: url(monkey.png);
/*float:left;*/
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li>
<li class="item2">2</li>
<li class="cat dog pig">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h2>css选择器很重要</h2>
<p>css选择器很重要，对于后面的学习</p>
<a href="http://www.php.cn">php中文网</a>
<ol><li>列表项</li><p>段落</p></ol>
<ol><li>列表1</li></ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：一般来说，选择器特殊性越低，优先级就会越低。！important优先级最高。
元素的属性选择器有点类似正则表达式，可以精确定位开头、结尾或包含的字符串
a链接有4个常用的伪类：link点击前、hover鼠标悬停、active激活、visited访问后
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
