新版本的Edge支持度都比较好，IE不行，CSS选择器原文链接 （加上了一小部分自己的理解，以及原文不说人话的文字描述的改写，基本是看过案例或者用过，有待补充）
- CSS使用的一部分想法，className在大规模项目中是非常痛苦的存在（本人起名废），所以推荐使用集中类型的属性设定之后多次应用，可以根据自己需要总结一些常用class之后直接调用，不需要单独写。↓
<!DOCTYPE html> <html> <head> <style> .egText { font-size: 14px; font-weight: bolder; } .egColor { color: #409EFF; } </style> </head> <body> <div> <span class="egText egColor ">A div element.</span> ... </div> <div class="egText egColor ">B div element.</div> </body> </html>
单独类别（基础中的基础）
互相作用关系
elementui的标签基本会带class属性 与 className 性质等同
#id、.class、element 三者在实际使用中的用法相同
element1,element2 选择 所有element1 和 element2 元素（逗号为并列选择）
element1 element2 选择 element1内 的 所有element2 元素（空格为子级选择）
<!DOCTYPE html>
<html>
<head>
<style>
.attrA .attrB {
color:#ff0000;
}
</style>
</head>
<body>
<div #id="title" class="attrA">
<span #id="content" class="attrB">A div element.</span><!-- 变化 -->
</div>
<div class="attrA attrB">B div element.</div>
</body>
</html>
↑其中 .attrA .attrB { color:#ff0000; } 等同于 div span { color:#ff0000; } 等同于 #title #content { color:#ff0000; }
唯一性最强的是#id系列，慎用element系列（杀伤范围过大）
- element1element2 选择 element1 和 element2 同时存在的元素（中间没有空格，需要同时满足两个class都存在，常用来指向一个元素）
<!DOCTYPE html>
<html>
<head>
<style>
.attrA.attrB {
color:#ff0000;
}
</style>
</head>
<body>
<div class="attrA">
<span class="attrB">A div element.</span>
</div>
<div class="attrA attrB">B div element.</div> <!-- 变化 -->
</body>
</html>
element1>element2 选择 所有父级是 element1 的 element2
element1+element2 选择 element1 下 的 第一个element2
element1~element2 选择 element1 之后的每一个 element2 元素（在线代码测试时，发现ul套了一层div就不认识了，应该是同一层的兄弟关系才起作用）
<!DOCTYPE html>
<html>
<head>
<style>
p~ul {
background:#ff0000;
}
</style>
</head>
<body>
<div>A div element.</div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>The first paragraph.</p>
<!--此后的ul均为选中，其他不会被选中-->
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Another list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
带判断条件的 [ ]
[attribute] 所有带 attribute 属性的元素
a[target] { background-color:yellow; }[attribute=value] 所有 attribute = value 的元素
a[target = _blank] { background-color:yellow; }[attribute~=value] 选择 attribute 含 value 的 所有 元素
[title~=flower] { background-color:yellow; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
[title~=flower] {
border:5px solid yellow;
}
</style>
</head>
<body>
<p>
图片的 title 属性中如果带有 "flower" 单词，则会设置为黄色边框。
</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113" /> <!-- 变色 -->
<img src="img_flwr.gif" title="flowers" width="224" height="162" /> <!-- 变色 -->
<img src="landscape.jpg" title="landscape" width="160" height="120" />
<p>
<b>注意:</b>
如果 [<i>attribute</i>~=<i>value</i>]
要在 IE8 及其更早版本下起作用， DOCTYPE 是必须声明的。
</p>
</body>
</html>
-
[attribute|=language] 选择 attribute属性等于language或是以它为开头 的 所有 属性
[lang|=en] ( [title|="flower"] )
<!DOCTYPE html>
<html>
<head>
<style>
[lang|=en] {
background:yellow;
}
</style>
</head>
<body>
<p lang="en">Hello!</p> <!--变色-->
<p lang="en-us">Hi!</p> <!--变色-->
<p lang="en-gb">Ello!</p> <!--变色-->
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
<p>
<b>Note:</b>
For [<i>attribute</i>|=<i>value</i>]
to work in IE8 and earlier, a DOCTYPE must be declared.
</p>
</body>
</html>
[attribute^=value] 选择每一个 attribute 属性的值以 value 开头的元素
div[class^="test"] { background:#ffff00; }[attribute$=value] 选择每一个 attribute 属性的值以 value 结尾的元素
div[class$="test"] { background:#ffff00; }[attribute*=value] 选择每一个 attribute 属性的值包含 value 的元素
div[class*="test"] { background:#ffff00; }
伪类（定义特殊属性）
常用，内容类
:before
p:before { content:"Read this: "; }在插入图形中会常用，以及需要添加一部分文本，也可以设置开头，就好比剧本那种 XXX：xxxxx 在前面把 XXX 统一加上，也可以在前面添加一些东西:after
p:after { content:"- Remember this"; }在插入图形中会常用，在段尾添加一些东西都可以用，与before经常会联合起来使用
a链接常用
-
:link 选择所有未访问链接
a:link { background-color:yellow; }可以与:visited一起使用，作为两类的区分，需要同一个元素才能生效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link {
background-color:yellow;
}
</style>
</head>
<body>
<!--单独使用:link，点击的时候没发现原增加的背景色在点击后有变化，添加visited之后才有效果-->
<a href="//www.runoob.com/">runoob.com</a>
<a href="//www.google.com">Google</a>
<a href="//www.wikipedia.org">Wikipedia</a>
<p><b>注意:</b>:link选择样式链接到你还没有去过的链接。</p>
</body>
</html>
-
:visited 选择所有访问过的链接
a:visited { background-color:green; }可以与:link一起使用，作为两类的区分，需要同一个元素才能生效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link { background-color:yellow; }
a:visited { background-color:green; }
</style>
</head>
<body>
<a href="//www.runoob.com/">runoob.com</a>
<a href="//www.baidu.com">百度</a>
<a href="//www.wikipedia.org">Wikipedia</a>
<p><b>注意:</b>:link选择样式链接到你还没有去过的链接。</p>
</body>
</html>
- :target 针对a链接的target作锚点时的选中状态，锚点对应部分会根据 :target 的样式进行渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>
<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
<p><b>注意:</b> IE 8 以及更早版本的浏览器不支持 :target 选择器.</p>
</body>
</html>
button常用
:active 选择活动链接
a:active { background-color:yellow; }点击时当下的样式，不持续，只有点击时有效:hover 鼠标移到链接上的样式
a:hover { background-color:yellow; }:focus 选择具有焦点的输入元素
input:focus { background-color:yellow; }
针对状态常用（比较多是针对input原生的各种状态）
-
:enabled 选择每一个已启用的输入元素
input[type="text"]:enabled { background:#ffff00; }（每一个 type=text 的已开启的 input）
<form action="">
First name: <input type="text" value="Mickey" /><br>
Last name: <input type="text" value="Mouse" /><br>
Country: <input type="text" disabled="disabled" value="Disneyland" />
<br>
</form>
:disabled 选择每一个禁用的输入元素
input[type="text"]:disabled { background:#dddddd; }（针对 enabled 而用，默认都是enabled）:checked 选择每个选中的输入元素
input:checked { height: 50px; width: 50px; }
- :out-of-range input框设定 min 和 max 后，超出范围之后的样式修改，可与in-range同用，可单独使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
input:out-of-range {
border:2px solid red;
}
</style>
</head>
<body>
<h3> :out-of-range 选择器实例演示。</h3>
<input type="number" min="5" max="10" value="17" />
<p>在input中输入一个值 (小于 5 或者 大于 10), 查看样式的变化。</p>
</body>
</html>
:in-range 与out-of-range对应，input的伪类，可以单独生效
input:in-range { border:2px solid yellow; }:read-write 匹配可读及可写的元素，与readonly相配合使用，渲染所有非readonly的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
input:read-write {
background-color: yellow;
}
</style>
</head>
<body>
<h3> :read-write 选择器实例演示。</h3>
<p>普通的input元素:<br><input value="hello"></p>
<p>只读的input元素:<br><input readonly value="hello"></p>
<p> :read-write 选择器选取没有设置 "readonly" 属性的元素。</p>
</body>
</html>
- :read-only 只针对拥有readonly属性的对象进行样式设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
input:read-only
{
background-color: yellow;
}
</style>
</head>
<body>
<h3> :read-only 选择器实例演示。</h3>
<p>普通的input元素:<br><input value="hello"></p>
<p>只读的input元素:<br><input readonly value="hello"></p>
<p> :read-write 选择器选取没有设置 "readonly" 属性的元素。</p>
<p> :readonly 择器选取设置 "readonly" 属性的元素。</p>
</body>
</html>
- :optional input没有写 required 的所有元素内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
input:optional
{
background-color: yellow;
}
</style>
</head>
<body>
<h3>:optional 选择器演示实例。</h3>
<p>可选的 input 元素:<br><input></p>
<p>必填的 input 元素:<br><input required></p>
<p> :optional 选择器用于表单中未设置"required" 属性的元素。</p>
</body>
</html>
- :required input里所有带上 required 属性的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
input:required
{
background-color: yellow;
}
</style>
</head>
<body>
<h3>A demonstration of the :required selector.</h3>
<p>An optional input element:<br><input></p>
<p>A required input element:<br><input required></p>
<p> :required选择器选择表单元素有“需要”属性.</p>
</body>
</html>
- :valid 针对input的type属性，自带校验不匹配则不现实样式效果，与 :invalid 对应，可以单独使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
input:valid
{
background-color: yellow;
}
</style>
</head>
<body>
<h3> :valid 选择器实例演示。</h3>
<input type="email" value="support@exampel.com" />
<p>请输入非法 e-mail 地址，查看样式变化。</p>
</body>
</html>
- :invalid 不匹配input自带校验规则，则会显示样式，与 :valid 对应，可以单独使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
input:invalid
{
border:2px solid red;
}
</style>
</head>
<body>
<h3> :invalid 选择器实例演示。</h3>
<input type="email" value="supportEmail" />
<p>请输入合法 e-mail 地址，查看样式变化。</p>
</body>
</html>
-
:default
input:default { box-shadow: 0 0 1px 1px red; }给input默认值的一个醒目点，慎重使用（可用于比如radio，checkbox状态）
<!DOCTYPE html>
<html>
<head>
<style>
input:default {
box-shadow: 0 0 1px 1px red;
}
</style>
</head>
<body>
<h1>The default Selector</h1>
<p>The :default selector selects the default form element in a group of related elements.</p>
<p>The "male" radio button is checked by default:</p>
<form action="">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<p>The :default selector is not supported in Internet Explorer 11 and earlier versions.</p>
</body>
</html>
-
:indeterminate
input:indeterminate { box-shadow: 0 0 1px 1px red; }表不确定的状态↓checkbox专属（用于多选）
elementui相关表现参考 ::placeholder
::placeholder { color: red; }直接硬控placeholder的属性，有兼容写法（针对edge），使用需谨慎
文字类常用
-
:first-letter 选择第一个字母元素
p:first-letter { font-size:200%; color:#8A2BE2; }（首字母变大变色）
可用属性：font || color || background || margin || padding || border || text-decoration || vertical-align (only if float is 'none') || text-transform || line-height || float || clear
-
:first-line 选择第一行原素
p:first-line { background-color:yellow; }
可用属性：font || color || background || word-spacing || letter-spacing || text-decoration || vertical-align || text-transform || line-height || clear
- ::selection 元素中被用户选中或处于高亮状态的部分（选择案例中的文本会变色，高亮部分状态变更还未知）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
</style>
</head>
<body>
<h1>尝试选择本页的一些文本</h1>
<p>这是一些文本.</p>
<div>这是div元素中的一些文本.</div>
<a href="//www.w3cschool.cc/" target="_blank">链接W3Cschool!</a>
</body>
</html>
- ::marker 就是给ul li ol li系列标识的一个符号专用css类名
<!DOCTYPE html>
<html>
<head>
<style>
::marker {
color: red;
}
</style>
</head>
<body>
<h1>Demo of the ::marker selector</h1>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
常用选择类（针对子元素）
:first-of-type
p:first-of-type { background:#ff0000; }（其父元素下的第一个P元素）:last-of-type
p:last-of-type { background:#ff0000; }（其父元素下的最后一个P元素）:only-of-type
p:only-of-type { background:#ff0000; }（其父元素下的唯一一个P元素）:nth-of-type(n)
p:nth-of-type(2) { background:#ff0000; }（兄弟元素，父元素下的第2个p元素）:nth-last-of-type(n)
p:nth-last-of-type(2) { background:#ff0000; }（兄弟元素，父元素下的倒数第2个p元素）:first-child 父元素的第一个子元素（以所有子元素来计算）
p:first-child { background-color:yellow; }:last-child
p:last-child { background:#ff0000; }（父元素中最后一个元素是p元素，其他元素无效）:only-child
p:only-child { background:#ff0000; }（父元素中唯一子元素的 p 元素）:nth-child(n)
p:nth-child(2) { background:#ff0000; }（父元素中的第2个子元素是p的元素，如果是其他元素排第二位则无效）:nth-last-child(n)
p:nth-last-child(2) { background:#ff0000; }（父元素中的倒数第2个子元素是p的元素，如果是其他元素则无效）:not(selector) except
:not(p) { background:#ff0000; }:has 常用于反向选择
div:has(p) { color:#000000; }:is 用于多选
:is(h1, h2, h3) { color: red; }（感觉多选的方法有很多，实用性有待考究）
特殊类
- :lang(language) 首先有lang属性，然后只针对语言类的起始字母为条件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p:lang(it)
{
background:yellow;
}
</style>
</head>
<body>
<p>I live in Italy.</p>
<p lang="it">Ciao bella!</p>
<!--当lang的语言起始为it即为选中，比如lang="en"，则lang="en"与lang="en-us"均为选中-->
<p><b>注意:</b> :lang 作用于 IE8, DOCTYPE 必须已经声明.</p>
</body>
</html>
:root 选择文档的根元素
:root { background:#ff0000; }（给整个 iframe || html 增加bgc属性，不跟其他元素绑定）:empty 没有任何子级的元素，比如p内的文字也属于子级
p:empty { background:#ff0000; }（input这种直接就是改变，不会因为输入而变更，简直bgc）:fullscreen
:fullscreen { background-color: yellow; }配合F11全屏使用的特殊情况可以考虑
