收藏
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
