![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
代码
<!DOCTYPE html>
<html>
<head>
<title>常用选择器</title>
<style>
ul { /*标签选择器*/
/*padding: 0;*/
margin:0;
width: 550px;
border:1px dashed #666;
padding: 10px 5px;
}
/*子块撑开父级*/
ul:after {
content: '';
display: block;
clear: both;
}
ul li {
list-style: none;
float: left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
background-color: skyblue;
margin: 5px;
}
#item1{ /*ID选择器用#选择*/
background-color: red;
}
/*类选择器就是class选择器 用.选择*/
.item2{
background-color: pink;
}
/*属性选择器比较多： 根据属性名选择 根据属性值选择 */
ul li[class]{
background-color: green;
}
/*属性选择器比较多： 根据属性值选择 */
ul li[class="item2"]{
background-color: pink;
}
/*属性选择器比较多： 以指定的属性值开头的元素选择 需要^字符*/
ul li[class^="cat"]{
background-color: grey;
}
/*属性选择器比较多： 以指定的属性值结尾的元素选择 需要$字符*/
ul li[class$="pig"]{
background-color: red;
}
/*属性选择器比较多： 以指定的属性值中的子串选择 需要$字符*/
ul li[class*="t"]{
background-color: green;
}
/*后代选择器别名层级选择器*/
body ul li{
border: 1px solid black;
}
/*子选择器*/
ul>li[class$="pig"]{
background-color: greenyellow;
}
/*相邻选择器*/
ul li[class$="pig"] ~ *{
background-color: black;
color: white;
}
/*相邻兄弟选择器*/
ul li[class$="pig"] + li{
background-color: pink;
color: white;
}
/*群组选择器*/
h1, p {
font-size: 2rem;
font-weight: lighter;
margin: 0;
}
/*伪类选择器 链接*/
a {
font-size: 2rem;
}
/*访问前*/
a:link {
color: red;
}
/*访问后*/
a:visiret{
color: orange;
}
/*获取焦点时*/
a:focus{
color: purple;
}
/*鼠标悬停时*/
a:hover{
color: green;
}
/*鼠标点击时*/
a:active{
color: blue;
}
/*伪类选择器: 位置*/
/*选择集合中的第一个元素*/
ul li:first-child {
background-color: #efefef;
background-color: #efefef!important;
}
/*伪类选择器: 位置*/
/*选择集合中的最后一个元素*/
ul li:last-child {
background-color: #efefef;
background-color: #efefef!important;
}
/*指定位置选择*/
ul li:nth-child(5){
background-color: red;
}
/*指定偶数选择*/
ul li:nth-child(2n){ /*偶数nth-child(2n) 奇数nth-child(2n+1) 快捷选择偶数 even 奇数odd*/
background-color: pink;
}
/*伪类选择器: 根据子元素数量*/
/*选择具有唯一子元素的元素*/
ol:only-child {
background-color: lawngreen;
}
/* 选择指定类型的唯一子元素 */
ol li:only-of-type {
background-color: lawngreen;
}
/* 倒数选择指定位置的元素 */
ul li:nth-last-child(3) {
/*将倒数第3个小球变色,实际上第8号球*/
background-color: wheat!important;
}
/*选择指定父级的第二个<li>子元素*/
ol li:nth-of-type(2) {
background-color: wheat;
}
:empty {
width: 220px;
height: 270px;
background-color: pink;
}
:empty:after {
content: '看见了吗'
}
:empty:before {
content: url("../0814/images/dog.jpg");
}
</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>
<h1>css选择器</h1>
<p>css选择器非常重要,对于后面的jquery学习至关重要</p>
<a href="http://www.php.cn">PHP中文网</a>
<ol>
<li>列表现1</li>
</ol>
<ol>
<li>列表现1</li>
<li>列表现2</li>
<li>列表现3</3li>
</ol>
<ol>
<li>列表现1</li>
<li>列表现2</li>
<li>列表现3</li>
<li>列表现4</li>
</ol>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结
