CSS3选择器
首先介绍传统的2.1版本选择器,然后再是css3新增选择器。
标签选择器和id选择器
1、标签选择器也称元素选择器、类型选择器,它直接使用元素的标签名当作选择器,无论这个标签所处位置的深浅,它都将选择页面上所有该种标签。其“覆盖面”非常大,所以通常用于标签的初始化。书写方法如下所示:
span{ /*选择页面上所有span标签*/
color:red;
}
b{ /*选择页面上所有b标签*/
color:green;
}`
2、认识id属性:这是这个标签的唯一标识,id名称只能由字母、数字、下划线、短横构成,且不能以数字开头,字母区分大小写,但习惯上一般为小写字母。同一页面上不可以存在相同的id标签。
3、CSS选择器可以使用井号#前缀,选择指定id的标签。
<p id="para1">我是一个段落</p>
#para1{ /*选择id为para1的标签*/
color:red:
}
class选择器
class属性表示“类名”,其命名规范和id命名规范相同,也由字母、数字、下划线、短横构成,且不能以数字开头,字母区分大小写,但习惯上一般为小写字母。使用点.前缀的方式选择指定class的标签。多个标签可以使用相同的类名,同一个标签可以同时属于多个类,类名使用空格隔开。
/************示例一**********/
.warning{ /*选择类名为warning的标签*/
color:red;
}
<p class="warning">我是段落</p>
<ul>
<li>我是列表项</li>
<li class="warning">我是列表项</li> /*和<p>标签类名相同*/
</ul>
/************示例二***********/
<p class="warning spec">我是段落</p>
/*<p>标签同时属于“warning”和"spec"两个类。*/
.warning{
color:red;
}
.spec{
font-style:italic; /*文字倾斜*/
}
原子类:在制作网页项目前,可以将所有常用的字号、文字颜色、行高、外边距、内边距等都设置为单独的类。此时HTML标签就可以“则需选择”它的类名,这样就可以快速添加一些常用样式。示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fs1{
font-size: 14px;
}
.fs2.{
font-size: 18px;
}
.color1{
color: blue;
}
.color2{
color: pink;
}
.color3{
color: green;
}
.color4{
color: red;
}
.color5{
color: yellow;
}
</style>
</head>
<body>
<p class="fs1 color1">
我是一个p标签,我的字体是14px
</p>
<p class="fs2 color2">
我是一个p标签,我的字体是14px
</p>
<p class="fs1 color3">
我是一个p标签,我的字体是14px
</p>
<p class="fs1 color4">
我是一个p标签,我的字体是14px
</p>
<p class="fs2 color5">
我是一个p标签,我的字体是14px
</p>
</body>
</html>
演示结果如图:
复合选择器
- 在CSS选择器中,使用空格表示“后代”,后代不一定是"儿子",后代选择器中可以有很多空格,隔开好几代。
.box p{ /* 选择类名为box的标签后代的p标签*/
color:red;
}
.box ul li .spec em{ /*隔开多代*/
color:red;
}
.ul,ol{ /*并集选择器*/
list-style:none;
}
<div class="box">
<p>我是盒子中的段落</p> /*将被选择*/
<ul>
<li><p>我是盒子中的段落</p></li> /*其也将被选择*/
<li>
<p class="spec">我是段落<em>强调文字</em></p>
</li>
<ul>
</div>
<p>我是段落</p> /*单独的标签,不被选中*/
<ul>
<li>无序列表的列表项</li>
<li>无序列表的列表项</li>
</ul>
<ol>
<li>无序列表的列表项</li>
<li>无序列表的列表项</li>
</ol>
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fs,h3{ /*并集选择器*/
color: green;
}
.fs p span{ /*后代选择器*/
color: pink;
}
span.spec{ /*交集选择器*/
font-style: italic;
}
</style>
</head>
<body>
<div class="fs">
我是div
<p>我是div内部的p<span>我是span</span></p>
</div>
<p class="fs">我是p<span class="spec">我是span</span></p>
<h3>我是h3</h3>
</body>
</html>
结果如图:
伪类
伪类是添加到选择器的描述性词语,指定要选择的元素的特殊状态,比如:超级链接拥有4个特殊状态
巧记:a标签的伪类书写要按照“爱恨准则”的顺序,否则会有伪类不生效,(解释:LOVE HATE,:link->:visited->:hover->:active)
元素关系选择器![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8241d6b13d06a85caac6047de2cc2139.png#pic_center)
- 当使用>符号分隔两元素时,它只会匹配那些作为第一个元素的直接后代元素,即两个标签为父子关系;这里需要和后代选择器区分开来,后代选择器不一定限制是子元素。子选择器从IE7开始兼容。
- 相邻兄弟选择器(+)介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是同属于一个父元素的子元素,则第二个元素被选中。eg:a+b就是选择“紧跟在a后面的一个b”。
- 通用兄弟选择器(~),a ~b是选择a元素之后所有同层级b元素,其也是从IE7开始兼容的。
序号选择器![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/77a9f78a53a328aff43620a3750e7818.png#pic_center)
- :nth-child()可以写成an+b的形式,表示从b开始每a个选一个,注意不可以写为b+an;2n+1表示选择奇数,2n表示选择偶数。如:
.box2 p:nth-child(3n+2){ /*表示从2开始,每三个选择一个*/
color:red;
}
<div class="box2">
<p>1</p>
<p>2</p> /*将被选择*/
<p>3</p>
<p>4</p>
<p>5</p> /*将被选择*/
<p>6</p>
<p>7</p>
<p>8</p> /*将被选择*/
<p>9</p>
</div>
全部示例如下:
<style>
ol>li:first-child{
color: red;
}
ol>li:last-child{
color: blue;
}
ol>li:nth-child(2){
color: green;
}
</style>
<body>
<ul>
<li>
家用电器
<ol>
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ol>
</li>
<li>
清洁用品
<ol>
<li>洗衣液</li>
<li>消毒液</li>
<li>洗厕液</li>
</ol>
</li>
<li>
妇婴用品
<ol>
<li>奶粉</li>
<li>纸尿裤</li>
<li>奶瓶</li>
</ol>
</li>
</ul>
</body>
结果显示:
属性选择器![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d72cd942b0880d92d88b0b5511684260.png#pic_center)
CSS3新增伪类
CSS3伪元素
这是css3新增的特性,表示虚拟动态创建的元素,其用双冒号表示(IE8可以兼容单冒号)。
- ::before创建一个伪元素,其将成为匹配选中的元素的第一个子元素,必须设置content属性表示其中的内容;
- ::after创建一个伪元素,其将成为匹配选中的元素的最后一个子元素,必须设置content属性表示其中的内容;
- ::selection应用于文档中被用户高亮的部分(使用鼠标圈选的部分);
- ::first-letter会选中某元素中(必须是块级元素)第一行的第一个字母;
- ::first-line会选中某元素中(必须是块级元素)第一行全部文字;
层叠性和选择器权重计算
CSS全名叫做“层叠式样式表”,层叠性是其很重要的性质,表示多个选择器可以同时作用于同一个标签,效果叠加;若多个选择器定义属性冲突,CSS有严密的处理冲突规则(id权重>class权重>标签权重);复杂选择器可以通过(id的个数,class的个数,标签的个数)的形式,计算权重。
!important提升权重:只需将其添加在某条属性后面即可(很多公司不允许使用,因为这会带来不经意间的样式冲突)。如:
<style>
#div span{
color: green;
}
#div p.p1 span{
color: red;
}
</style>
<style>
#div span{
color: green;
}
#div p.p1 span{
color: red;
}
</style>
参考:慕课网《前端工程师》课程