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是图标
相关文章推荐
- 12.20 伪元素 兄弟元素选择器 否定伪类_样式的继承_权重_伪类顺序_文本标签
- Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)
- 标签、元素、属性、样式的关系与区别
- 标签、元素、属性、样式的关系与区别
- CSS选择器大全[关系选择器/属性选择器/伪类选择器/伪对象选择器..]
- css3 - 属性选择器、伪元素选择器、结构性伪类选择器
- 选择器(标签,class,id,子,后代,通用,伪类,分组)区别,继承,<link>
- html之css属性选择器,伪类,继承,选择器优先级,float
- 认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别
- html中标签、属性、元素的区别
- CSS 属性 - 伪类和伪元素的区别
- CSS 选择符有哪些?哪些样式可以继承?优先级算法如何计算? CSS3新增伪类有那些?
- 详解 CSS 属性 - 伪类和伪元素的区别
- CSS3之选择器1(属性选择器,结构伪类)
- 详解 CSS 属性 - 伪类和伪元素的区别
- 详解 CSS 属性 - 伪类和伪元素的区别
- jquery-选择器、筛选器、样式操作、文本操作、属性操作、文档处理
- 测试css2.1选择器IE6/7/8支持情况,属性选择器/子元素/相邻
- CSS选择器样式和style属性样式优先级
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)