没有注意过的CSS-选择器

属性选择器

[class] 选择任何定义的class属性的元素，即便这个属性没有设置任何值
[class=”foo”] 只能选择<tagName class=”foo”/>。[class=”foo bar”] 只能选择<tagName class=”foo bar”/>; 对于<tagName class=”bar foo”/>不能匹配;
也就是选择的属性的值要完全匹配，多一个空格也不行
[class|=”icon”] 可以选择<tagName class=”icon-phone”/> 或者 <tagName class=”icon”/>
也就是属性值要么完全匹配icon，要么以 icon- 开头
[title^=”icon”] 可以选择任何class属性的值以icon开头的，无论后面是什么
[class~=”icon”] 可以选择<tagName class=”icon phone”/> 或者 <tagName class=”icon”/> 对于 <tagName class=”icons”/>不能匹配。也就是属性值是包含这个词的一组词，另外~=后跟的词不能有任何空白符
[class*=”icon”] 与|= 不同的是，它是严格匹配子串，只要出现这个字符串就可以，无论是否包含空白符
[src$=”.com”] 匹配任何有src属性且属性值的结尾是.com

属性选择器选择的属性值默认要严格匹配大小写。如果要设置大小写不敏感可以使用标志符i，例如[src$=”.pdf” i]。注意大小写不敏感只是对属性值而言，对于属性名不起作用

直接子元素 >

同父元素的紧邻同胞元素 +

同父元素的非紧邻同胞元素 ~

伪类选择器

伪类都是冒号开头，后面跟着一个词, 如 :hover。伪类可以串联在一起，拼接的顺序不影响效果。但是注意不要串联相互排斥的伪类，如:link、:visited

伪类始终指代所依附的元素，如 #wzh:first-child 指是父元素的第一个子元素且id是wzh 的元素。#wzh > :first-child 指 id是wzh的元素的第一个子元素。

结构伪类

选择空元素 :empty 。选择没有任何子节点的节点，包括文本节点也没有，空白符也不行
选择唯一的子代 :only-child 选择 是父节点唯一子节点的节点。 (注意，此时文本节点不算节点，只有第一个empty才会考虑文本节点) 。注意，和后代选择器搭配使用时，选中的子元素不一定是选择器中的祖先元素的直接子元素。如：div.box img:only-child 选择的img只是它的父元素的唯一子元素
选择唯一类型的子代 :only-of-type 这里的类型仅代表标签类型，<tagName/> 即tagName。
选择第一个或最后一个子代 :first-child :last-child。如果同时使用这两个相当于:only-child
选择第一个或最后一个某种类型的子代 :first-of-type :last-of-type
选择第n个元素 :nth-child() 括号中可以填数字或者是带n的代数公式，解析是将n=0,1,2…依次带入，得到的结果就是要选择的元素序号，注意如果计算出0,则会被跳过。如 2n,计算得到0，2，4… 那么选择的第一个是第二个元素。
因此选择第偶数个是2n, 2n+1或2n-1是奇数。另外偶数奇数的选择可以用even odd 表示。:nth-child(odd)
选择第n个某种元素 :nth-of-type()。和:nth-child() 同理。只是选择的元素类型

动态伪类

超链接伪类 :link :visited。a选择的是所有a标签。a:link 选择的是带href且没有被访问的a标签。注意处于对已访问链接的隐私保护，只能将颜色相关的属性应用到已访问链接上。:link 定义的样式同样会被应用到已访问链接上。
用户操作伪类 :hover 鼠标悬停 :focus 获得焦点 :active 激活（鼠标按下到抬起之间时）
UI状态伪类 :enabled :disabled :checked :indeterminate(半选状态) :default(代指默认选中的单选复选) :required :optional :read-only :read-write 。H5元素可以添加属性disabled required 等等现在表单的样式基本不用原生选择器弄了

伪元素选择器

两个冒号开头，如::first-letter 。和伪类的主要区别是：伪类是为前面的选择器增加了一个选择条件，可以翻译为并且是，如 p:only-child 选择的是 p标签并且是父元素的唯一子元素。伪元素选择的并不是前面选择器选中的元素本身，而是基于这个元素创建了一个虚拟元素并为其添加样式。p::first-letter 选择的是p标签的内容第一个字母。例如 <p>hello</p> 加上上面的选择器后就是 <p> <p-first-letter>H</p-first-letter>ello</p>

::first-letter ::first-line可以理解为多个行内元素靠在一起相当于一个块级元素，只对块级元素生效。
::after ::before 这两个元素想要应用样式必须设置content，没有文字就设为空字符串
::placeholder 选择元素的placeholder为其添加样式