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

随机推荐

20155301 2016-2017-2 《Java程序设计》第9周学习总结
20155301 2016-2017-2 <Java程序设计>第9周学习总结教材学习内容总结 JDBC全名Java DataBase Connectivity,是联机数据库的标准规范.具 ...
Codeforces gym101955 A【树形dp】
LINK 有n个大号和m个小号然后需要对这些号进行匹配,一个大号最多匹配2个小号匹配条件是大号和小号构成了前缀关系字符串长度不超过10 问方案数思路因为要构成前缀关系所以就考虑在trie树 ...
Mybatis中parameterType、resultMap、statementType等等配置详解(标签中基本配置详解)
一.(转自:https://blog.csdn.net/majinggogogo/article/details/72123185) 映射文件是以<mapper>作为根节点,在根节点中支持 ...
jquery中not的用法[.not(selector)]
描述: 从匹配的元素集合中移除指定的元素. 如果提供的jQuery对象代表了一组DOM元素,.not()方法构建一个新的匹配元素的jQuery对象,用于存放筛选后的元素.所提供的选择器是对每个元素进行 ...
【知识笔记】Debugging
一.启动调试出现无法启动程序当前状态中是非法 VS工具--选项--调试--常规--启用asp.net的JavaScript调试(chrome和ie)去掉勾选二.web.config中<cu ...
CH4201 楼兰图腾
题意 4201 楼兰图腾 0x40「数据结构进阶」例题描述在完成了分配任务之后,西部314来到了楼兰古城的西部.相传很久以前这片土地上(比楼兰古城还早)生活着两个部落,一个部落崇拜尖刀('V'), ...
nginx php 配置
nginx php 环境的搭建步骤: 1.nginx 配置: server { listen 4446; server_name localhost; location / { root ...
五、概念数据模型(CDM生成LDM,PDM和OOM)
概念数据模型概念数据模型(Conceptual Data Model,CDM):表达的是数据整体逻辑结构,该结构独立于任何软件和数据存储结构,即它只是系统分析人员,应用程序设计人员,维护人员和用 ...
在函数内部定义的函数 this 指向 undefined
在函数内部定义的函数 this 指向 undefined 以下这个 this 就是指向 undefined. 但在非 strict 模式下是指向 window <script> 'use ...
node 知识点
问:局部安装如何使用npm run命令? 答:如果已局部安装了babel-cli(babel-cli自带babel-node命令),package.json文件配置如下: "scripts& ...

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

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

随机推荐

热门专题