伪类/伪元素选择符/选择器 深入了解:
一、伪类选择符/选择器
CSS伪类是用来添加一些选择器的特殊效果。
就是给某个元素后面加上冒号然后加上需要的特殊修饰词 选择到所需要的效果,或者是元素。
①元素使用伪类 例如:a:link
②元素的类使用伪类 例如:a.red:visited red是一个class类
又分为:
1、a链接伪类
2、普通元素伪类,例如p元素,div元素
3、input表单元素伪类
4、 :root 文档的根元素,通常根元素是 <html>
按类型分:
伪类:通过选择器可以选择到一类元素,可能是0个,1个,多个,
伪元素:通过选择器可以选择到一个元素,例如:after :before :first-letter :first-line
1、a元素 :超链接伪类、超链接结合class类的伪类
超链接伪类
a:link {color:#FF0000;} /* 未访问的链接 (就是鼠标没有放上去,没有做任何操作,呈现的效果)*/
a:visited {color:#00FF00;} /* 已访问的链接 (就是鼠标已经放上去,并且点击之后,呈现的效果)*/
a:hover {color:#FF00FF;} /* 鼠标划过链接(就是鼠标已经放上去,呈现的效果) */
a:active {color:#0000FF;} /* 已选中的链接 (就是鼠标已经放上去,点击的时候,鼠标没有松开的时候,呈现的效果)*/
这个伪类使用一定要按照顺序写,先是a:link, 然后是a:visited,再然后是a:hover,最后是a:active
结合class类型的超链接伪类
a.classname:link {color:#FF0000;}
/* 未访问,且类型为classname的链接 (就是鼠标没有放上去,没有做任何操作,呈现的效果)*/
a.classname:visited {color:#00FF00;}
/* 已访问且类型为classname的链接 (就是鼠标已经放上去,并且点击之后,呈现的效果)*/
a.classname:hover {color:#FF00FF;}
/* 鼠标划过且类型为classname的链接(就是鼠标已经放上去,呈现的效果) */
a.classname:active {color:#0000FF;}
/* 已选中且类型为classname的链接 (就是鼠标已经放上去,点击的时候,
鼠标没有松开的时候,呈现的效果)*/
代码:
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:Georgia, serif;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>将鼠标移至链接上改变样式.</p>
<p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>
</body>
结果:具体结果需要鼠标操作得到体现
2、普通元素(非链接,非表单):的伪类、结合class类的伪类
序号 | 示例 | 说明 |
---|---|---|
① | p:empty | 选择所有没有子元素,没有文本的p元素。适用p元素,也使用其他元素 |
② | p:first-of-type | 选择每个父元素是元素的第一个p子元素。适用p元素,也适用其他元素 通俗说:就是拥有父元素的第一次出现的p元素。如果换成其他元素就是其他元素 |
③ | p:only-of-type | 选择所有仅有一个子元素为p的元素,适用p元素,也适用其他元素 通俗说: 就是父元素中只有一个p元素(如果换成其他元素就是其他元素), 这个p元素(如果换成其他元素就是其他元素)就会被选择到。 |
④ | p:last-of-type | 选择每个父元素是元素的最后一个p子元素。适用p元素,也适用其他元素 通俗说:就是拥有父元素的最后一次出现的p元素(如果换成其他元素就是其他元素) |
⑤ | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素,适用p元素,也适用其他元素 通俗说: |
⑥ | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素,适用p元素,也适用其他元素 通俗说: |
⑦ | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
⑧ | p:last-child | 选择每个父元素是元素的最后一个p子元素。适用p元素,也适用其他元素。 通俗说:就是拥有父元素的最后一个元素, 如果是p元素(如果换成其他元素就是其他元素) 就会被选择到。 |
⑨ | p:only-child | 选择所有仅有一个子元素的p元素,适用p元素,也适用其他元素。 通俗说:就是父元素中只有一个子元素,如果是p元素(如果换成其他元素就是其他元素)就会被选择到。 |
⑩ | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素,适用p元素,也适用其他元素 通俗说: |
⑪ | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素,适用p元素,也适用其他元素 通俗说: |
⑫ | p:first-letter | 选择每个<p> 元素的第一个字母。适用p元素,也适用其他元素 通俗说: |
⑬ | p:first-line | 选择每个<p> 元素的第一行。适用p元素,也适用其他元素 通俗说: |
⑭ | p:before | 在每个<p>元素之前插入内容。适用p元素,也适用其他元素、 通俗说: |
⑮ | p:after | 在每个<p>元素之后插入内容。适用p元素,也适用其他元素、 通俗说: |
⑯ | p:lang(it) | 为<p>元素的lang属性选择一个开始值。适用p元素,也适用其他元素、 通俗说: |
2.1 p:empty
适用:适用于p元素,也适用于其他元素 ,修改元素名称即可。
说明: 选择所有没有子元素,且没有文本!!!的p元素
选择到的元素个数:可以选择到 0个,1个,多个
代码:
div:empty,选择所有没有子元素,且没有文本的div元素,
<style>
div {
width: 500px;
height: 100px;
}
div:empty {
background-color: brown;
}
</style>
</head>
<body>
<div>
<p>我有子元素!</p>
<span>
这是子元素
</span>
</div>
<div></div>
</body>
结果展示:
注意的问题:
① 元素里面不能有文本,有文本就不是空元素,
② 元素里面不能有空格,空格也是文本,就不是空元素,
③空元素的闭标签不能换行,在编辑器里面,只要换行了,就会默认的在里面填入一个空格的空间,有空格也不是空元素
如下的文档就不会被当做是空元素
<div>有文本就不是空元素</div>
<div><p></p></div> <!-- 虽然没有文本但是有子元素也不是空元素 -->
<!-- 开始标签与闭合标签中间有空格也不是空元素,换行就会插入一个空格也不是空元素 -->
<div>
</div>
2.2 p:first-of-type
适用:适用于p元素,也适用于其他元素 ,修改元素名称即可。
说明: 选择每个父元素是元素的第一个p子元素。适用p元素,也适用其他元素
通俗说:就是拥有父元素的第一次出现的p元素。如果换成其他元素就是其他元素
代码:
<style>
p:first-of-type {
background: #ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>父元素body里面第一个出现的p元素</p>
<p>The second paragraph.</p>
<div>
<p>父级div中第一个出现的p元素</p>
<p>The fourth paragraph.</p>
<span>
<p>父级span里面第一个出现的p元素</p>
<p>The fourth paragraph.</p>
</span>
</div>
</body>
结果展示:
注意的问题:后面解决?????
① p元素不能与父元素 是同类型元素,否则选取不到,也就是所p元素中的第一个p选取不到,为什么????
② div元素可以与父元元素是同类元素,可以选择到,也就是说div元素中的第一个div可以选取到,为什么???
③span元素可以与父元素是同类元素,可以选择到,也就是说span元素中的第一个span可以选择到,为什么???
代码:
<style>
p:first-of-type {
background: blue;
}
div:first-of-type {
background: red;
}
span:first-of-type {
background: yellow;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>父元素body里面第一个出现的p元素,变蓝色</p>
<p>The second paragraph.</p>
<p>The fourth paragraph.</p>
<p>
<p>父级p里面第一个出现的p元素,但是与父元素同名,没有被获取到,没有变蓝色,什么原因??</p>
<p>The fourth paragraph.</p>
</p>
<div>父元素body里面第一个出现的div元素,变红色</div>
<div>
<div>父级div里面第一个出现的div元素,但是与父元素同名,可以被选择到,变红色,什么原因??</div>
<div>The fourth paragraph.</div>
</div>
<div>
<span>父元素div里面第一个出现的span元素,变黄色</span>
<span>
<span>父级span里面第一个出现的span元素,但是与父元素同名,可以被选择到,变黄色,什么原因??</span>
<span>不是第一个,我不变</span>
</span>
<span>不是不是</span>
</div>
</body>
结果展示:
2.3 p:ony-of-type
代码:
stylediv {
border: 1px solid black;
}
p:only-of-type {
background: #ff0000;
}
</style>
</head>
<body>
<div>
<span>sapaspan</span>
<p>pppppp1,这个父元素中只有一个p元素,这个p元素被选择到,变红色</p>
</div>
<div>
<span>sapaspan</span>
<p>pppppppp1,这个div父元素中有2个p元素,这个p元素不会被选择到,不变</p>
<p>pppppppp2,这个div父元素中有2个p元素,这个p元素不会被选择到,不变</p>
</div>
<div>
<p>pppppppppppppp1,这个父元素中只有一个p元素,这个p元素被选择到,变红色</p>
</div>
</body>
结果展示:
2.4 p:last-of-type
代码:与first-of-type类似,只不过是最后一个,不写代码了
2.5 p:nth-last-of-type(2)
说明:
代码:
结果展示:
注意的问题:
①
②
2.6 p:nth-of-type(2)
说明:
代码:
结果展示:
注意的问题:
①
②
2.7 p:first-child
说明:
代码:
结果展示:
注意的问题:
①
②
2.8 p:last-child
代码:
<style>
p:last-child {
background: blue;
}
div:last-child {
background: red;
}
span:last-child {
background: yellow;
}
</style>
</head>
<body>
<p>你是谁</p>
<p>我是body的最后一个p元素,但是不是body的最后一个元素,不会变蓝色</p>
<div>
<p>who are you</p>
<p>who are you</p>
<p>我是div中最后一个元素,是p元素,变蓝色</p>
</div>
<span>
<span>3333</span>
<span>我是span中最后一个元素,是span元素,变黄色</span>
</span>
<div>我是body中最后一个元素,是div元素,变红色</div>
</body>
注意的问题:
① 选择父元素中的最后一个元素,其他的不会去选择
② 最后一个如果是 last-child 前面的元素类型,会被选择到,否则不会被选择到的。
2.9 p:only-child
说明:选择所有仅有一个子元素的p元素,适用p元素,也适用其他元素。
通俗说:就是父元素中只有一个子元素,如果是p元素(如果换成其他元素就是其他元素)就会被选择到。
代码:
<style>
div {
border: 1px solid black;
}
p:only-child {
background: red;
}
div:only-child {
background: yellow;
}
</style>
</head>
<body>
<div>
<p>pppppp1,这个父元素中只有一个元素,且是p元素这个p元素被选择到,,变红色</p>
</div>
<div>
<span>sapaspan</span>
<p>pppppppp1,这个div父元素中有2个子元素,这个p元素不会被选择到,不变色</p>
</div>
<div>
<div>
这个父元素div中只有一个子元素div,变黄色
</div>
</div>
结果展示:
注意的问题:
① 要选择的是父元素只有一个子元素的 元素(也就是咩有兄弟元素)
2.10 p:nth-child(2)
说明:
代码:
结果展示:
注意的问题:
①
②
2.11 p:nth-last-child(2)
说明:
代码:
结果展示:
注意的问题:
①
②
2.12 p:first-letter
说明:
代码:
结果展示:
注意的问题:
①
②
2.13 p:first-line
说明:
代码:
结果展示:
注意的问题:
①
②
2.14 p:before
说明:选择每个<p> 元素的第一行。适用p元素,也适用其他元素
代码:
结果展示:
注意的问题:
①
②
2.15 p:after
说明:在每个<p>元素之后插入内容。适用p元素,也适用其他元素、
代码:
结果展示:
注意的问题:
①
②
2.16 p:lang(it)
说明:为<p>元素的lang属性选择一个开始值。适用p元素,也适用其他元素、
代码:
结果展示:
注意的问题:
①
②
3、input表单元素:的伪类、结合class类的伪类
input元素来做伪类选择
序号 | 示例 | 说明 |
---|---|---|
① | input:checked | 选择所有选中的表单元素,仅适用于单选按钮或复选框 |
② | input:disabled | 选择所有被禁用的表单元素,用于表单元素 , 通常用来改变背景为灰色,代表不可填写 |
③ | input:enabled | 选择所有启用的表单元素,用于表单元素 , 通常用来改变背景为白色,代表可填写 |
④ | input:in-range | 选择元素指定范围内的值 |
⑤ | input:invalid | 选择所有无效的元素 |
⑥ | input:optional | 选择没有"required"的元素属性 |
⑦ | input:out-of-range | 选择指定范围以外的值的元素属性 |
⑧ | input:read-only | 选择只读属性的元素属性 |
⑨ | input:read-write | 选择没有只读属性的元素属性 |
⑩ | input:required | 选择有"required"属性指定的元素属性 |
⑪ | input:focus | 选择元素输入后具有焦点 |
⑫ |
4、:root
:root选择器用匹配文档的根元素。在HTML中根元素始终是HTML元素。
代码:
:root
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
结果展示: