CSS选择器
选择器的用处就是告知浏览器，我这一大堆的样式要用在哪些元素
选择器很重要，学好了，可以减少很多CSS代码，不用像以前一样，一大堆类选择器。
以下为了方便查看CSS代码，我采用内联样式的方法，但在实际开发中，建议用外联样式，这有利于页面的性能优化。
id选择器
id选择器，要在标签添加id属性和其值，css根据id来赋予元素样式。
在一个网页文件中，id名不能重复，如下代码有个id=”div”，就不能再来一个id=”div”了，但可以是其他的值，Id名就像身份证一样，每个只有一个，并且不能重复。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/* 这个是CSS的注释写法 是多行注释 */
/*id选择器的写法 #id名 id的值也就是id名*/
#div{
color: red;
}
#div2{
color: blue;
}
</style>
</head>
<body>
<div id="div">
红色
</div>
<div id="div2">
蓝色
</div>
</body>
</html>类选择器
这个是利用html元素的class属性，一个元素只能有一个class属性，但class属性可以有多个值，而且在一个html文件中，类名是可以重复，它就像衣服一样，给一些元素穿上同样的衣服。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/* */
/*类选择器的写法 .类名 class的值就是类名*/
.bg{
background: red;
}
</style>
</head>
<body>
<div class="bg">
背景为红色
</div>
<p class="bg">
背景为红色
</p>
</body>
</html>如果一个元素有多个类要怎么写?
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.bg{
background: pink;
}
.font{
color: blue;
}
</style>
</head>
<body>
<div class="bg font">
背景为粉色，字体为蓝
</div>
<p class="bg">
背景为粉色
</p>
</body>
</html>类名与id名的合法值
就像编程语言的变量有合法的标识符一样，这里的id和class也有合法的值
id名和类名的值由，英文大小写字母和数字，还有下划线 _ ，以及中划线 – 组成，开头不能是数字
为了见名之意，建议采用驼峰标识，或以下划线或中划线来分割单词
比如class="bg-color"
因为最常用的就是类选择器，所以也拥有一些命名规范，比如BEM，其实这玩意我也不太了解啊，因为我也没有注意这种命名的问题，特别是学了vue的组件化开发后。
但是就针对一开始学的话，CSS一大堆类名，要管理起来确实不容易，有时候出bug找个类名都难找，而且类名一多，就开始乱起了，就很麻烦，我以前用的好像是OOCSS的那一套，不过OOCSS需要对CSS样式有个比较全面的了解，所以，后面再说。
快捷方式：在sublime_text这个编辑器有个关于id和类选择器的快捷方式
div#name按下tab键会变成<div id="name"></div>
div.div按下tab键会变成<div class="div"></div>
标签选择器
这个就是利用标签名了，被指定的所有标签都会有相同的样式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*直接写上标签名 */
div{
background: pink;
color: blue;
}
p{
background: green;
color: pink;
}
</style>
</head>
<body>
<div>
div背景为粉色，字体为蓝
</div>
<div>
div背景为粉色，字体为蓝
</div>
<p>
p背景为绿色，字体粉色
</p>
<p>
p背景为绿色，字体粉色
</p>
</body>
</html>群组选择器
多个选择器的组合，只要是在这个组的都有同样的样式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div,ul,p{
background: pink;
color: blue;
}
</style>
</head>
<body>
<div>
div背景为粉色，字体为蓝
</div>
<div>
div背景为粉色，字体为蓝
</div>
<p>
p背景为粉色，字体为蓝
</p>
<p>
p背景为粉色，字体为蓝
</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>
</html>看到这可能会有疑惑，会什么明明没有指定li标签的字体颜色，为何它也变色了，这就是CSS属性的继承了，比如字体颜色是可以继承的，老爹有什么颜色，儿子就是什么颜色的，除非儿子重新定义自己的颜色。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div,ul,p{
background: pink;
color: blue;
}
/*加上这个代码*/
li{
color: red;
}
</style>
</head>
<body>
<div>
div背景为粉色，字体为蓝
</div>
<div>
div背景为粉色，字体为蓝
</div>
<p>
p背景为粉色，字体为蓝
</p>
<p>
p背景为粉色，字体为蓝
</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>
</html>既然字体颜色可以继承，那么其实要让所有的字体颜色一样，其实只要在body上设置就行了。
后代选择器
下面这CSS代码的意思是，我这个叫bg的类名，它的后代，不管是儿子还是孙子，还什么，只要它叫p，都用这个样式。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*选择器 选择器 中间是空格*/
.bg p{
background: pink;
color: blue;
}
</style>
</head>
<body>
<div class="bg">
<p>背景为粉色，字体为蓝</p>
<div>
<p>背景为粉色，字体为蓝</p>
<p>背景为粉色，字体为蓝</p>
</div>
<p>背景为粉色，字体为蓝</p>
</div>
</body>
</html>后代选择器并不是只能弄两级，可以有很多层级
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.bg p span{
background: pink;
color: blue;
}
</style>
</head>
<body>
<div class="bg">
<p>背景为粉色，字体为蓝</p>
<div>
<p>背景为粉色，字体为蓝 <span>p里面的span</span></p>
<p>背景为粉色，字体为蓝 <span>p里面的span</span></p>
</div>
<p>背景为粉色，字体为蓝</p>
<span>span</span>
</div>
</body>
</html>上面这段代码，就是类名bg中的p里面的span套用这个样式
子选择器
它和后代选择器不同，它就是选择它儿子的，至于后代不关它的事
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.bg > p {
background: pink;
color: blue;
}
</style>
</head>
<body>
<div class="bg">
<p>背景为粉色，字体为蓝</p>
<div>
<p>背景为粉色，字体为蓝
<p>背景为粉色，字体为蓝
</div>
<p>背景为粉色，字体为蓝</p>
</div>
</body>
</html>中间两行并没有相应的样式，因为它们不是类名bg的儿子，它们是孙子。
但可以这样
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*将.bg 改成 div*/
div > p {
background: pink;
color: blue;
}
</style>
</head>
<body>
<div class="bg">
<p>背景为粉色，字体为蓝</p>
<div>
<p>背景为粉色，字体为蓝
<p>背景为粉色，字体为蓝
</div>
<p>背景为粉色，字体为蓝</p>
</div>
</body>
</html>这样就是div标签的儿子们，名为p的标签就用这些样式，所以全部都有样式了。
兄弟选择器
这个只能选择某个选择器的第一个弟弟元素
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.bg + p{
background: pink;
color: blue;
}
</style>
</head>
<body>
<p>我是类名bg的哥哥</p>
<p>我是类名bg的哥哥</p>
<div class="bg">
我是类名bg
</div>
<p>我是类名bg的第一个弟弟</p>
<p>我是类名bg的第二个弟弟</p>
</body>
</html>那把.bg + p换成这样 .bg + p + p会是什么结果
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.bg + p + p{
background: pink;
color: blue;
}
</style>
</head>
<body>
<p>我是类名bg的哥哥</p>
<p>我是类名bg的哥哥</p>
<div class="bg">
我是类名bg
</div>
<p>我是类名bg的第一个弟弟</p>
<p>我是类名bg的第二个弟弟</p>
<p>我是类名bg的第三个弟弟</p>
</body>
</html>这样子就是选择类名bg的一个弟弟的一个弟弟了
弟弟选择器
这个是自己命名的，它选择某元素的所有弟弟，不再是第一个弟弟了
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div~p{
background: pink;
color: red;
}
</style>
</head>
<body>
<div>div</div>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
<p>p</p>
</body>
</html>属性选择器
第一种
只要标签上有某个指定属性的就用这些样式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*写法:
选择器[属性名] 不一定要标签名[属性名] 可以是 类名[属性名]
当然前面这个选择器也是可以省略的，不过那样就只要我的标签有这个属性就用这些样式
前面这个选择器就是限定了，我a标签里面的有这个target属性时运用样式
*/
a[target]{
background: pink;
color: red;
}
</style>
</head>
<body>
<a href="#" >标签1</a>
<a href="#" target="_blank">标签2</a>
<a href="#" target="_top">标签3</a>
</body>
</html>第二种
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*写法: 选择器[属性=值]*/
a[target=_blank]{
background: pink;
color: red;
}
</style>
</head>
<body>
<a href="#" >标签1</a>
<a href="#" target="_blank">标签2</a>
<a href="#" target="_top">标签3</a>
</body>
</html>第三种
只要我这个属性的值有我指定的字段，就套用这些样式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
a[title~=this]{
background: pink;
color: red;
}
</style>
</head>
<body>
<a href="#" title="this that">标签1</a>
<a href="#" title="as this that">标签2</a>
<a href="#" title="b that">标签3</a>
<a href="#" title="this1">标签4</a>
</body>
</html>再来看另一个
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*如果把a去掉，下面的div就可以有这样式，如果不去掉，div就无法用这样式*/
[title~=this]{
background: pink;
color: red;
}
</style>
</head>
<body>
<a href="#" title="this that">标签1</a>
<a href="#" title="as this that">标签2</a>
<a href="#" title="b that">标签3</a>
<a href="#" title="this1">标签4</a>
<div title="this">div</div>
</body>
</html>第四种
选择属性值以某个字段开头的元素
这里稍微有点问题，这个值必须是单词的形式，如果是句子是不行的
title="this-is"这种是可行的
title=”this”`这种也是可行的
title="this1s" 这是不行的
title=”this 1s”` 这也是不行的
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
[title|=this]{
background: pink;
color: red;
}
</style>
</head>
<body>
<a href="#" title="this1s">标签1</a>
<a href="#" title="this-is-sb">标签2</a>
<a href="#" title="that-is-250 ss">标签3</a>
<a href="#" title="this is">标签4</a>
<a href="#" title="this">标签5</a>
</body>
</html>第五种
通过正则来匹配值的选择器
- [属性^=值] [href^=”https”] 值以https开头的
- [属性$=值] [href$=”com”] 值以com结尾的
- [属性*=值] [href*=”baidu”] 值baidu这个字符串
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
[href^=https]{
background: pink;
color: red;
}
[href$=cn]{
background: #444;
color: yellow;
}
[href*=baidu]{
background: #444;
color: #ffffff;
}
</style>
</head>
<body>
<a href="https://www.852.com" >标签1</a>
<a href="https://www.456.com" >标签2</a>
<a href="http://www.baidu.cn1" >标签3</a>
<a href="http://www.123.cn" >标签4</a>
<a href="http://www.123.cn" >标签5</a>
</body>
</html>伪元素选择器
为什么叫伪元素选择器，这种命名的概念问题不要纠结，主要我也不清楚啊，还是看都有哪些作用吧
first-line、first-letter、before和after
first-line 设置文本中第一行的样式
first-letter设置文本中第一个字的样式
before在某个元素前插入内容
after在某个元素后插入内容
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*伪元素选择器， ::first-line 这是两个冒号，但经过测试，一个冒号也是有效的*/
.p1:first-line{
color: red;
}
.p2:first-letter{
font-size: 24px;
}
.p3:before{
content: "※"
}
.p4:after{
content: "__hellow world"
}
</style>
</head>
<body>
<p class="p1">文本中的第一行 <br> 文本中的第二行 </p>
<p class="p2">天生我才必有用</p>
<p class="p3">在前面插入内容</p>
<p class="p4">在后面插入内容</p>
</body>
</html>root、not、empty和target选择器
root选择器绑定页面的根元素，也就是html元素
一般可以在这设置一些全局的样式，比如重新设置字体的默认颜色，大小，字体样式，比如楷体，宋体之类的
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
:root{
background: green;
}
</style>
</head>
<body>
</body>
</html>not选择器，用于排除哪个元素不使用该样式，写法为 选择器 *:not(排除的选择)
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div *:not(h1){
background: green
}
</style>
</head>
<body>
<div>
<h1>h1</h1>
<p>文本</p>
</div>
</body>
</html><!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div *:not(.p){
color: red;
}
</style>
</head>
<body>
<div>
<h1>h1</h1>
<p>文本</p>
<p>文本</p>
<p class="p">文本</p>
</div>
</body>
</html>empty选择器 当元素内容为空时使用该样式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
:empty{
background: red;
}
div{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<div></div>
<p></p>
</body>
</html>在这里是给div设置了高度和宽度，因为第一个div它有内容，p标签，所以没有改变颜色，但第二个div因为没有内容，所以符合empty选择器，所以改变了颜色，至于p标签页没有内容，但却也没有改变颜色，那是因为p的高度为0，改变颜色也看不出来，可以给p设置高度，这样就会看到效果了。
target选择器，用于a标签的锚点功能，跳到对应内容，那内容会获得相应的样式，点击a标签，可看到效果。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
:target{
background: yellow;
}
</style>
</head>
<body>
<p id="menu">
<a href="#text1">文字1</a>
<a href="#text2">文字2</a>
<a href="#text3">文字3</a>
<a href="#text4">文字4</a>
<a href="#text5">文字5</a>
</p>
<div id="text1">
<h2>文字1</h2>
<p>内容1</p>
</div>
<div id="text2">
<h2>文字2</h2>
<p>内容2</p>
</div>
<div id="text3">
<h2>文字3</h2>
<p>内容3</p>
</div>
<div id="text4">
<h2>文字4</h2>
<p>内容4</p>
</div>
<div id="text5">
<h2>文字5</h2>
<p>内容5</p>
</div>
</body>
</html>first-child、last-child、nth-child、nth-last-child
-
first-child单独指定第一个子元素 -
last-child单独指定最后一个子元素
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/*注意是 li 不是 ul */
li:first-child{
background: yellow;
}
li:last-child{
background: green;
}
</style>
</head>
<body>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ul>
</body>
</html>nth-child不仅可以指定父元素中的第一个子元素和最后一个元素，还可以根据序号指定元素
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/* li:nth-child(0) 是 无效的 */
li:nth-child(1){
background: yellow;
}
li:nth-child(2){
background: red;
}
li:nth-child(3){
background: blue;
}
li:nth-child(4){
background: green;
}
li:nth-child(5){
background: pink;
}
</style>
</head>
<body>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ul>
</body>
</html>不仅可以指定序号还可以指定奇偶
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
table{
width: 80%;
height: 300px;
margin: 0 auto;
text-align: center;
}
/*odd 是指 奇数*/
tr:nth-child(odd){
background: pink;
}
/*even 是指 偶数*/
tr:nth-child(even){
background: brown;
}
tr:first-child{
background: #fff;
}
</style>
</head>
<body>
<table>
<tr>
<th>单元格1</th>
<th>单元格2</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>那么问题来了，为什么第一行没有被改变颜色
<tr>
<th>单元格1</th>
<th>单元格2</th>
</tr>因为被最后的样式给覆盖了
tr:first-child{
background: #fff;
}原先是表格中tr是奇数时改为背景粉色，后来因这段代码，又变成了白色。
nth-last-child和nth-child用法一样，只不过是从后面数起。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
li:nth-last-child(1){
background: yellow;
}
li:nth-last-child(2){
background: red;
}
li:nth-last-child(3){
background: blue;
}
li:nth-last-child(4){
background: green;
}
li:nth-last-child(5){
background: pink;
}
</style>
</head>
<body>
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
<li>项目5</li>
</ul>
</body>
</html>不过nth-child会引发一个很重要的问题
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
h2:nth-child(odd){
background: yellow;
}
h2:nth-child(even){
background: skyblue;
}
</style>
</head>
<body>
<div>
<h2>文章标题1</h2>
<p>内容1</p>
<h2>文章标题2</h2>
<p>内容2</p>
<h2>文章标题3</h2>
<p>内容3</p>
<h2>文章标题4</h2>
<p>内容4</p>
<h2>文章标题5</h2>
<p>内容5</p>
<h2>文章标题6</h2>
<p>内容6</p>
<h2>文章标题7</h2>
<p>内容7</p>
<h2>文章标题8</h2>
<p>内容8</p>
<h2>文章标题9</h2>
<p>内容9</p>
<h2>文章标题10</h2>
<p>内容10</p>
</div>
</body>
</html>这里的h2的背景颜色都是黄色，我们原先设想的是奇数的h2是黄色，偶数的是浅蓝色，为何会出现这种情况
那是因为nth-child在计算奇偶时，是将父元素下所有的元素一起算的，它的语义并不是div元素中第奇数个h2元素，而是在div元素中的第奇数个子元素如果是h2元素就用这些样式，因此上面的h2元素因为p元素的关系，永远都处于奇数的位置。
那么有没有解决的办法，是有的
nth-of-type和nth-last-of-type
这两个前者是从前往后数，后者是从后往前数，所以我只写第一个，它们用法是一样的
上面那代码，只要改成这个nth-of-type选择器就行了，它的意思就是div元素中第奇数个h2元素
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
h2:nth-of-type(odd){
background: yellow;
}
h2:nth-of-type(even){
background: skyblue;
}
</style>
</head>
<body>
<div>
<h2>文章标题1</h2>
<p>内容1</p>
<h2>文章标题2</h2>
<p>内容2</p>
<h2>文章标题3</h2>
<p>内容3</p>
<h2>文章标题4</h2>
<p>内容4</p>
<h2>文章标题5</h2>
<p>内容5</p>
<h2>文章标题6</h2>
<p>内容6</p>
<h2>文章标题7</h2>
<p>内容7</p>
<h2>文章标题8</h2>
<p>内容8</p>
<h2>文章标题9</h2>
<p>内容9</p>
<h2>文章标题10</h2>
<p>内容10</p>
</div>
</body>
</html>nth的循环使用
nth-child、nth-last-child、nth-of-type、nth-last-of-type都可以使用循环样式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/* n 会从0开始循环相加 4n+1 也就是 第一个，第五个，第九个，第十三个，如此类推，符合的都会用到相应的颜色*/
li:nth-child(4n+1){
background: red;
}
li:nth-child(4n+2){
background: green;
}
li:nth-child(4n+3){
background: yellow;
}
li:nth-child(4n+4){
background: blue;
}
</style>
</head>
<body>
<ul>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
</ul>
</body>
</html>only-child
当父元素有且只有一个子元素时使用
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
p:only-child{
background: skyblue;
}
</style>
</head>
<body>
<div>
<p>p1</p>
</div>
<div>
<p>p1</p>
<p>p2</p>
</div>
</body>
</html>这个相当于nth-child和nth-last-child一起使用
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
p:nth-child(1):nth-last-child(1){
background: skyblue;
}
</style>
</head>
<body>
<div>
<p>p1</p>
</div>
<div>
<p>p1</p>
<p>p2</p>
</div>
</body>
</html>伪类选择器
元素处于某种状态下时会触发的选择器
E:hover、E:active、E:focus
上面的E代表着选择器的意思，比如类选择器，标签选择器，属性选择器等
E:hover 当鼠标放上去时触发该类
E:active 元素被激活，鼠标在元素上按下且不松开
E:focus 元素聚焦时
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
div:hover{
color: red;
}
p:active{
color: blue;
}
input:focus{
background: skyblue;
}
</style>
</head>
<body>
<div>
鼠标放上去时变为红色
</div>
<p>鼠标在这里按下别松开</p>
<input type="text" name="">
</body>
</html>E:enabled与E:disabled
E:enabled 当指定元素处于可用状态时
E:disabled 当指定元素处于不可用状态时
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:enabled{
background: #ccc;
}
input:disabled{
background: skyblue;
}
</style>
</head>
<body>
<input type="text" placeholder="可用">
<input type="text" placeholder="禁用" disabled>
</body>
</html>E:read-only和E:read-write
E:read-only 指定元素处于只读状态时的样式
E:read-write 指定当元素处于非只读状态时的样式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:read-only{
background: pink;
}
input:read-write{
background: skyblue;
}
</style>
</head>
<body>
<input type="text" placeholder="非只读">
<input type="text" placeholder="只读" readonly>
</body>
</html>E:checked、E:default和E:indeterminate
E:checked 用来指定表单中的单选框或复选框处于选择时的状态
一般情况下，复选框在非选择状态时边框默认为黑色
E:default 用户打开网页时默认处于选取模式下的控件的样式，哪怕你手动将多选框取消选中，它依然是这个样式
E:indeterminate 当打开网页时，复选框或单选框没有选择时的样式，选择后者样式将会被取消，但是目前只有opera支持这个选择器
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:checked{
outline: 1px solid pink;
}
input:default{
outline: 1px solid blue;
}
input:indeterminate{
outline: 1px solid red;
}
</style>
</head>
<body>
<h2>请选择你的技能</h2>
<div>
<label for="jn1">矢量操控</label><input type="checkbox" id="jn1" checked>
</div>
<div>
<label for="jn2">轮回眼</label><input type="checkbox" id="jn2">
</div>
<div>
<label for="jn3">幻想杀手</label><input type="checkbox" id="jn3">
</div>
<div>
<label for="jn4">全属性灭龙魔导士</label><input type="checkbox" id="jn4">
</div>
</body>
</html>E:selection
当元素被选择的时候，就是鼠标选取文字的时候，你要复制文本的时候，默认是蓝色背景，白色文字，你可以用这选择去修改它的样式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
/* 注意：这是两个冒号，如果只有一个，那是没有效果的 */
div::selection,p::selection{
background: #000;
color: pink;
}
</style>
</head>
<body>
<p>p的文本</p>
<div>div的文本</div>
</body>
</html>通配符 *
通配符就是指定了页面上的所有元素，也就是所有的标签
比如上面那段代码，如果确定网页上的所有文字被选取时都是那样式的时候，其实可以这样写
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
*::selection{
background: #000;
color: pink;
}
</style>
</head>
<body>
<p>p的文本</p>
<div>div的文本</div>
</body>
</html>E:invalid和E:valid
E:invalid 当元素不能通过HTML5自带的验证时的样式
E:valid 当元素通过HTML5自带的验证时的样式
可以先输入数字，在鼠标点击其他地方，让输入框失去焦点，会根据符不符合来选取对应的样式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:invalid{
border: 1px solid red;
}
input:valid{
border: 1px solid skyblue;
}
</style>
</head>
<body>
<input type="email" name="">
</body>
</html>E:required与E:optional
E:required 拥有required这个属性时的样式
E:optional 没有required这个属性时的样式
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:required{
background: red;
}
input:optional{
background: skyblue;
}
</style>
</head>
<body>
<input type="text" name="" required>
<input type="text" name="" >
</body>
</html>E:in-range与E:out-of-range
前者是值在范围内时的样式，后者是值在范围外，比如对于<input type="number" min="1" max="100">
如果数字在1到100之间，那就是第一个选择器的样式，如果不在这个范围就第二个选择器的样式
试下输入50和500会有什么效果
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
input:in-range{
background: red;
}
input:out-of-range{
background: skyblue;
}
</style>
</head>
<body>
<input type="number" min="1" max="100">
</body>
</html>说下a标签的状态
a标签有四个状态
- :link 链接未被点击
- :visited 链接被点击过了
- :hover 鼠标在链接上面
- :active 鼠标在链接上按下并不要松开
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: blue;
}
a:active{
color: yellow;
}
</style>
</head>
<body>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
<a href="#">链接</a>
</body>
</html>注意：
如果你发现你点击标签后，:hover的样式失效了，请检查你的书写顺序，虽然按逻辑来看是链接未被点击，鼠标在链接上，链接激活也就是鼠标点击了的瞬间，然后就是鼠标点击后，如果按照这样子的排列方式就出现上面所说的:hover丢失样式的bug，应该像上面代码那样写，:link->:visited->:hover->:active
版权声明：本文为tourey-fatty原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。