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也弹出小心的提示,所以这里只给出了我转 ...

随机推荐

cloneNode
VS2015 Release 生成调试信息
- C/C++ > 常规 > 调试信息格式 - C/C++ > 优化 > 优化 > 禁止(/Od) - 链接器 > 调试 > 生成调试信息 > 是 (/ ...
正则表达式matcher.group()用法
本帖转自http://winter8.iteye.com/blog/1463244 group是针对()来说的,group(0)就是指的整个串,group(1) 指的是第一个括号里的东西,group( ...
codeforces1111 简单题【DE】简要题解
D 很显然可以用一个背包算出来凑齐i个位置的方案然后总的答案就是\(dp_{n / 2}\) 然后需要扣掉不符合条件的就是把选出来的数的贡献剪掉的贡献然后注意因为是多重集合的排列,所以需要乘上\( ...
了解ASP.NET Core框架的本质
了解ASP.NET Core框架的本质 ASP.NET Core自身的运行原理和设计思想创建了一个 “迷你版” 的ASP.NET Core框架,并且利用这个 “极简” 的模拟框架阐述了ASP.NET ...
element组件知识点总结
1:单选框与多选框的change事件,html代码 <div id="app"> <div class="demo box"> < ...
C# 使用oledb 方式连接本地或者远程oracel 数据库的方式
对于C# 进行oracle 数据库的开发来说使用oracle 提供的odp.net 方式是比较方便的,同时在性能以及兼容性也是比较好的但是,对于不打算使用的,那么该如何使用oledb 进行连接连接 ...
机器学习Hands On Lab
fetch_data fetch_mldata默认路径是在scikit_learn_data路径下,mnist的mat文件其实直接放置到scikit_lean/mldata下面即可通过fetch_ml ...
[C++ Primer] : 第16章: 模板与泛型编程
面向对象编程(OOP)和泛型编程都能处理在编写程序时不知道类型的情况, 不同之处在于: OOP能处理类型在程序运行之前都未知的情况, 而在泛型编程中, 在编译时就能获知类型了. 函数模板模板是C++ ...
oracle_外部表的两种实现方式oracle_loader[datapump]
外部表可以实现,通过数据库对象直接访问目录文件里的格式数据,加载方式分为两种oracle_loader和oracle_datapump,oracle_loader方式通过sqlldr引擎方式加载,访问 ...

css选择器, first-child,first-of-type

css选择器, first-child,first-of-type的更多相关文章

随机推荐

热门专题