css结构伪类

简介: css结构伪类

当我们在做网页开发时,一个相对成熟的网站,是需要用到大量的标签的,特别是我们会遇到很多相同的标签,但其属性又不相同。

   <style>
       div{
        background-color: skyblue;
       }
    </style>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</body>

运行效果:

所以我们一般在CSS中,就不会用到标签选择器,因为当你用到这个的话,所有的标签都会变,就显得比较笨重,不够灵活。

所以我们就会想到用类选择器等等,可是那样的话会写很多类,较为复杂。

所以说我们引入了结构为类,就是方便我们在相同的标签中选择到自己想用的标签,这样就较为方便灵活。

话不多说,我们来见识一下它的威力吧!

我们只想让第一个div变时:

<style>
       div:first-child{
        background-color: skyblue;
       }
    </style>

运行效果:

当我们只想让最后一个div变时:

 <style>
       div:last-child{
        background-color: skyblue;
       }
 </style>

运行效果:

是不是非常的神奇?我还可以想选第几个就选第几个,不想你看

 <style>
        /*我想选第6个变*/
       div:nth-child(6){
        background-color: skyblue;
       }
 </style>

运行效果:

哈哈,从此我的人生我做主,我想选啥就是啥,嘿嘿嘿!

当然还有一种倒着数的方法,小伙伴们可以自己试试看哦。

 <style>
       div:nth-last-child(2){
        background-color: skyblue;
       }
 </style>

总结一下就是:在css中多个相同的标签,我们可以用:

       标签:first-child

       标签:last-child

       标签:nth-child(n)

       标签:nth-last-child(n)

来找到自己想用的标签,但是我也发现一个问题就是,几个相同的标签必须是连续写的,如果中间我插一个标签,那么会打乱顺序,我也不知道为什么?有知道的大佬也可以告诉我谢谢。

<style>
       div:nth-child(8){
        background-color: skyblue;
       }
    </style>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <p>4</p>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</body>

运行结果:

 

明明我选择的是div的第8个,结果却改变了第7个,所以说这个应该不是我所想的那样想变那个就那个,中间有其他标签的话会产生影响。

相关文章
|
1月前
|
前端开发 开发者
提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
【4月更文挑战第2天】 提升你的CSS技能:深入理解伪类选择器和伪元素选择器!
43 12
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
38 0
|
1月前
|
敏捷开发 人工智能 前端开发
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
让你爽到飞起的【懒人插件AutoScssStruct4Vue】VSCode根据template的标签目录自动一键生成CSS/SCSS/LESS结构,敏捷开发必备插件!!!
|
2天前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
CSS进阶-CSS选择器高级:伪类与伪元素
|
1月前
|
前端开发
|
1月前
|
前端开发 UED
CSS 支持伪类和伪元素,可用于指定文档中不同状态的样式
【5月更文挑战第7天】CSS 提供关键帧和过渡动画两种方式创建动态效果。关键帧动画通过定义一系列样式的关键帧,浏览器自动插入过渡帧形成动画,如示例中背景颜色变化的循环。过渡动画则在属性改变时(如鼠标悬停)触发,展示平滑转换,如 div 元素尺寸变化。通过调整帧时间、顺序和样式,可实现更复杂的动画,增强网站交互体验。
37 4
|
1月前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
|
1月前
|
前端开发 UED 开发者
【专栏】探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施
【4月更文挑战第29天】本文探讨了CSS3动画卡顿的原因,包括复杂动画效果、过多元素参与、低效代码结构和硬件资源限制,并提出优化措施:简化动画路径、控制元素数量、优化代码结构、利用硬件加速及性能监测。通过实际案例展示了优化效果,强调了性能优化对提升用户体验的重要性。在开发中,应持续关注并优化动画性能,以适应网页应用的需求。
|
1月前
|
XML 前端开发 开发者
css基本结构
【4月更文挑战第20天】css基本结构
19 7
|
1月前
|
前端开发
css的基础结构
【4月更文挑战第14天】css的基础结构
30 6