--选择器

选择器

帮助你精准地选中想要的元素

简单选择器

1. ID选择器

2. 元素选择器

3. 类选择器

4. 通配选择器
   *，选中所有的元素

5. 属性选择器
   根据属性名和属性值

/* 选中所有元素 */
*{
    color: crimson;
}

/* 选中所有具有href书写的元素 */
[href=" "]{

}

/* 选中以。。。结尾的元素 */
[href$="。。。"]{

}

li[class] {
    font-size: 200%;
}
/* Item 2  class="a" */
li[class="a"] {
    background-color: yellow;
}
/* Item 3  class="a b" */
li[class~="a"] {
    color: red;
}

<h1>Attribute presence and value selectors</h1>
<ul>
    <li>Item 1</li>
    <li class="a">Item 2</li>
    <li class="a b">Item 3</li>
    <li class="ab">Item 4</li>
</ul>

[大概了解有这个东西，需要用时查看就行]

6. 伪类选择器
   选中某些元素的某种状态

以下四个要按序书写

1. link:超链接未被访问时的状态
2. visited:超链接被访问过后的状态
3. hover:鼠标悬停的状态
4. active:激活状态(鼠标按下状态)

/* link:超链接未被访问时的状态 */
a:link{
    color: cyan;
}

/* visited:超链接被访问过后的状态 */
a:visited{
    color: rgb(177, 45, 45);
}

/* hover:鼠标悬停的状态 */
a:hover{
    color:rgb(219, 171, 48);
}

/* active:激活状态(鼠标按下状态)  */
a:active{
    color:rgb(52, 209, 123);
}

爱恨选择:love hate

7. 伪元素选择器
   生成并选中某个元素内部的第一个子元素或最后一个子元素

• before
• after

span::before{
    content: "《";
    color: darkorange;
}
span::after{
    content: "》";
    color: darkorange;
}

<p>
    <span>橘子不是唯一的水果</span>既是一本书也是一部电影
</p>

选择器的组合

p.red.big.center----<p class="red big center"></p>

1. 并且
2. 后代元素 —— 空格
3. 子元素 —— >
4. 相邻兄弟元素 —— +
5. 后面出现的所有兄弟元素 —— ~

后代选择器	    article p	
子代选择器	    article > p	
相邻兄弟选择器	h1 + p	    
通用兄弟选择器	h1 ~ p	    

选择器的并列

多个选择器，用逗号分隔
语法糖