search

MiffyCooper / note

my study note
2 stars 1 forks source link

css3选择器 #4

Open MiffyCooper opened 5 years ago

MiffyCooper commented 5 years ago

最近重新翻了一下大漠的《图解CSS3》 想从新阅读，带着已有的知识点，查漏补缺。 今天读了选择器的章节。选择器一直都属于CSS中比较重要的部分，今天重新阅读，发现其实有很多内容是自己不知道的，或者说 不熟悉的。我会把这些内容都记录下来，作为对自己的查漏补缺。 已经完成阅读，后续会给自己出一份测试题。作为后续对选择器的自检。

MiffyCooper commented 5 years ago

css3选择器

认识CSS选择器

CSS3选择器分类

基本选择器

即常用的元素、ID、类等

基本上没有浏览器兼容问题

类选择器在一个页面中可以有多个相同的类名 id选择器其ID值在整个页面中是唯一的一个

在使用多类选择器的时候 如果一个多类选择器包含的类名中其中有一个不存在，这个选择器将无法找到相匹配的元素

多类选择器 .item.important

类名选择器 ul.item 群组选择器 selector1,selectorN 后代选择器 selector1 selectorN

层次选择器

后代选择器 selector1 selectorN

子选择器 selector1>selectorN 相邻兄弟选择器 selector1 + selectorN 通用兄弟选择器 selector1~selectorN

相邻兄弟选择器

通用兄弟选择器(E~F) 选中的是与E元素相邻的后面兄弟元素F 选择的是一个或者多个元素

相邻兄弟选择器(E+F) 选择的是与E元素相邻并且紧挨的兄弟元素F 选择的是一个元素

<div>
<div class='one'>1</div>
<div>2</div>
<div>3</div>
</div>
// css
.one ~ div {color: red}
.one+div {color: blue}
* result:2为蓝色 3为红色

动态伪类选择器

https://codepen.io/miffycooper/pen/qQEdvY

目标伪类选择器

:target 用来匹配文档的某个标识符的目标元素

兼容性 目标伪类会在IE8及其之前不被支持 但是IE用户仍然会跳转到相应的标题 只是不会高亮显示

语言伪类选择器

使用语言伪类选择器来匹配选择语言的元素

UI元素状态伪类选择器

ui元素的状态一般包括 启用、禁用、选中、未选中、获得焦点、失去焦点、锁定、待定

浏览器兼容性问题

结构伪类选择器

可以根据元素在文档树种的某个特性定位到他们

E:root 选择匹配元素E所在文档中的根元素 在html文档中 一般都是html

E F:nth-child(n) 选择父元素的第n个子元素F n的起始值是1 E:nth-of-type(n) 选择父元素内具有指定类型的第n个E元素 :one-of-type 选择当一个元素是它的父元素中的唯一一个相同类型的子元素 :empty 用来选择没有任何内容的元素

结构伪类选择器的n是什么

:nth-child 和:nth-of-type的区别

否定伪类选择器

E:not(F) 匹配除元素F外的E元素

浏览器兼容性

伪元素

可用于定位文档中包含的文本

双冒号和单冒号在CSS3中是为了区分伪类和伪元素

伪类和伪元素

伪类一般反映无法在css中轻松检测到的某个元素属性或状态 伪元素表示DOM外部的某种文档结构

::first-letter 文本块的第一个字母

::first-line 元素的第一行文本 ::before ::after 插入额外内容的位置 ::selection 匹配突出选择的文本

::selection 只接受background和color 两个属性

属性选择器

E[attr]属性选择器

E[attr=val] 属性选择器

E[attr|=val] 属性选择器

E[attr~=val]属性选择器

E[attr*=val]属性选择器

E[attr＾=val]属性选择器

E[attr$=val]属性选择器

MiffyCooper commented 5 years ago

css3