css选择器

css选择器小记

示例：

<div>
    <input type="text" value="test"><br/>
    <input type="text" value="test"><br/>
    <input type="text" value="test"><br/>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
</div> 

1. 属性选择器

<input type="text" value="test">
input[value='test']{
      color: pink;
} 
input[value^='test']{以什么开头
    color: skyblue;
}
input[value$='test']{以什么结尾
    color: skyblue;
}
input[value*='test']{包含什么
    color: skyblue;
}

2. 结构伪类

ul li:first-child{第一个元素
    color: pink;
}
ul li:last-child{最后一个元素
    color: red;
}
ul li:nth-child(2){第几个
    color: green;
}
ul li:nth-child(even){偶数
    background-color: rebeccapurple;
}
ul li:nth-child(odd){奇数
    background-color: rosybrown;
}

ul li:first-of-type{第一个类型为li的元素
    background-color: pink;
}
ul li:last-of-type{最后一个类型为li的元素
    background-color: pink;
}
ul li:nth-of-type(2){第几个
    color: green;
}

3. 组合器

后代选择器——后代所有元素
div input
子选择器——子元素所有
div > input
想领兄弟选择器——紧挨着的元素
input + ul
通用兄弟选择器
input ~ ul

4. 伪元素

li::after {
    content: " ";
    height: 1px;
    width: 100%;
    background-color: yellow;
    display: block;
}
li::before {
    content: " ";
    height: 1px;
    width: 100%;
    background-color: yellow;
    display: block;
}