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也弹出小心的提示,所以这里只给出了我转 ...
随机推荐
- Markdown的写法
这里只介绍Markdown的书写格式.在github中显示出来. 当你看到下面两张图片时,你会发现区别还是蛮大的. 标题: 首先>就是最左边的那条竖线,但是=(最高阶标题)和-(第二阶标题). ...
- 51Nod：1995 三子棋
1995 三子棋 题目来源: syu校赛 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 小的时候大家一定玩过"井"字棋吧.也就是在 ...
- 《DSP using MATLAB》Problem 4.3
代码: %% ------------------------------------------------- %% 1 x(n)=2δ(n-2)+3u(n-3) %% -------------- ...
- python list 去掉重复元素
貌似用遍历最方便. http://www.cnblogs.com/tudas/p/python-delete-duplicate-element-from-list.html
- hangfire docker-compose 运行
hangfire 是一款基于.net 的任务调度系统 docker-compose 文件 version: '3' services: hangfire: image: direktchark/han ...
- ORACLE与SQL SERVER语法区别
一.数据类型 ORACLE与SQL SERVER在数据类型的对比如下: SQL SERVER ORACLE 数字类型 DECIMAL[(P[, S])] NUMBER[(P[, S])] NUMERI ...
- ASP.NET MVC Area 的使用
MVC提供Area机制,在同一个项目之内就能够切割出不同的ASP.NET MVC网站. 插入:首先在相同的位置,比如说同一个文件夹(如:Controllers)是不能创建俩个相同名称的文件(如:Hom ...
- RAC2——11g Grid Infrastructure的新机制
版权声明:本文为博主原创文章,未经博主允许不得转载. 可以看到,最初CRS(Cluster Ready Services)名词的起源就是因为10.1中作为集群软件的原因.后来经历了Clusterwar ...
- java 报错及解决
java文件编译报错:error: unmappable character for encoding ASCII 解决: 编译时:javac -encoding utf-8 TestJava.jav ...
- Java JDBC连接Oracle
1. 安装Oracle数据库,我这里使用的是Oracle 12c 2. 创建Java工程 connection-oracle 注意:使用的JavaSE-1.8 3. 在Oracle的安装目录里,将dj ...