css选择器类型

html-css019

css选择器类型,第1张

h1, h2, p {}   //  选择所有的h1,h2,p      

1、后代选择器  (包含选择器): 以空格隔开包含关系的元素

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选择器 >类选择器 >标签 、伪类>通配符* >继承 >浏览器默认属性

css3中,追加了三个属性选择器分别为:

结构性伪类选择器由两部分构成,一是伪类选择器,一是伪元素选择器。

伪类选择器 ,要注意命名不要与系统定义好的选择器重名,例如link、hover

伪元素选择器 中包含 first-line、first-letter、before、after。

当root和body起冲突时,body就对内容区域生效,在内容区外则是root生效。

格式:not(selector)

1. first-child 对一个父元素中的 第一个 子元素进行样式的指定

2. last-child 对一个父元素中的 最后一个 子元素进行样式的指定

3. nth-child(positon) 对一个父元素中的 指定序号 的子元素进行样式的指定

4. nth-last-child 对一个父元素中的 指定倒数序号 的子元素进行样式的指定

2)使用nth-of-type(odd)和nth-of-type(even)

1)使用nth-child

2)使用nth-child(an+b),a表示每次循环中,包括几种样式,b表示指定的样式在循环中所处的位置。

only-child选择器,在元素只有一个子元素时,可以代替使用 nth-child(1)/nth-last-child(1) 。

在css3选择器中,除了结构性伪类选择器外,还有一种UI元素状态选择器——只有当元素处于某种状态下才起作用,在默认状态下不起作用。

通过js改变输入框的可输入和不可输入状态,通过css样式改变输入框可输入和不可输入状态时的背景颜色。

用来位于同一个父元素之下的,给与一个子元素平级的另一个子元素设定样式

【这是我的学习笔记,你也可以拿去用】

1 元素选择器:比如p{xxxx},选择文档中所有的p元素;

2 类选择器:比如.center_bar{xxxx},选择文档中使用了类center_bar的元素;

3 id选择器:比如.button1{xxxx},选择文档中使用了button1的元素;

4 或选择器:用逗号连接多个选择器;

5 与选择器:多个选择器紧挨在一起;

6 后代选择器:用空格连接多个选择器;

7 子代选择器:用大于号连接多个选择器,它其实是后代选择器的特殊情况;

8 属性选择器:

(1) 比如p[id],选择标签上有属性“id”的p元素;

(2) 比如p[id="button1"],选择标签上有属性“id”并且id的值为“button1”的p元素;

(3) 比如p[id^=”b”],选择标签上有属性“id”并且id的值以“b”开头的p元素;

(4) 比如p[id$=”b”],选择标签上有属性“id”并且id的值以“b”结尾的p元素;

(5) 比如p[id*=”b”],选择标签上有属性“id”并且id的值包含“b”的p元素;

9 p:first-child:既是p元素,也是某元素的第一个孩子;

10 p:last-child:既是p元素,也是某元素的最后一个孩子;

11 p:nth-child(3):既是p元素,也是某元素的第三个孩子;

12 p:nth-child(odd):既是p元素,也是某元素的第奇数个孩子;

13 伪类选择器都是某种状态,比如active、link、hover,使用“:”;

14 伪元素选择器,确实有某些实体的东西,比如第一行文字、第一个文字、被选中的文字,使用“::”

15 只有多个选择器选中了同一个元素的同一个属性,才会出现优先级的问题;

16 如果两个选择器优先级相同,那么写在后面的选择器生效;

17 选择器优先级的排列:

(1) !important

(2) 内联样式

(3) id选择器

(4) 类和伪类选择器

(5) 元素和伪元素选择器

(6) *选择器

(7) 继承样式