css3选择器如下:
一、通配符选择器(*)
通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。
二、元素选择器(E)
元素选择器,是css选择器中最常见而且最基本的选择器。
三、类选择器(.className)
类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名
四、id选择器(#ID)
ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id),
五、后代选择器(E F)
后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E
F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。
六、子元素选择器(E&gtF)
子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E&gtF所表示的是选择了E元素下的所有子元素F。这和后代选择器(E
F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E &gtF,其中F仅仅是E的子元素而以。
七、相邻兄弟元素选择器(E + F)
相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。
h1, h2, p {} // 选择所有的h1,h2,p1、后代选择器 (包含选择器): 以空格隔开包含关系的元素
2、子选择器 以>隔开父子级元素
3、兄弟选择器 ~ +
1、.tab p[title]:{ color: red} 选择所有带有title属性的p标签
2、.tab p[title = 'name']: { color: red} 选择所有title=name属性的标签
3、.tab p[title ^= 'na'] :{} 选择开头title属性带有na开头的标签
4、.tab p[title$= 'po'] :{} 选择title属性结尾是po的标签
5、.tab p[title *= 'name'] 只要含有name值就行的标签
6、.tab p[title ~= 'name flower'] 包含name的属性的标签
7、.tab p[title |= 'name'] 以name开头的属性的标签
伪类不仅可以作用在a链接上,还可以作用在其他元素上
:link 未访问过的链接
:visited 访问过的链接
:active 鼠标点击的一瞬间
:hover 鼠标悬浮在链接上
:focus 具有焦点的输入元素 innput(将输入的外边框去掉 :focus{ outline: none})
:target 锚点目标选择器
:root 文档的根选择器
:empty 空选择器,没有任何子集的元素
:first-child div下所有孩子中的第一个
:last-child div下所有孩子中的最后一个
:first-of-type div下类型为p的第一个元素
:last-of-type div下类型为p的最后一个元素
:nth-child(2) 选择每个p元素是其父级的第二个子元素, 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。
:nth-last-of-type( n )选择器匹配同类型中的倒数第n个同级兄弟元素。
:after 文本伪类选择器,在每个<p>元素之后插入内容
:before 文本伪类选择器,在每个<p>元素之前插入内容
:first-letter 文本伪类选择器,选择每一个<p>元素的第一个字母
:first-line 文本伪类选择器,选择每一个<p>元素的第一行
锚点目标的伪类选择器
首尾元素的伪类选择器
:first-child div下所有的第一个p元素 div p:first-chid
:last-child div下所有的最后一个p元素 div:last-child
:first-of-type 特定 类型 (p元素)的第一个元素 div p:first-of-type
:last-of-type 特定 类型 (p元素)的第一个元素
唯一选择器
:only-child 只有一个孩子的div
:only-of-type div下只有一种孩子类型的选择器
表单上的伪类选择器
文本的伪类选择器
文本伪类表单
知识点补充:
!important : 强制权重优先级
浏览器默认font-size: 14px
可继承元素:color、font-size、font-family
通配符的权重:0
继承的权重: NULL 0>NULL
总结排序:!important >行内样式>ID选择器 >类选择器 >标签 、伪类>通配符* >继承 >浏览器默认属性
使用 * 可为所有元素设置样式。
根据标签为元素设置样式
同时设置多个元素组合
类选择器是为一类状态声明样式规则,下面是把文本居中定义为类样式。
将类选择器指定为具体标签。这样样式的权重就提高了
注意span.help-block不能写成 span .help-block。标签选择器和类选择器中间加了空格的话,就变成了 span下面所有class是help-block的选择器了
HTML中元素是以父子级、兄弟关系存在的。后代选择器指元素内的元素(不只是子元素,是后代元素,子集,孙子级,所有的。。。)。
子元素选择器中选择子元素,不包括孙级及以下元素。
用于选择紧挨着的同级兄弟元素。
用于选择后面的所有指定的兄弟元素或者所有元素。
为具有 class 属性的h1标签设置样式
约束多个属性
具体属性值设置样式
^ 以指定值开头的元素
$ 以指定值结尾的元素
属性内部任何位置出现值的元素,包含关系
~ 属性值中包含指定词汇的元素
| 以指定值开头或以属性连接破折号的元素