css选择器, first-child,first-of-type

选择制定的classname

var li = $('.list-tab-group li.active');

<ul class="list-tab-group">
     <li class="acive"></li>
     <li></li>
     <li></li>
</ul>

1.通用元素选择器选中所有的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         /*去掉块与块之间的间隙*/
        *{
            margin: 0;
            padding: 0;
        }       
    </style>
</head>
<body>
            <div style="height: 50px;color: orangered;background: cadetblue;">测试通用元素匹配</div>
            <div style="color: orangered;">测试通用元素匹配</div>
            <p style="color: orangered;">测试通用元素匹配</p>
            <span style="color: orangered;">测试通用元素匹配</span>
</body>
</html>

效果都被 * 选中，去掉间隙。之前和之后

2.元素选择器选择所有相同的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*2.元素选择器，对选中 相同 的元素设置相同的样式 ex:选各种所有div元素*/
        div{
            background: green;
        }
    </style>
</head>
<body>
        <!--1.通用元素选择器 * 匹配任何元素-->
            <div>测试通用元素匹配</div>
            <div>测试爸爸
                <div>测试通用元素匹配</div>
            </div>
</body>
</html>

效果，所有的div元素被选中，设置背景色green

3.class选择器可以同时选取不同的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*3.class选择器 可以选取 不同 的元素*/
        .tycs {
            height: 50px;
            width: 140px;
            background: deeppink;
        }
    </style>
</head>
<body>
            <div class="tycs">测试通用元素匹配1</div>
            <p class="tycs">测试通用元素匹配2</p>
            <span class="tycs">测试通用元素匹配3</span>
</body>
</html>

效果所有的class同名被选中设置属性，最后一个是span元素不支持设置宽高

4.id选择器 id唯一选中指定的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*4.id选择器 id是唯一的 选中指定的某个元素*/
        #id_1{
            height: 50px;
            width: 140px;
            background: lightpink;
        }
    </style>
</head>
<body>
            <div class="tycs">测试通用元素匹配1</div>
            <div id="id_1">测试通用元素匹配</div>
            <p class="tycs">测试通用元素匹配2</p>
            <span class="tycs">测试通用元素匹配3</span>
</body>
</html>

效果只有id=id_1的被选中设置属性

5.群组选择器组员之间用逗号","隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*群组选择器 组员之间用逗号","隔开*/
        div,span,p{
            background: olivedrab;
        }
    </style>
</head>
<body>
    <div>第一</div>
    <span>第二</span>
    <p>第三</p>
    <p>第四</p>
</body>
</html>

效果所有的组员被选中，设置背景 span特殊由自身的内容撑开宽度和高度，所以。。。

6.相邻选择器用加好+连接只选中最后的邻居

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*6.相邻选择器 用加好+连接 只选中最后的邻居*/
        div+div+span{
            background: red;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <span>3</span>
    <p>4</p>
</body>
</html>

效果选中邻居span

7.兄弟选择器用 ~ 连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*7.兄弟选择器 用 ~ 连接*/
        div~div~span{
            background: darkslategray;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <span>3</span>
    <p>4</p>
</body>
</html>

效果 div~div~span 最终span才是大兄弟啊兄弟可以很多如果在3后面在加个<span>3.1</span> 3.1也会被选中的

8.子代选择器用 > 连接（可以连接儿子的儿子...）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div>div{
            background: forestgreen;
        }
    </style>
</head>
<body>
            <div>测试通用元素匹配</div>
            <div>测试爸爸
                <div>爸爸的儿子</div>
            </div>
</body>
</html>

效果看！真的是儿子，是谁的啊？绿？

9.后代选择器空格连接和子代选择器类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*9.后代选择器 空格连接*/
        div div{
            background: darkgreen;
        }
    </style>
</head>
<body>
            <div>测试通用元素匹配</div>
            <div>测试爸爸
                <div><span>sunzi</span>爸爸的儿子</div>
            </div>
</body>
</html>

效果

10.伪类选择器：前面可以指定名字什么的

注意这设置这四个属性是必须有顺序的 LoVe HAte 爱恨，大写的字母就是顺序
四个元素可以分开写，如果想要设置相同的属性可以写成群组选择器
元素中加入这个属性是去除链接的下划线 text-decoration: none;

- `:link` 匹配所有未被点击的链接
- `:visited` 匹配所有已被点击的链接
- `:hover ` 匹配鼠标悬停其上的元素
- `:active` 匹配鼠标已经在其上按下但是还没有释放的元素

- `hover`拓展
- ```
.box:hover{} 改变元素本身
```
- ```
.box:hover p{} 改变元素下面的p子元素
```
- `cursor`鼠标移入时以何种状态显示
- `defult` 通常是一个箭头
- `wait`光标指示正忙
- `help`光标指示帮助
- `pointer` 小手

一：基本选择器优先级排序（从高到低）

- `#id`{}

- `.class`{}

- `tagName{}

- `*`{}

二：特殊情况

- 级别相同的选择器：后面的样式会覆盖前面的（后来居上）

三：复杂后代选择器

- 比高低顺序依次是：`id` 选择器 `class`选择器 `tanName{}`
- `id`选择器个数不相等，`id`个数越多的优先级越高，后面不用比
- `id`选择器个数相等，则看`class`个数，多的优先级高，后面不用比
- `class`个数相等，再看`tagName`个数
- `#wrap ul li .list{}`和`.wrap ul li #list{}`优先级一样

四：选择器使用原则：准确的选中元素，并且不影响其他元素

first-child 选中父类下的第一个元素，（不管它长得啥样.哪怕不是亲生的，是喊的第一个儿子，就选它，就是这么任性）
first-of-type 指定子类的分类（按名字，武功，法术）中第一个元素，（选出在该行业最拔尖的，哪怕是比懒）

又皮了一下。。happy