CSS选择器
妥瑞小胖墩 人气:1选择器的用处就是告知浏览器,我这一大堆的样式要用在哪些元素
选择器很重要,学好了,可以减少很多CSS代码,不用像以前一样,一大堆类选择器。
以下为了方便查看CSS代码,我采用内联样式的方法,但在实际开发中,建议用外联样式,这有利于页面的性能优化。
id选择器
id选择器,要在标签添加id属性和其值,css根据id来赋予元素样式。
在一个网页文件中,id名不能重复,如下代码有个id="div",就不能再来一个id="div"了,但可以是其他的值,Id名就像SFZ一样,每个只有一个,并且不能重复。
<!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
加载全部内容