3-4css常用选择器快速入门

<!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>
相关文章
