哇~这里有最全的css选择器使用规则

要想将css样式应用于html标签，首先要找到该目标标签

在css中，执行这一样式规则的称为选择器

基础选择器

id选择器

id选择器使用‘#’进行标识，后面紧跟html标签的id属性值

一张页面中的html标签的id属性值是唯一的

#mydiv {font-size:12px;color:red;}

页面启动后，该样式会应用在下面的标签元素上

<div id = 'mydiv'>id选择器</div>

类选择器

类选择器使用英文标点'.'进行标识，后面紧跟html标签的class属性进行样式设计

它最大的优势在于可以同时设定相同样式的html标签，例如

.myclass {color:blue;}

该样式应用于下面的html标签

<div class = 'myclass'>类选择器</div>
<p class = 'myclass>段落</p>

限定式选择器

限定式选择器由两个选择器构成

其中一个是标签选择器，另一个是类选择器或者id选择器，中间没有空格

中间是没有空格的，例如：

div#mydiv {...}//id属性为“mydiv”的div标签设置样式
p.myclass{...}//class属性为“myclass”的p标签设置样式

后代选择器

后代选择器用来选择html标签元素的后代的，其写法是将父级标签写在前面，后代标签写在后面，中间用空格隔开，例如：

div p {...} //父亲为div盒子的所有p标签
div #mydiv{...} //父亲为div盒子的所有id属性为‘mydiv’的元素
div .myclass{...}//父亲为div盒子的所有类名为‘myclass’元素

并集选择器

并集选择器是通过逗号将多个选择器连接起来形成的，任何形式的选择器都可以作为并集选择器的一部分，通常使用在某些选择器定义样式完全或者比分形同的情况，例如：

h1,span#myspan,.mydiv {color:pink}//h1,所有id名为myspan的span标签和类名为mydiv的标签设置相同的样式

通配符选择器

通配符选择器用‘*’表示，它是所有选择器中作用范围最广的，能匹配页面中的所有html标签元素

注意：正因为它的作用范围最广能一下子选择所有的标签元素和设置它的样式，才造成了他低效率和缓慢的缺点，不利用搜素搜索引擎优化，不建议使用，解决办法是使用并集选择器

其他特殊选择器

以下举例的内容，其他标签以此类推，重在于理解

选择器	例子	描述
>	div>p	选择父元素为div标签的p标签（p标签必须是div标签的直接子元素）
+	div+p	紧跟在div标签后面的p标签（不是内部，可以理解为兄弟元素）
~	p~ul	选择具有相同父元素中位于p标签之后的ul标签（p和ul属于兄弟元素，他们有同一个父元素，该选择器选择的是紧挨着p标签的ul标签，给它设置样式）
[attribute]	input[name]	选择所有包含name属性的input标签
[attribute=value]	input[name = "myname"]	选择name属性为"myname"的input标签
[attribute^=value]	input[name ^= "my"]	选择name属性开头为"my"的input"标签
[attribute$=value]	input[name $= "me"]	选择name属性结尾为"me"的input"标签
[attribute*=value]	input[name *= "na"]	选择name属性包含为"na"的input"标签
:link	a:link	选择所有未被访问的超链接
:visited	a:visited	选择所有访问过的超链接
:active	a:active	选择所有活动的超链接
:hover	div:hover	选择所有鼠标悬停的div标签
:focus	input:focus	选择所有获得焦点的input标签
:first-letter	p:first-letter	选择p段落中的首字母
:first-line	p:first-line	选择p段落中的首行
:first-child	p:first-child	选择有父级标签且与之相邻最近的第一个子标签p
:last-child	p:last-child	选择有父级标签且与之相邻的最后一个子标签p
:before	p:before{content:"测试"}	在每个<p>标签的内容之前插入文字“测试”
:after	p:after{content:"测试"}	在每个<p>标签的内容之后插入文字“测试”
:first-of-type	div p:first-of-type	选择div标签里面的第一个p标签
:last-of-type	div p:first-of-type	选择div标签里面的最后一个p标签
:nth-child(n)	li:nth-child(2)	选择其父元素的第二个li标签
:nth-last-child(n)	li:nth-last-child(2)	选择其父元素的倒数第二个li标签
:empty	div:empty	选择没有子元素的div标签
:not	li:not(:last-child)	选择除去最后一个li元素的其他所有li标签

