CSS选择器和参考手册

CSS的基本语法

选择器:通过选择器可以选中页面中的指定元素.声明块:通过声明块来指定元素设置样式.声明块由一个一个的声明组成声明是由一个名值对结构:一个样式名对应一个样式值,名和值之间以:连接,以;结尾(如: color:blue;)

CSS的选择器

常用选择器

元素选择器

元素选择器作用:根据标签名来选中指定的元素语法:标签名{}例子:p{} h1{} div{}

ID选择器

id选择器作用:根据元素的ID属性值选中一个元素语法:id属性值{}例子:#name{} #id{}

类选择器

类选择器作用:根据元素的class属性值选中一组元素语法:class属性值{}例子:.name{} .intro{}

通配选择器

通配选择器作用:选中页面中所有元素语法:*例子:*{}

复合选择器

交集选择器

交集选择器作用: 选中同时符合多个条件的元素语法: 选择器1选择器2选择器n{}注意点:交集选择器中如果有元素选择器,必须使用元素选择器开头例子: div.class{}

并集选择器(选择器分组)

并集选择器(选择器分组)作用: 同时选择多个选择器对应的元素语法: 选择器1,选择器2,选择器n{}例子: div,span,.class{}

关系选择器

关系说明:

父元素:直接包含子元素的父元素子元素:直接被父元素包含的元素是子元素祖先元素:直接或间接包含后代元素的叫祖先元素,一个元素的父元素也是他的祖先元素后代元素:直接或间接被祖先元素包含的元素叫后代元素,子元素也是后代元素兄弟元素:拥有相同父元素的是兄弟元素

子元素选择器

子元素选择器作用:选中指定父元素的指定子元素语法: 父元素 > 子元素

后代元素选择器

后代元素选择器作用: 选中指定元素内的指定后代元素语法: 祖先 后代  [中间有个 空格]

选择下一个兄弟

选择下一个兄弟语法: 前一个 + 下一个  [中间有个 + 号]注意点: 紧挨着的兄弟元素

选择下边所有兄弟

选择下边所有兄弟语法: 兄~弟  [中间有个 ~]注意点: 只可以选择下边所有兄弟

属性选择器

[属性名]  p[title] 选择含有指定属性的元素
[属性名=属性值] p[title=abc] 选择含有指定属性和属性值的元素
[属性名^=属性值] p[title^=abc] 选择属性值以指定值开头的元素
[属性名$=属性值]  p[title$=abc] 选择属性值以指定值结尾的元素
[属性名*=属性值]  p[title*=abc] 选择属性值中含有某值的元素的元素

伪类选择器

伪类用来描述一个元素的特殊状态,比如：第一个子元素、被点击的元素、鼠标移入的元素…

伪类（不存在的类，特殊的类）伪类一般情况下都是使用:开头:first-child 第一个子元素:last-child 最后一个子元素:nth-child() 选中第n个子元素特殊值：n 第n个 n的范围0到正无穷2n 或 even 表示选中偶数位的元素2n+1 或 odd 表示选中奇数位的元素- 以上这些伪类都是根据所有的子元素进行排序:first-of-type:last-of-type:nth-of-type()- 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序- :not() 否定伪类- 将符合条件的元素从选择器中去除

伪元素选择器

 伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）伪元素使用 :: 开头::first-letter 表示第一个字母::first-line 表示第一行::selection 表示选中的内容::before 元素的开始 ::after 元素的最后- before 和 after 必须结合content属性来使用

选择器的权重

样式的冲突

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

选择器的权重内联样式         1,0,0,0id选择器         0,1,0,0类和伪类选择器   0,0,1,0元素选择器       0,0,0,1通配选择器       0,0,0,0继承的样式       没有优先级比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的）.

选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
如果优先级计算后相同，此时则优先使用靠下的样式

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，
注意：在开发中一定要慎用！

CSS 选择器参考手册

选择器	例子	例子描述	CSS版本
. class	.intro	选择 class="intro" 的所有元素。	1
# id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有 <p> 元素。	1
element , element	div,p	选择所有 <div> 元素和所有 <p> 元素。	1
element element	div p	选择 <div> 元素内部的所有 <p> 元素。	1
element > element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。	2
element + element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。	2
[ attribute ]	[target]	选择带有 target 属性所有元素。	2
[ attribute = value ]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[ attribute ~= value ]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
[ attribute \|= value ]	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素。	2
:link	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:first-letter	p:first-letter	选择每个 <p> 元素的首字母。	1
:first-line	p:first-line	选择每个 <p> 元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。	2
:before	p:before	在每个 <p> 元素的内容之前插入内容。	2
:after	p:after	在每个 <p> 元素的内容之后插入内容。	2
:lang( language )	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。	2
element1 ~ element2	p~ul	选择前面有 <p> 元素的每个 <ul> 元素。	3
[ attribute ^= value ]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。	3
[ attribute $= value ]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。	3
[ attribute = value* ]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。	3
:nth-child( n )	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。	3
:nth-last-child( n )	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type( n )	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。	3
:nth-last-of-type( n )	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的 <input> 元素。	3
:disabled	input:disabled	选择每个禁用的 <input> 元素	3
:checked	input:checked	选择每个被选中的 <input> 元素。	3
:not( selector )	:not(p)	选择非 <p> 元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3

CSS选择器和参考手册相关推荐

CSS选择器完整参考手册
CSS完整选择器参考 CSS 选择器 CSS选择器用于选择你想要的元素的样式的模式. "CSS"列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3).
css语法选择器中括号,CSS 选择器语法参考手册
DI 之 3.3 更多DI的知识(陆) 3.3.1 延迟初始化Bean 延迟初始化也叫做惰性初始化,指不提前初始化Bean,而是只有在真正使用时才创建及初始化Bean. 配置方式很简单只需在标签上指 ...
CSS 3.0 参考手册 (中文版)
公司的页面同学们,利用业余时间整理出了一份比较完整的CSS 3.0 参考手册,非常不容易.手册是根据W3C的CSS3草案翻译,并且结合实际的示范结合而成.每一页都倾注了每一个同学的心血. 预览页面: ...
CSS样式属性参考手册
CSS3 动画属性(Animation) 属性描述 CSS @keyframes 规定动画. 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性. ...
CSS 选择器参考手册
2019独角兽企业重金招聘Python工程师标准>>> CSS 选择器参考手册选择器描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] ...
【转载】CSS 选择器参考手册
CSS 选择器参考手册转载:W3School 简体中文版 CSS3 选择器在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. "CSS" 列指示该属性是在哪个 CS ...
css参考手册css3手册_CSS手册：面向开发人员CSS便捷指南
css参考手册css3手册 I wrote this article to help you quickly learn CSS and get familiar with the advanced ...
CSS参考手册自用版（新增flex布局）
CSS参考手册-D #参考慕课网.谷歌.腾讯课堂.w3scholl等相关信息及课程仅为自用,可供参考附上链接: https://www.imooc.com/learn/9 https://ke.q ...
jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数方法描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...

CSS选择器和参考手册

CSS的基本语法

CSS的选择器

常用选择器

复合选择器

关系选择器

属性选择器

伪类选择器

伪元素选择器

选择器的权重

样式的冲突

CSS 选择器参考手册

CSS选择器和参考手册相关推荐

最新文章

热门文章