<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常用选择器</title>
<style>
/*ul * {一定要加空格*/
ul,ul * {
/*清空默认样式，组选择器和通配选择器*/
margin:0;
padding:0;
}
li{
/*无素选择器，请空所有默认内样式*/
list-style: none;
padding-left: 1em;
}
.red{
/*类选择器*/
color:red;
}
.big{
font-size: 1.5em;
font-weight: bolder;/*加粗显示*/
}
#green {
/*ID选择器*/
color:green;
font-size: 1.5em;
}
ul li{
/*后代选择器，父子选择器*/
text-decoration: underline;/*列表项添加下划线*/
}
#green + li{
/*兄弟选择器,相邻的*/
color:blue;
font-size: 1.5em;
}
li[class]{
/*属性选择器*/
text-decoration: line-through;
}
li[id]{
/*属性选择器，跟据属性名和值*/
background-color: yellow;
}
li[class $="big"]{
/*正则方式属性值*/
/*$以某个单词结尾的属性值*/
background-color: skyblue;
}
ul li:first-child{
/*伪类选择器，第一个*/
background-color: green;
}
ul li:last-child{
/*伪类选择器,最后一个*/
background-color: darkred;
}
ul li:nth-child(2){
/*nth-child任意选择序列号*/
background-color: coral;
}
ul li:nth-child(even){
/*选择所有偶数行*/
background-color: blueviolet;
}
ul li:nth-child(odd){
/*选择所有基数行*/
background-color: aqua;
</style>
</head>
<body>
<h3>购物清单</h3>
<ul>
<li class="red big">香烟</li>
<li>白酒</li>
<li>猪肉</li>
<li class="red ">糖果</li>
<li>带鱼</li>
<li>苹果</li>
<li id="green">炒货</li>
<li>素菜</li>
</ul>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