这里要区分一下

nth-child （n）和 nth-of-type

相同点：nth-child（n）和nth-of-type都是在父元素下寻找我们想要的子元素（不包含子元素的子元素）

我们给出一个盒子，里面放一些元素作为研究对象

<div><p>段落</p><span>我是1</span><span>我是2</span><span>我是3</span>
</div>

区别：nth-child（n）不区分标签类型，即不限定类型，它会将指定标签下的子元素按照原定顺序排列,例如：

div:nth-child(1) {bacgronud-color:pink;
}
div:nth-child(2) {bacgronud-color:yellow;
}

以上代码结果表示，<div>中有两种类型的标签，但是nth-child选择了p标签设置了背景颜色为粉色，span标签背景颜色为黄色，说明nth-child（n）没有受类型的影响

如果用nth-child（n）来单独选择div标签中满足条件的span标签呢？会是什么结果

div span:nth-child(1) {background-color:purple;
}

事实证明不能被选中，因为nth-child是不限定类型的，也就是说他是按照父元素的子元素的排列来判定谁是第一个，谁是第二个，此处因为父元素div的第一个子元素是p标签，所以span不能被选中

但是我们就想选中属于div盒子的第一个span呢？现在nth-of-type就很有用了

用法如下：

span:nth-of-type(1) {background:green;
}

显然，此时就能选中第一个span，这说明nth-of-type可以选择指定类型的元素，很好的解决了nth-child在上面遇到的问题

CSS选择器大全包含nth-child和nth-of-type的区别相关推荐

jQuery css选择器大全，总有你用得到的东西。
JQuery选择器首先我们深入了解止之后,发现要用到的选择器多种多样.今天我们就来总结一下各种选择器以及使用方法. 做一个大体的分类: 通过css选择器来提取元素: Query选择器的分类:通过cs ...
CSS 选择器大全伪类选择器大全
CSS+CSS3 选择器类选择器: .name{} ID选择器: #id{} 元素选择器: div{} 通配符选择器: *{} 后代选择器: div p{} 子选择器: div>p{} 和后代 ...
html大于号是什么选择器,什么是“”（大于号）CSS选择器是什么意思？什么是“”（大于号）CSS选择器是什么意...
例如: div > p.some_class { /* Some declarations */ } 究竟是什么的>符号是什么意思? Answer 1: >是子组合子 ,有时被误称为 ...
【CSS 选择器】鱼骨图记忆
简介本文主要介绍CSS选择器,包含基本选择器,复合选择器,属性选择器,关系选择器,伪类选择器和伪元素选择器,首先以鱼骨图展示方便记忆. 鱼骨图展示对应原件下载
【油猴脚本】生成纯元素CSS选择器（附开发笔记）
脚本介绍用途常见的CSS选择器: #gatsby-focus-wrapper > div > div > div.Box-nv15kw-0.Flex-arghxi-0.layou ...
Python爬虫(5)css选择器
css选择器 CSS 选择器用于"查找"(或选取)要设置样式的 HTML 元素. 顾名思义css选择器定位和选择的是HTML抽象DOM树上的一个或一类元素. 文章目录 css选择器 ...
nth:child()选择器
nth:child()属于CSS3中的选择器,针对于有多个相同标签时可以对每个标签的样式进行单独设置,以微信小程序开发中所写的代码为例: 这是wxml中的代码(类似于html): 这是wxss中的代码 ...
CSS 选择器、jQuery选择器大全
CSS 选择器 CSS选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp jQuery选择器大全一.基本选择器 1. id选择器( ...
CSS继承选择器与包含选择器的比较
作者:sagahu@163.com 日期:2011-12-21 CSS继承选择器与包含选择器的作用很像,其类似点主要有: 继承选择器的子孙元素可以继承到祖先元素的某些样式:而包含选择器的子元素可以得到 ...

CSS选择器大全包含nth-child和nth-of-type的区别