选择制定的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