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也弹出小心的提示,所以这里只给出了我转 ...
随机推荐
- TX2平台CAN总线收发功能的测试
前言 项目实现过程中需要将获取的数据信息通过CAN总线传输到控制规划模块,本文主要介绍如何在TX2平台测试CAN总线的收发功能. TX2是英伟达旗下为嵌入式平台人工智能应用开发出的一个硬件平台,TX1 ...
- 安装依赖库的方法-linux
前言 使用linux系统的过程中,项目可能需要用到各种依赖库或者工具包,本文对库或者包的安装方法进行概述. 具体方法 如何安装各种依赖库或者工具包:1)直接使用apt-get install进行安装, ...
- opencv2.4.10与VS2013的环境配置
前言 项目几乎都是图像相关的,一般都会用到opencv开源库,就涉及到windows下opencv的环境配置问题,本文对此进行介绍. 环境 系统环境:win10_x64(其他windows系统类似); ...
- JPEG文件格式
格式:JFIF(JPEG档的交换格式)压缩:JPEG(灰阶影像压缩比约为10:1:彩色影像约为20:1)以JPEG文件格式保存的图像实际上是2个不同格式的混合物:JPEG格式规范本身,用来定义图像的压 ...
- 【问题】PPS、PPSX自动放映格式打开直接进入编辑模式
在做自动放映格式的PPT的时候,发现另存为PPS或PPSX格式后,自动放映无法实现,而是直接进入了PPT编辑模式,于是开始寻找原因.发现是文件关联有问题,这与安装多个版本的ppt有关系. 解决办法: ...
- hdu1301 Jungle Roads 最小生成树
The Head Elder of the tropical island of Lagrishan has a problem. A burst of foreign aid money was s ...
- ES6必知必会 （一）—— 变量声明和结构赋值
本文章属于个人对es6一些比较常用的语法的总结归纳,其主要参考阮一峰大神的<a href="http://es6.ruanyifeng.com//">ECMAScrip ...
- FormData 知识点
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因此可以独立于表单使用. 如果你把表单的编码类型设置为multipart/for ...
- loadrunner 函数解释
一.lr_save_string 使用介绍1.该函数主要是将程序中的常量或变量保存为lr中的参数.格式: //将常量保存为参数lr_save_string("777"," ...
- golang fmt用法举例
下标与参数的对应 例子如下: package main import ( "fmt" ) func main() { num := 10 fmt.Printf("num: ...