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

css中选择器介绍

liuian 2025-04-26 19:24 14 浏览

选择器:

选择器是用来选择目标元

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

基础选择器:

    标签名{} /* 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;}

复合选择器:



     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

相关推荐

使用Assembly打包和部署Spring Boot工程

SpringBoot项目的2种部署方式目前来说,SpringBoot项目有如下2种常见的部署方式一种是使用docker容器去部署。将SpringBoot的应用构建成一个docke...

java高级用法之:调用本地方法的利器JNA

简介JAVA是可以调用本地方法的,官方提供的调用方式叫做JNI,全称叫做javanativeinterface。要想使用JNI,我们需要在JAVA代码中定义native方法,然后通过javah命令...

Linux中如何通过Shell脚本来控制Spring Boot的Jar包启停服务?

SpringBoot项目在为开发者带来方便的同时,也带来了一个新的问题就是Jar包如何启动?在一般情况下我们都是采用了最为经典的java-jar命令来进行启动。然后通过ps命令找到对应的应用线程通...

牛逼!自己手写一个热加载(人民币手写符号一个横还是两个横)

热加载:在不停止程序运行的情况下,对类(对象)的动态替换JavaClassLoader简述Java中的类从被加载到内存中到卸载出内存为止,一共经历了七个阶段:加载、验证、准备、解析、初始化、使用、...

java 错误: 找不到或无法加载主类?看看怎么解决吧!

问题扫述:项目名称调整,由原来的com.mp.qms.report.biz调整为com.mp.busicen.mec.qms.report.biz后。项目在IDEA直接运行,但打包部署到服务器...

如何将 Spring Boot 工程打包成独立的可执行 JAR 包

导语:通过将SpringBoot项目打包成独立的可执行JAR包,可以方便地在任何支持Java环境的机器上运行项目。本文将详细介绍如何通过Maven构建插件将SpringBoot...

class 增量发包改造为 jar 包方式发布

大纲class增量发包介绍项目目录结构介绍jar包方式发布落地方案class增量发包介绍当前项目的迭代修复都是通过class增量包来发版本的将改动的代码class增量打包,如下图cla...

Jar启动和IDE里启动Sprintboot的区别

想聊明白这个问题,需要补充一些前提条件,比如Fatjar、类加载机制等1、Fatjar我们在开发业务程序的时候,经常需要引用第三方的jar包,最终程序开发完成之后,通过打包程序,会把自己的代码和三...

Java 20年,以后将往哪儿走?(java还能流行多久)

在今年的Java20周年的庆祝大会中,JavaOne2015的中心议题是“Java的20年”。甲骨文公司Java平台软件开发部的副总裁GeorgesSaab的主题演讲就将关注点放在了java...

Spring Boot Jar 包秒变 Docker 镜像实现多环境部署

你是否在互联网大厂后端开发工作中,遇到过这样的困扰?当完成一个SpringBoot项目开发,准备将Jar包部署到不同环境时,却发现各个环境依赖不同、配置复杂,部署过程繁琐又容易出错,不仅耗费...

从0开始,让你的Spring Boot项目跑在Linux服务器

1搭建Linux服务器1.1购买阿里云服务器或安装虚拟机这里建议是CentOS7.X或CentOS8.X,当然其他的Linux如deepin、Ubuntu也可以,只是软件环境的安装包和安装方式...

【技术】Maven 上传第三方jar包到私服

通过nexus后台上传私服以NexusRepositoryManagerOSS2.14.5-02为例。登录nexus后台。定义Maven坐标Maven坐标有两种方式:1.自定义参数;2....

JVM参数、main方法的args参数使用

一、前言我们知道JVM参数分为自定义参数、JVM系统参数,Javamain方法的参数。今天就谈谈怎么使用吧。二、查看jvm参数定义自定义参数我们打开cmd窗口,输入java,就能看到自定义参数的格式...

Maven项目如何发布jar包到Nexus私服

Maven项目发布jar包到Nexus私服在编码过程中,有些通用的代码模块,有时候我们不想通过复制粘贴来粗暴地复用。因为这样不仅体现不了变化,也不利于统一管理。这里我们使用mavendeploy的方...

干货丨Hadoop安装步骤!详解各目录内容及作用

Hadoop是Apache基金会面向全球开源的产品之一,任何用户都可以从ApacheHadoop官网下载使用。今天,播妞将以编写时较为稳定的Hadoop2.7.4版本为例,详细讲解Hadoop的安...