您的位置:首页 > Web前端 > CSS

CSS选择器[伪类选择器/伪元素 /属性选择器/子选择器/兄弟选择器/否定伪类/样式的继承/选择器的优先级/a的伪类/文本标签/em 和 i 的区别?]

2018-12-20 19:14 701 查看

1.伪类选择器

伪类专门用来表示元素的一种特殊的状态
比如:访问过的超链接、普通的超链接、获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类

正常链接:-a:link
访问过的链接:-a:visited(只能定义字体颜色)
鼠标滑过的链接:-a:hover
正在点击的链接:-a:active
获取焦点:-:focus
选中的元素:-::selection

2.伪元素

使用伪元素来表示元素中的一些特殊的位置

指定元素前:-:before
指定元素后:-:after

3.属性选择器

属性选择器可以挑选带有特殊属性的标签

语法:
【属性名】
【属性名="属性值"】
【属性名~="属性值"】
【属性名|="属性值"】
【属性名^="属性值"】
【属性名$="属性值"】
【属性名*="属性值"】

4.子选择器

:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
:nth-child 可以选中任意位置的子元素该选择器后边可以指定一个参数,指定要选中第几个子元素
:first-of-type
:last-of-type
:nth-of-type
和child类似,只不过child是在所有的子元素中找而type是在当前类型的子元素中找
even 表示偶数位置的子元素
odd 表示奇数位置的子元素

5.兄弟选择器

作用:除了根据祖先父子关系,还可以根据兄弟关系查找元素

语法:
查找后面一个兄弟元素:兄弟元素+兄弟元素{}
查找后面所有的兄弟元素:兄弟元素~兄弟元素{}

6.否定伪类

作用:可以从已选中元素中剔出某些元素

语法::not(选择器)

7.样式的继承

像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承
利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式但是,并不是所有的样式都会被子元素所继承,比如:背景、边框、定位相关的样式都不会被继承

8.选择器的优先级

当使用不同的选择器,选中同一个元素时,并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示

优先级的规则
内联样式,优先级1000
id选择器,优先级100
类和伪类,优先级10
元素选择器,优先级1
通配*,优先级0
继承的样式,没有优先级
1.当选择器中包含多种选择器时,需要将多种选择器的优先级相加,然后再比较,但是注意,选择器优先级计算不会超过他的最大的数量级
2.如果选择器的优先级一样,则使用靠后的样式
3.并集选择器的优先级是单独计算的div, p, #p1, .hello{}
4.可以在样式的最后添加一个!important,则此时该样式将会获取一个最高的优先级,将会优先于所有的样式显示,甚至超过内联样式,但是在开发中,尽量避免使用!important

9.a的伪类

涉及到a的伪类一共有四个
:link
:visited
:hover
:active
而这四个选择器的优先级是一样的

10.文本标签

em和strong这两个标签都表示一个强调的内容
em主要表示语气上的强调,在浏览器中默认使用斜体显示
strong表示强调的内容,比em更强烈,默认使用粗体显示
i标签中的内容会以斜体显示
b标签中的内容会以粗体显示
h5规范中规定:对于不需要着重的内容,而是单纯的斜体或者是加粗,就可以使用i和b标签
small标签中的内容会比他父元素中的文字要小一些
在H5中使用small标签来表示一些细则一类的内容
比如:合同中的小字,网站的版权声明都可以放到small
网页中所有的加书名号的内容都可以使用cite标签,表示参考的内容,比如:书名、歌名、话剧名、电影名……
q标签表示一个短的引用(行内引用),q标签引用的内容,浏览器会默认加上引号
blockquote标签表示一个长引用(块级引用)
使用sup标签来设置一个上标
使用sub标签用来表示一个下标
使用del标签来表示一个删除的内容,会自动添加删除线
ins表示一个插入的内容,会自动添加下划线
需要在页面中直接编写一些代码
pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格及换行
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码

11.em 和 i 的区别?

em是语气强调
i是图标
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