html时间选择框_CSS3选择器1、属性选择器
说明
选取标签带有某些特殊属性的选择器
常⽤
E[attr] 选择器
选择具有attr属性的E元素
<style>
button{
color: red;
}
button[disabled]{
color: #cccccc;
}
</style>
<button>Button</button>
<button>Button</button>
<button disabled='disabled'>Button</button>
<button disabled='disabled'>Button</button>
E[attr="val"] 选择器
选择具有attr属性且属性值等于val的E元素
<style>
input[type='search']{
color: pink;
}
</style>
<input type="text" value="⽂本框" />
<input type="text" value="⽂本框" />
<input type="search" value="搜索框" />
<input type="search" value="搜索框" />
E[attr^="val"] 选择器
选择具有attr属性且属性值以val开头的E元素
举例：
<style>
div[cladd^='']{
color: pink;
}
</style>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
E[attr$="val"] 选择器
选择具有attr属性且属性值以val结尾的E元素
举例：
div[cladd$='4']{
color: pink;
}
E[attr*="val"] 选择器
选择具有attr属性且属性值含有val的E元素
举例：
css 属性选择器div[cladd*='2']{
color: pink;
}
注意
类选择器、属性选择器、伪类选择器权重都为10
2、结构伪类选择器常⽤
:first-child  选择器
表⽰选择⽗元素的第⼀个⼦元素E 选择⽗元素的第⼀个⼦元素E。简单点理解就是选择元素中的第⼀个⼦元素，记住是⼦元素⼦元素，⽽不是后代元素。
举例：
ol > li:first-child{
color: red;
}
:last-child  选择器
选择的是元素的最后⼀个⼦元素。⽐如，需要改变的是列表中的最后⼀个“li”的背景⾊，就可以使⽤这个选择器。
举例：
ol > li:last-child{
color: red;
}
:nth-child(n) 选择器
⼀个或多个特定的⼦元素。其中“n”是其参数，不仅可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和⽤来定位某个⽗元素
⽗元素的⼀个或多个特定的⼦元素
关键词(odd 奇数、even)，但参数n的起始值始终是1，⽽不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
举例：
ol li:nth-child(even){
background: orange;
}
注意
选择⽗元素⾥⾯的第n个孩⼦，不管⽗元素⾥⾯是否是同⼀种类型。
:empty 选择器
哪怕是⼀个空格。
表⽰的就是空。⽤来选择没有任何内容的元素，这⾥没有内容指的是⼀点内容都没有，哪怕是⼀个空格
举例：
p{
background: orange;
min-height: 30px;
}
p:empty {
display: none;
}
:root 选择器
从字⾯上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在⽂档的根元素。在HTML⽂档中，根元素始终是<html>。
:root{
background:pink;
}
/*等同于*/
html {background:pink;}
:nth-last-child(n)选择器
从最后⼀个开始算索引。
举例：
ol > li:nth-last-child(1){
color: blue;
}
E:first-of-type选择器
匹配同级兄弟元素中的第⼀个E元素，of-type 选择指定类型的元素
举例：
div span:first-of-type{
background-color: yellowgreen;
}
<div>
<p>p标签</p>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
</div>
E:last-of-type选择器
匹配同级兄弟元素中的最后⼀个E元素，of-type 选择指定类型的元素举例：
div span:last-of-type{
background-color:rebeccapurple;
}
<div>
<p>p标签</p>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
</div>
E:nth-of-type选择器
匹配同级兄弟元素中的最后⼀个E元素，of-type 选择指定类型的元素举例：
div span:nth-of-type(2){
background-color: blue;
}
<div>
<p>p标签</p>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
</div>
注意
1. ul ⾥⾯中允许放li，所以nth-child和nth-of -type是⼀样的
2. 伪类选择器权重为10
3、伪元素选择器
常⽤
E::before和E::after
说明
==⾏内元素==，且必须要结合content属性使⽤，因为在dom中看不见创在E元素内部的开始位置和结束位创建⼀个元素，该元素为==⾏内元素==
建的元素，所以称为伪元素。
语法
div::befor {
content:"开始";
}
div::after {
content:"结束";
}
注意
1. E:after、E:before 在旧版本⾥是伪元素，CSS3的规范⾥“:”⽤来表⽰伪类，“::”⽤来表⽰伪元素，但是在⾼版本浏览器下
E:after、E:before会被⾃动识别为E::after、E::before，这样做的⽬的是⽤来做兼容处理。
2. ":" 与 "::" 区别在于区分伪类和伪元素
3. 伪元素和标签选择器⼀样，权重为1
E::first-letter
说明
⽂本的第⼀个单词或字（如中⽂、⽇⽂、韩⽂等）
语法
p::first-letter {
font-size: 20px;
color: hotpink;
}
E::first-line
说明
⽂本第⼀⾏
语法
/* ⾸⾏特殊样式 */
p::first-line {
color: skyblue;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。