百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

css中选择器介绍

zhezhongyun 2025-05-21 17:56 11 浏览

选择器:

选择器是用来选择目标元

素的,选择器分基础选择器和复合选择器及伪类选择器。

基础选择器:

Bash
    标签名{} /* 1 标签选择器:把某类标签全部选中,如下: */
    p{font-size:36px;}
    
    .类名{} /* 2 类选择器(class选择器):选中相同类名的元素,.声明,class调用,如下: */
    .box{width:100px;height:50px;}
    <div class="box"></div>
    <div class="box stylebox"></div> /* 多类名选择器:在class属性中添加多个类名,中间用空格隔开,即可调用多类名来实现多个样式*/
    
    #id名{} /* 3 id选择器:选中id被命名为某名的元素,#定义,id调用,id选择器具有唯一性,相同的id名只能出现在一个标签上 */
    #box{width:100px;height:200px;}
    <div id="box"></div>
    
    *{}/* 4 通配符选择器:选中文档中所有元素,不建议使用,一般使用的情况是非常少的。 */
    *{color:blue;font-size:20px;}

复合选择器:


Bash

     div span{/* 1 后代选择器:又称包含选择器,用于选择标签的后代子孙元素及元素组,语法:外层标签写在前面,内层标签写在后面,中间用空格隔开,需要强调的是只要是后代无论多少代都可以选中,它和子代选择器的区别就在这里:不仅仅可以选择紧挨着的下一级元素。 */
      color:blue;
    }
    <div>
      <ul>
        <li>
          <span>苹果</span><!-- 被选中项-->
        </li>
      </ul>
    </div>
    <span>白菜</span>
    
    ul li>a{/* 2子代选择器:选中某标签下紧挨着的某个元素,语法:父级标签 > 子级标签,强调的是:子代选择器选中的是父级紧挨着的子级元素,和后代选择器的区别就在这里。 */
      color:pink;
    }
    <ul>
      <li>
        <a href="#">test1</a><!-- 被选中项-->
      </li>
      <li>
        <div>
          <a href="#">test2</a>
        </div>
      </li>
    </ul>
    
    p.watermelon{/* 3 交集选择器:即又的关系,同时满足条件的会被选中,语法:选择器1选择器2选择器n...,多个选择器连写,中间不用任何字符。 */
      color:red;
    }
    <p>apple</p>
    <p>orange</p>
    <p class="watermelon">watermelon</p><!-- 被选中项-->
    <span>苹果</span>
    <span>橙子</span>
    <span class="watermelon">西瓜</span>
    
    p,
    span,
    .pear{/* 4 并集选择器:同时选择多个单独或一组标签,语法:多个选择器中间用逗号连接,可以快速选择需要给相同样式的所有标签 */
      color:red;
      font-size:40px;
    }
    <p>苹果</p>
    <p>荔枝</p>
    <del>大米</del>
    <span>香蕉</span>
    <ins>地瓜</ins>
    <div class="pear"></div>
    
    .banana+li {/* 5 相邻元素选择器:选择紧挨着某元素下的一个兄弟元素,语法:选择器1 + 标签,注意兄弟元素选择器*/
      color: red;
    }
    <ul>
      <li>苹果</li>
      <li class="banana">香蕉</li>
      <li>荔枝</li>
    </ul>
    
    .banana~li {/* 6 兄弟元素选择器:选择挨着某元素下的所有兄弟元素,语法:选择器1 ~ 标签,注意相邻元素选择器*/
      color: red;
    }
    <ul>
      <li>苹果</li>
      <li class="banana">香蕉</li>
      <li>荔枝</li>
        <li>菠萝蜜</li>
        <li>桃子</li>
    </ul>

伪类选择器:

伪类选择器是以冒号:开始的,如下面链接伪类选择器(需要和伪元素区分):


    a:link{color:black;}/* 设置未访问的链接样式 */
    a:visited{color:gray;}/* 设置已访问的链接样式 */
    a:hover{color:yellow;}/* 设置鼠标经过链接的样式 */
    a:active{color:red;}/* 设置鼠标点击时链接的样式 */
    /* 需要注意:这四个链接的伪类选择器是按照上面的顺序书写的,必须严格遵循。 */

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。

笔者:苦海123

其它问题可通过以下方式联系本人咨询:

QQ:810665436

微信:ConstancyMan

相关推荐

Angular UI组件库入门指南 - 如何安装和开始使用(一)

本文主要介绍如何安装和开始使用KendoUIforAngular。首先完成安装步骤。然后创建一个简单的应用程序,其中包含一些KendoUIforAngular组件,应用程序源代码可供您参考...

