css选择器类型

html-css024

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

1.双击打开HBuilderX工具,创建一个新的HTML5静态页面,如下图zd所示:

2.在body标签元素中插入多个div标签,并用div将它们嵌套在div中,如下图所示:

3.在标题标签下面添加一个样式,设置全局版本的样式,并使用*符号,如下图所示:

4.保存代码并打开浏览器查看页面效果。可以在页面上找到背景颜色,如下图所示:

5.使用body标签选择器设置宽度、字体属性、字体大小等属性,如下图所示:

6.最后,使用body标签内部的div选择器来设置div标签样式,并添加边框和内外边的权重距离,如下图所示:

一、简单的选择器

1)标签选择器

与网页元素同名,用的最多,也简单,即直接作用于与该选择器名字相同的标签

2) 类选择器

能够为网页对象定义不同的样式类,实现不同元素拥有相同的样式,相同元素的不同对象拥有不同样式

3)类选择器和标签结合在一起==>指定类选择器

指定该类用于特定的标签范围内

4)ID选择器(ID唯一)

这个就不举例讲解了,类比类选择器,把"."换成"# "即可

5)通配选择器

如果所有元素都需要定义相同的样式,推荐使用通配选择器

二、复合选择器

1)子选择器

2)相邻选择器(二者有相同父元素)

**利用相邻的兄弟元素来控制,即相邻选择器就是指定一个元素相邻的下一个元素的样式。相邻的选择器使用+表示

3)包含选择器(后代选择器)

第一对象一定要内包含第二对象

4)选择器嵌套

5)属性选择器

属性选择器就是利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。

1.匹配属性名选择器

2.扩展

3.匹配属性值选择器

4.模糊匹配属性值选择器

类似正则表达式

6)伪选择器和伪元素选择器

标签之间可以通过逗号隔开来设定多个标签的CSS样式