陶吉诃德

这是最好的时代,这是最坏的时代;这是智慧的年代,这是愚蠢的年代;这是信仰的时期,这是怀疑的时期;这是光明的季节,这是黑暗的季节;这是希望之春,这是绝望之冬;

Tao-Quixote's Blog

CSS Selector(选择器)

1、sibling selector

h1~p{}	// h1兄弟中所有的p
h1+p{}	// h1兄弟中紧邻h1的p

2、attributes selector

1、attribute present selector	如果有这个属性就选中,没有就不选中
a[target]{...}
<a href="" target=""></a>

2、attributes equals selector	相等就选中
a[href="www.google.com"]{...}
<a href="www.google.com"></a>

3、contains selector				包含就选中
a[href*="google"]{...}
<a href="www.google.com"></a>

4、begins with and ends with selector	以xx开头或者结尾
a[href^="www"]{...}	|| a[href$="com"]{...}

5、spaced selector				属性被空格分开的情况
a[rel~="tag"]{...}
<a rel="tag nofollow"></a>

6、hyphenated selector			被短横线分割开的情况
a[lang|="en"]{...}
<a lang="en-US"></a>

3、User Interface State Pseudo-classes

1、针对input输入框
:enabled,:disabled:分别对应input输入框的两种状态。

2、针对checkbox和radio button
:checked,:indeterminate:分别对应选中和什么都没操作的状态

3、children selector

:first-child,:last-child,:only-child;
div:only-child:	当div为其父节点中唯一的子节点时,此div被选中,否则不会被选中。

🏁4、target pseudo-class

p:target {...}

<p id="sel"></p>		// 当url后跟锚记#sel时,p标签会被选中

5、empty pseudo-class

div.empty {...}			// 元素为空,没有任何子节点或者text时被选中。

6、 negation pseudo-class

div:not(.sel){...}
:not(div) {...}			// 过滤掉符合传入的参数的项

7、 伪元素

:first-letter, :first-line, :after, :before

🏁8、 fragment pseudo-element

::selection {...}		// 被用户操作选中的部分