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也弹出小心的提示,所以这里只给出了我转 ...
随机推荐
- hdu1238 Substrings 扩展KMP
You are given a number of case-sensitive strings of alphabetic characters, find the largest string X ...
- GStreamer插件分类
gst-plugins-base一套小而固定的插件,涵盖各种可能类型的elements; 这些在开发系列期间随着核心变化而不断更新.我们相信分销商可以安全地发行这些插件.人们编写插件应该将他们的代码基 ...
- Linux引导启动顺序
1.所有的__init函数在区段.initcall.init中还保存了一份函数指针,在初始化时内核会通过这些函数指针调用这些__init函数,并在整个初始化完成后,释放整个init区段(包括.init ...
- dgraph 基本查询语法 三
这部分主要是查询块.查询变量.聚合操作 多名称查询 实际上就是类似多个查询数据的拼接 格式: { caro(func: allofterms(name@en, "Marc Caro" ...
- asp.net 导出excel的一种方法
项目用到的一种导出excel 的方法予以记录:(具体的业务类可更具情况替换使用) protected void Export(string filename, List<ComponentCon ...
- Apache和Nginx的Rewrite规则对比
一.Apache的rewrite 1.Rewrite规则简介: Rewirte主要的功能就是实现URL的跳转,它的正则表达式是基于Perl语言.可基于服务器级的(httpd.conf)和目录级的(.h ...
- 测试开发系列之Python开发mock接口（一）
什么是mock接口呢,举个栗子,你在一家电商公司,有查看商品.购物.支付.发 货.收获等等等一大堆功能,你是一个测试人员,测测测,测到支付功能的时候,你就要调用第三方支付接口了,真实支付,直接扣你支付 ...
- centos6 安装GitLab
环境 Requirements 软件 版本CentOS 6.6Python 2.6Ruby 2.1.5Git 1.7.10+Redis 2.0+MySQL GitLab 7-8-stableGitLa ...
- virtualbox centos安装增强工具和问题详解
virtualbox centos安装增强工具和问题详解 VirtualBox 大家都习惯性把它简称为 Vbox ,比 VM 的体积小.开源.速 度快.不过在使用 VirtualBox 在虚拟机中安装 ...
- 如何在MFC DLL中向C#类发送消息
如何在MFC DLL中向C#类发送消息 一. 引言 由于Windows Message才是Windows平台的通用数据流通格式,故在跨语言传输数据时,Message是一个不错的选择,本文档将描述如何在 ...