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

随机推荐

Linux下你需要了解的10个网络和监控命令
我下面列出来的10个基础的每个linux用户都应该知道的网络和监控命令.网络和监控命令类似于这些: hostname, ping, ifconfig, iwconfig, netstat, nsloo ...
HihoCoder - 1886 ：中位数2（贪心）
描述对于一个长度为n的数列A,我们如下定义A的中位数med(A): 当n是奇数时,A的中位数是第(n+1)/2大的数:当n是偶数时,A的中位数是第n/2大的数和第n/2+1大的数的平均值. 同时,我 ...
SUST OJ 1642: 绝地求生—死亡顺序
1642: 绝地求生-死亡顺序时间限制: 1 Sec 内存限制: 128 MB提交: 81 解决: 53[提交][状态][讨论版] 题目描述最近陕西科技大学六公寓的小东同学深深的入迷了一款游戏 ...
动态绑定AJAX，获取下级分类并延迟执行
HTML: <div id='allType'> <div class='allTypeHead'><span>所有分类</span></div& ...
laravel5.3 源码分析 Passport
laravel5.3,密码模式的授权认证过程.我会通过两部分内容分享以及查看passport的认证流程分享出来第一部分:根据官方文档,通过Composer安装Passport 文档地址:http:/ ...
Oracle 存储过程了解
简要记录存储过程语法与Java程序的调用方式一存储过程首先,我们建立一个简单的表进行存储过程的测试 createtable xuesheng(id integer, xing_ming varc ...
根据IP获得城市信息(百度API的运用)
/** * 根据IP获取城市 * @param string $ip ip地址 * @return array * http://api.map.baidu.c ...
使用Apriori进行关联分析（一）
大型超市有海量交易数据,我们可以通过聚类算法寻找购买相似物品的人群,从而为特定人群提供更具个性化的服务.但是对于超市来讲,更有价值的是如何找出商品的隐藏关联,从而打包促销,以增加营业收入.其中最经典的 ...
Nginx 下部署 HTTPS 与安全调优
什么是 HTTPS?# HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的 ...
后台调用前台JS（查看客户端IE版本）
1.前端代码 </form> //注意放在form下面<script> function readRegedit() { var obj = n ...

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

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

随机推荐

热门专题