CSS选择器

---

一、ID

#content{}

二、Class

.content{}

三、标签

p{}
h1{}

四、子选择器

<div class="parent">
  <div class="child">
    child
    <div class="son">son</div>
  </div>
  <div class="child">
    child2
    <div class="son">son2</div>
  </div>
</div>
<style>
//只会作用到child的元素上
.parent>div{
  border: 1px solid;
}
</style>

五、相邻同胞选择器

<div class="parent">
  <div class="child">
    child3
    <div class="son">son3</div>
  </div>
  <div class="child first-child">
    child
    <div class="son">son</div>
  </div>
  <div class="child">
    child2
    <div class="son">son2</div>
  </div>
</div>
<style>
//只会作用到first-child的元素后面的相邻元素
.first-child+div {
  background: red;
}
</style>

六、属性选择器

<div zzc="type" class=""> 属性1</div>
<style>
// zzc属性值是type的元素
div[zzc="ad"] {
  color: coral;
}
// zzc属性值是ty开头的元素
div[zzc^="ty"] {
  color: red;
}
// zzc属性值是pe结尾的元素
div[zzc$="pe"] {
  color: red;
}
// zzc属性值只要有ty的元素
div[zzc*="ty"] {
  color: red;
}
// zzc属性有ty独立的就行  和*区别是 *是连续的单词包含也行
//比如 <div zzc="ty type" class="">属性1</div>
div[zzc~="ty"] {
  color: red;
}
// zzc属性以ty开头然后有-拼接
//比如 <div zzc="ty-pe" class="">属性1</div>
div[zzc~="ty"] {
  color: red;
}
</style>

七、空元素选择器

li:empty { 
  display: none;
}

八、:nth-child() 选择器(奇偶数)

/* 2n-1和odd是奇数  2n和even 是偶数*/
li:nth-child(even) {
color: red;
}
/* 最后一个li */
li:nth-last-child(1){}

九、:nth-of-type() 选择器

/* 找html底下的元素为li的第二个  */
html li:nth-of-type(2) {}

十、:not()排除选择器

/* ul底下的前三个li排除第一个和第二个 字体颜色变红  */
.main>ul li:nth-child(-n+3):not(:nth-child(2)):not(:first-child) {
  color: red;
}

十一、input 必填选择器

/* 必填 */
input:required {}

十二、input 非必填选择器

/* 必填 */
input:optional {}

十三、input 不满足条件（无效）

/* 不满足条件（无效） */
input:invalid {} 

十三、input 满足条件（有效）

/* 满足条件（有效） */
input:valid {} 

十四、input 禁用条件

/* 禁用 */
input:disabled {}

十五、段落的第一个字符

/* 段落的第一个字符 */
p::first-letter{
  color: red;
}

十六、段落的第一行

p::first-line{}

十七、伪元素

ul::before {
content: '内容';
color: red;
}
ul::after {
content: '内容';
color: red;
}

十八、权重

1000 行内样式
0100 id
0010 class,属性选择器，伪类选择器
0001 标签，伪元素
0000 * 

CSS优先级
important 优先级最高
内联样式
id选择器
class选择器（越具体的优先级越高）nth-child(1)
通用选择器（*），子选择器（>）， 相邻同胞选择器（+）
同级 后面的会覆盖前面的