SPSS22: 3.1.3 数据管理—复制数据属性

内容摘自《SPSS常用统计分析教程(SPSS22.0中英文版)(第4版)》3.1.3复制数据属性复制数据属性(CopyDataProperties)可用于建立相同调查问卷的空白数据集,或者复制其...

妙用Excel制作漂亮工整的工资条(excel表格中如何制作工资条)

工资条的制作方法并不难,但如何用Excel把工资条做得更美观、更有效率,可就要花费一点小心思了。许多人或许已经习惯了用工资明细表做员工工资统计并向上级汇报,将表中的条目慢慢复制粘贴然后打印给员工,这样...

如何运用EXCEL制作员工工资条,你造吗?

每个月工资发放之后,正规的公司应发给每个员工一个工资条。上面有员工当月工资的详细构成。但不能将工资明细表剪条发放,因为每个数字缺少对应项目,这就需要重新制作一张专门用来打印的工资条。作为劳动者,应该妥...

鸿蒙仓颉语言开发实战教程:实现商品分类页

今天继续为大家带来仓颉语言开发商城应用的实战教程,今天的内容是实现商品分类页。分类页面要在基本布局的基础上增加一些动态效果,比如点击状态的切换和两个列表容器的联动。下面为大家详细介绍。分类列表先来看左...

鸿蒙开发实战:一多开发之缩放布局

在HarmonyOS中,使用ArkTS语法进行自适应布局时,缩放布局是一种重要的布局方式。它允许组件根据外部容器的尺寸变化,按照预设的比例或权重调整自身的大小,从而确保在不同设备上都能呈现出良好的视觉...

基于WPF的电能质量检测系统上位机软件设计

郑恒持,蒋丁宇,卢兴泉,刘泊江(大连海事大学轮机工程学院,辽宁大连116026)摘要:电能质量直接影响着电力系统能否安全运行,为了能及时可靠地检测电能质量,采用全新的WindowsPresen...

HarmonyOS实战:Tab顶部滑动悬停功能实现

前言日常开发过程中,遇到这种Scroll嵌套List列表滑动顶部悬停的场景十分常见,在鸿蒙开发时也正好实现了这个功能,本篇文章将带你一步步实现Tab顶部悬停的效果,建议点赞收藏!实现效果先...

Axure教程:高级搜索(axure搜索功能怎么做)

在原型中,搜索是一个常见的交互设计。但不少同学因为技能不熟悉就没有做对应的交互效果。这篇文章,作者分享了设计搜索功能的整个流程,相信看完你也能做一个很牛逼的交互。高级搜索可以通过使用精确的关键词或短语...

Excel小技巧: 如何设置自动列宽适应内容

我们在整理Excel表格的时候,通常会碰到单元格列宽混乱的情况(如下图所示),这会导致数据显示不完整或浪费空间导致打印不全,每次手动调整列宽都会费时费力,下面教你三个方法,让你一键设置自动列宽,适应单...

用好6个公式 Excel随意查询(excel中查询功能怎么用公式)

Excel表格一般会储存大量数据,我们可能不是每次都需要使用其中的所有数据,大部分时候只用到其中的一部分,所以数据查询功能就变得非常重要。为此,Excel本身也提供了多少查询方法,供我们使用。首先我们...

夏日PC消暑指南:机箱风道与风扇选择

进入六月以后北京的天气真是热得让人感觉喘不过气,大家天天打交道的笔记本和台式机更是连人都不如了,所谓热成狗真是一点也不夸张。年年大家在防暑抗高温这个问题上都是八仙过海各显神通,但是很多人光顾着自己凉快...

Excel VBA必学技巧:用厘米设置单元格大小,办公效率翻倍

痛点:Excel默认单位太反人类!你是否经常遇到这些问题:-想设置精确的单元格尺寸,却只能用模糊的"字符宽度"和"磅值"?-设计打印报表时,毫米级的误差导致格式错乱...

CSS小知识,分享14个你可能还未用上但又实用的CSS属性(下)

大家好,在上一篇文章里CSS小知识,分享14个你可能还未用上但又实用的CSS属性(上)我们一起学习了上半部分,这篇文章我们我们继续学习下半部分。八、CSSShakeEffect晃动效果CSS...

总结雅虎前端性能优化技巧(16条)(雅虎引擎还能用吗)

前言在日常开发中,有很多场景需要我们去做好前端优化,为了防止遗忘,加深记忆,今天参阅了一些资料以及自己的一些总结,梳理出来15条优化技巧。1.合并文件css、js合并,减少http请求数,每次http...