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
css选择器, first-child,first-of-type的更多相关文章
- html学习第二天—— 第八章—— CSS选择器
标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...
- 总结30个CSS选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- 30个最常用css选择器解析(zz)
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
- CSS选择器及其优先级
一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...
- HTML+CSS学习笔记（8）- CSS选择器
标签:HTML+CSS 什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{ 样式; } 在{}之前的部分就是"选择器","选择器"指 ...
- 30类css选择器
大概大家都知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相 ...
- 30个最常用css选择器解析
转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远 ...
- [css选择器]总结：IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
随机推荐
- TypeScript 编译器源码研究（一）
TypeScript (以下简称 TS)是一个非常强大的语言,其编译器源码超过 10000 行. 源码在 Github 可以找到:https://github.com/Microsoft/TypeSc ...
- ADC内设与外设的区别
ADCCLK最大等于14,采样周期为1.5. ADC分两个通道组:规则通道组和注入通道组.规矩通道组就相当于正常运行,而注入通道就相当于中断. ADC为模数转换,而DAC则为数模转换.在芯片引脚中,所 ...
- 任务三 简单程序测试及 GitHub Issues 的使用
我提交的Issue 我被提出的Issue 在使用Issue的过程中我发现提出的Issue不能指派任务人和问题类型,被提出的Issue可以. 碰到最多的问题是测试程序的过程中, 比如用户未按指定格式输入 ...
- Ubuntu终端及VI 快捷键
Ubuntu终端 快捷键 功能 Tab 自动补全 Ctrl+a 光标移动到开始位置 Ctrl+e 光标移动到最末尾 Ctrl+k 删除此处至末尾的所有内容 Ctrl+u 删除此处至开始的所有内容 Ct ...
- HPU 1166: 阶乘问题（一）
1166: 阶乘问题(一) [数学] 时间限制: 1 Sec 内存限制: 128 MB提交: 58 解决: 24 统计 题目描述 小H对阶乘!很感兴趣.现在他想知道N!N!的位数,由于NN太大了,所以 ...
- Entities、pads、links 实体、垫、链接
Entities.pads.links 实体.垫.链接 Entities:1.实体由一个struct media_entity实例表示.结构通常嵌入到一个较高级别的结构,例如v4l2_subdev或v ...
- nyoj 三个水杯
三个水杯 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 给出三个水杯,大小不一,并且只有最大的水杯的水是装满的,其余两个为空杯子.三个水杯之间相互倒水,并且水杯没有标识,只 ...
- MOSFET 线路 12V 无法工作的问题（等待回复）
问题: ˇ星空-北京:5V的时候,MOS管可以关断:12V的时候关不断: 初步判断在 Q4 上,先建议按以下方式测量数据. (Excel 文件) 等待回复. 参考链接:http://blog.51ct ...
- 关于事件委托的整理 ，另附bind,live,delegate,on区别
随着DOM结构的复杂化和Ajax等动态脚本技术的运用导致如今的js界里最火热的一项技术应该是‘事件委托(event delegation)’了,什么是事件委托呢?小七给你娓娓道来,说白了就是想给子元素 ...
- JUC线程池之 ThreadPoolExecutor简介
ThreadPoolExecutor简介 ThreadPoolExecutor是线程池类.对于线程池,可以通俗的将它理解为"存放一定数量线程的一个线程集合.线程池允许若个线程同时允许,允许同 ...