CSS的复合选择器

news/2025/1/15 12:25:20/

一,什么是复合选择器

常用的复合选择器有:后代选择器、子选择器、并集选择器和伪类选择器。

二,后代选择器(用空格)(重点)

后代选择器也称包含选择器,可以选择父元素里面的子元素。写法就是外层标签在前面,内层标签写后面,中间要有空格隔开。当标签发生嵌套时,内层标签就成为外层标签的后代。

语法:

元素1 元素2{

        样式声明

}

注:最终选择的是元素2(元素2可能是子元素,也可能是孙子元素),元素1、元素2可以是任意基础选择器。

eg:

<style>

                ol li a{

                        color: pink;

                }

    </style>

如果是两个<ul>标签。可以在任意一个写类名称,这样复合选择器可以写.nav li a,如此易于区分

三,子选择器(用>)

只能选择作为某元素的最近一级子元素(选亲儿子元素)

语法:

元素1>元素2{

        样式声明

}

四,并集选择器(用,)

可以选择多组标签同时为他们定义相同的样式,通常用于集体声明

语法:

元素1,元素2{

        样式声明

}

注:“,”是“和”的意思,任何选择器都可以作为并集选择器的一部分。

注意语法规范:换行写

五,伪类选择器(用:)

用于向某些选择器添加一些特殊的效果

5.1链接伪类选择器(跟链接有关)

 注意事项:

1.为了确保生效,要按照LVHA的顺序声明;

2.a链接在浏览器中具有默认样式,所以在实际工作中需要给链接单独指定样式

实际开发写法如下:

 5.2 :focus伪类选择器(跟表单有关)


http://www.ppmy.cn/news/1342582.html

相关文章

修改MFC图标

摘要&#xff1a;本文主要讲解了MFC程序窗口图标的添加、任务栏、底部托盘的图标添加&#xff0c;以及所生成的exe文件图标的添加。 ​​​​​​​1、在资源视图添加Icon资源 透明图标怎么制作&#xff1f; 1&#xff09;点击图片》右键&#xff1a;使用画图3D进行编辑 2&a…

Docker学习(六)-Kubernetes - Spring Boot 应用

接上一篇 Docker学习(五)-Kubernetes 集群搭建 - Spring Boot 应用-CSDN博客 新建 k8s-demo.yaml apiVersion: apps/v1beta2 kind: Deployment metadata: name: k8s-springboot-demo labels: app: k8s-springboot-demo spec: replicas: 1revisionHistoryLimit:…

【C++】C++入门— 类与对象初步介绍

C入门 1 认识面向对象2 类的引入3 类的定义类的定义方式 4 类的访问限定符及封装访问限定符封装 Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;下一篇文章见&#xff01;&#xff01;&#xff01; 1 认识面向对象 C语言是面向过程的&#xff0c;关注…

保障网络环境清朗与安全:非法关键字过滤的重要性与实现方法

在当今数字化时代&#xff0c;网络已经成为人们获取信息、交流思想的主要平台。然而&#xff0c;随着互联网的普及&#xff0c;一些不法分子也越发倾向于通过网络渠道散布有害信息。为了维护网络环境的清朗与安全&#xff0c;非法关键字过滤技术应运而生。本文将探讨非法关键字…

四元数和旋转矩阵相互转换

四元数(Quaternions)和旋转矩阵是在三维空间中表示旋转的两种常见数学工具。 ### 四元数和旋转矩阵相互转换import jax.numpy as jnp import numpy as np import math### 1. 角度和弧度相互转化 ## 角度转弧度 degrees = 45 radians = math.radians(degrees) print(f"{…

PHP入门指南:起步篇

PHP入门指南&#xff1a;起步篇 PHP入门指南&#xff1a;起步篇什么是PHP&#xff1f;PHP 的优点PHP 开发环境搭建选择本地服务器软件包安装PHP环境配置Web服务器和PHP测试PHP安装 第一个PHP脚本PHP基础语法标记注释变量数据类型常量条件语句循环函数 PHP入门指南&#xff1a;起…

java之ReentrantLock

在讲RentrantLock之前需要先讲一下AQS和LockSupport&#xff0c;因为rentrantLock底层是用AQS实现的&#xff0c;而AQS中获取阻塞和唤醒底使用LockSupport实现的。 1、LockSupport实现 下面代码中&#xff0c;LockSupport.park方法是当前线程等待&#xff0c;直到获得许可&am…

引流技术-通过文件中增加联系方式并传播

文章目录 前言文档增加联系方式扩散网盘扩散自建网站借力 注意 前言 很多人在找资料的时候可能都遇到过下图情况&#xff1a; 1、文档最后面留一个自己的联系方式&#xff1b; 2、找的一堆文件中都有相同的情况&#xff1b; 3、一段时间全网搜到的很多相同文件也有这个联系方式…