前端自学——CSS3选择器

最新推荐文章于 2024-08-02 10:56:12 发布

三七有星辰

最新推荐文章于 2024-08-02 10:56:12 发布

阅读量225

点赞数

分类专栏： # 前端文章标签： css html css3 html5

本文链接：https://blog.csdn.net/zztjl/article/details/113703387

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3中的各种选择器，包括标签选择器、ID选择器、类选择器、复合选择器、伪类、伪元素、属性选择器、序号选择器以及层叠性和选择器权重计算。通过实例展示了如何使用这些选择器实现精准的样式控制，帮助读者深入理解CSS3选择器的使用技巧。

摘要由CSDN通过智能技术生成

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）

元素关系选择器

当使用>符号分隔两元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系；这里需要和后代选择器区分开来，后代选择器不一定限制是子元素。子选择器从IE7开始兼容。
相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是同属于一个父元素的子元素，则第二个元素被选中。eg:a+b就是选择“紧跟在a后面的一个b”。
通用兄弟选择器（~），a ~b是选择a元素之后所有同层级b元素，其也是从IE7开始兼容的。

序号选择器

：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>

结果显示：
在这里插入图片描述

属性选择器

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>

在这里插入图片描述

参考：慕课网《前端工程师》课程

三七有星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端自学——CSS3选择器

CSS3选择器首先介绍传统的2.1版本选择器，然后再是css3新增选择器。标签选择器和id选择器1、标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当作选择器，无论这个标签所处位置的深浅，它都将选择页面上所有该种标签。其“覆盖面”非常大，所以通常用于标签的初始化。书写方法如下所示：span{ /*选择页面上所有span标签*/ color:red; } b{ /*选择页面上所有b标签*/ color:green; }`2、认识id属性
复制链接

扫一扫

专栏目录