基本选择器介绍

选择器

选择器的功能：
选中要添加样式的标签元素。

1.元素选择器

1.1标签选择器

什么是标签选择器？
通过标签名直接选择相应的标签。
不管有多复杂的嵌套关系，标签的位置就算藏得很深，依然可以被标签选择器命中。
格式：标签名{
声明;
}
标签选择器的作用：
1.利用标签选中所有的特性，进行默认样式的清除。
2.复杂选择器中一部分使用。

 div {
            color: red;
        }

1.2.ID选择器

ID选择器作用：
选中页面中唯一的一个标签。

格式：#ID值{
声明;
}
【注】：
1.id值必须是唯一的，在一个页面中只能出现一次。如果多次出现重复的ID值是不符合规范的。
2.所有的标签都有ID属性。ID命名的规范：由字母，下划线，中划线，数字组成。不能以数字开头。
3.见名知意。不要起毫无意思的名字。
4.驼峰写法：SearchButton(大驼峰) searchButton(小驼峰，推荐) 多个单词，从第二个单词开始，每个单词的首字母大写。
5.下划线写法：search_button 多个单词，从第二个单词开始，每个单词的前面添加一条下划线。
【注】：id选择器尽量不要在css中使用，而是配合js使用。

#div1 {
            background-color: seagreen;
        }

1.3.类标签选择器

类选择器：
通过标签中的class属性来选择标签

格式：
.class值{
声明;
}
优点：可以选择一部分标签，设置相同的样式。
【注】
1.class值可以不唯一。类选择器选中的是拥有相同class值得标签元素。
2.一个标签可以拥有多个class值。
3.命名规则与ID相同。（由字母，下划线，中划线，数字组成。不能以数字开头。）
类写样式，ID写行为。

        .p1 {
            color: blue;
        }

1.4.通配符

*:表示选中所有标签。（包含body标签。）
慎用。
使用场景：
清除默认的样式。
现在已经不常用了，因为效率不高。
一刀切，所有的标签都会去执行一次css代码。

* {
            background-color: yellowgreen;
        }

2.关系选择器

2.1.后代选择器

通过标签的嵌套关系，来缩小选择范围，在范围内查找相关的元素。

格式：选择器1 选择器2{
声明;
}
选择器1必须是选择器2的祖先元素。
IE7开始兼容，IE6不兼容。
【注】
1.定义时，选择器之间使用空格隔开。空格左侧必须是右侧的祖先元素。
2.当要把某些元素中的某些元素进行样式修改时，就要想要使用后代选择器。

   div p span {
            color: turquoise;
        }

2.2.子代选择器

通过标签间的嵌套关系，来选中相应标签的子元素。
格式：
选择器1>选择器2{
声明;
}
【注】>左右两边的关系必须是父子关系。

p>span {
            border: 3px solid blueviolet;
        }

2.3.相邻选择器

格式：
选择器1+选择器2{
声明;
}
选择紧贴在选择器1元素之后的选择器2元素，两者必须同属于一个父级。
【注】IE7兼容，IE6不兼容。

        h3+p {
            background-color: red;
        }

2.4兄弟选择器

同属于一个父级。

语法格式：
选择器1 ~ 选择器2{
声明;
}
选中的是选择器1元素之后的所有同级的选择器2元素。

2.5.交集选择器

既满足条件1，又满足条件2.
格式：
选择器1选择2{
声明;
}
【注】
1.交集选择器如果是标签选择器与类选择器的混写，则必须将标签选择器放在前面。
2.连续交集 既满足条件1，又满足条件2，还满足条件3.

span.nav {
            background-color: tomato;
        }

2.6.并集选择器

格式：选择器1，选择器2{
声明;
}
选择器之间使用逗号进行分割。
可以避免代码冗余

 div,
 p,
 h2 {
      font-weight: 700;
    }

3.伪类选择器

3.1.序选择器

:first-child（与nth-child(1)效果）
判断当前元素是否为父元素的第一个子元素，如果是，则选中。
:last-child（与nth-child(n:父元素中最后一个元素序号)效果）
判断当前元素是否为父元素的最后一个子元素，如果是，则选中。
:only-child
判断当前元素是否为父元素的唯一一个子元素，如果是，则选中。
【类似】
E:first-of-type
判断当前E元素是否为父元素下的E元素中得第一个E元素，如果是，则选中。
E:last-of-type
判断当前E元素是否为父元素下的E元素中得最后一个E元素，如果是，则选中。

li:first-child {
            color: blue;
        }
        
li:last-child {
            color: blueviolet;
        }
        
span:only-child {
            background-color: brown;
        }

３.２ :nth-child选择器

语法格式：
n表示父元素下的第几个且为E的子元素。
E：nth-child（n）{
声明;
}

3.3 :nth-of-type

格式：
E：nth-of-type(n){
声明;
}
选中父元素下的同类型中的第n个元素
【注】
1.要使该属性生效，E必须是某个元素的子元素，E的父元素最高可以是html。
2.该选择器命中的是父元素中的第n个为E的子元素，不管第n个子元素是否为E.

/* 父元素下子元素为P元素的第2个*/
p:nth-of-type(2) {
            color: red;
        }

3.4:not(s)选择器

格式：
E:not(s)
匹配不含有s选择符的元素E。

3.5:empty选择器

匹配没有任何子元素（包括text节点）的元素E。

4.属性选择器

4.1E[att]

选择具有att属性的E元素。

4.2E[att=“val”]

选择具有att属性且属性值等于（且只等于）val的E元素。

4.3E[att~=“val”]

选择具有att属性且属性值中有一个为val的E元素

4.4E[att^=“val”]

选择具有att属性且属性值为以val开头的字符串的E元素

4.5E[att$=“val”]

选择具有att属性且属性值为以val结尾的字符串的E元素

4.6E[att*=“val”]

选择具有att属性且属性值为包含val的字符串的E元素。

4.7E[att|=“val”]

元素E拥有att属性，并且值唯一，为val，或者值是以val-开头的，那么E将会被选择

5.伪类

同一个标签，根据不同的状态，拥有不同的样式，这就叫做“伪类”。伪类使用：（冒号）来表示。
格式：
选择器：伪类名{
声明;
}
伪类选择器大致可分为两种：
（1）静态伪类 只能用于超链接的样式。
：link 超链接点击之前（href属性中属性值为具体网址的有效）
：visited 超链接被访问过之后。
（2）动态伪类 针对所有的标签都适用
：hover “悬停” 鼠标放在标签上时。
：active “激活” 鼠标点击标签，不松手时。
(3)特殊 针对表单元素。
：focus 是某个标签获得焦点时的样式。

对于a标签有4种伪类，对应四种状态
：link 点击之前
：visited 访问之后
：hover 鼠标悬停
：active 激活 鼠标点击不动时。
四种同时使用时的使用顺序：
link visited hover active lvha (爱恨准则) lv = love ha = hate
a:link,a:visisted 一般都是可以省略的，简写在a标签中。一般只需要写a{}，a:hover{}（尽量两者不同时使用）

/* a:link{}与a{}区别
      a:link{}只对href属性中属性值为具体网址的有效（锚点也无效）
      a{}对无论是否有href属性或者href属性中属性值是不是具体网址都有效
  */
a:link {
      color: gray;
  } 
a {
      color: red;
  }