CSS常用选择器

相邻兄弟选择器

第二个元素紧跟在第一个元素之后，并且两个元素同属于一个父级元素。则被选中。

<div>
  <p>Hello World</p>
  <span>Paul</span>
</div>

p + span{
  background-color:red
}

属性选择器

标签中包含指定属性将被选中。

<input value="name"></input>
<input></input>

input[value]{
  border:2px solid red;
}
//标签中有value属性并且属性值为name将被选中
input[value="name"]{
  border:2px solid pink;
}

子代选择器

选中父元素的所有子代元素。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
ul>li {
color: red
}

类选择器

标签中有class属性，使用"."来选择。

<div class="item" >Hello</div>
.item{
font-size: 100px;
color: red;
}

id选择器

标签中带有id属性，使用"#"来选择。id与class的区别是id是唯一的，而class不唯一，可以给很多个标签添加相同的class属性。

<div id="only" >I am Paul</div>
#only {
font-size: 50px;
}

#nth-child选择器
直接上用法：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
li:first-child{
color:blueviolet;
}
li:last-child{
color:aqua;
}
li:nth-child(3){
color:blue;
}

此外，nth-child()选择器里面也可以填写表达式，例如nth-child(n+1)来选择奇数行，nth-child(2n)用来选择偶数行。当然，也可以使用nth-child(odd)来选择奇数行，nth-child(even)来选择偶数行。