【CSS基础--CSS选择器的常见用法】

devtools/2024/10/18 16:49:03/

CSS选择器的常见用法

  • 1.CSS介绍
    • 1.1 基本语法规范
    • 1.2 引入样式
    • 1.3 规范
  • 2. CSS选择器
    • 2.1 标签选择器
    • 2.2 类选择器
    • 2.3 ID选择器
    • 2.4 复合选择器

1.CSS介绍

CSS(Cascading Style Sheet),层叠样式表,由于控制页面的样式。CSS能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离。通俗的可以认为是现代化妆。

1.1 基本语法规范

选择器+{一条/多条声明}

  • 选择器就是针对谁修改
  • 声明就是修改的内容
  • 声明的属性是键值对。使用 : (冒号)进行分割键和值
  • CSS要写在style标签中,而style标签可放任何位置,但一般放head标签内

在这里插入图片描述

1.2 引入样式

  • 行内样式:在标签内使用style属性,属性值是CSS属性键值对。

  • 内部样式:定义style标签,在标签内定义CSS样式。

  • 外部样式:定义link标签,通过href属性引入外部CSS。

内部样式会出现大量代码冗余,不利于后期维护所以不常用。行内样式,只适合写简单样式,外部样式,html和css实现了完全的分离,在企业开发中比较常用

1.3 规范

样式大小写:css不区分大小写,一般在开发中使用小写
空格规范:冒号后面带空格,选择器和{}之间也有一个空格

2. CSS选择器

CSS选择器的主要功能就是选中页面指定的标签元素,选中了元素,才可以设置元素的属性

  1. 标签选择器
  2. class(类)选择器
  3. id选择器
  4. 复合选择器
  5. 调配选择器

在这里插入图片描述

2.1 标签选择器

选择所有的a标签,设置颜色为红色
在这里插入图片描述

2.2 类选择器

符号.(点)加类名,一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要使用空格分割)
在这里插入图片描述

2.3 ID选择器

#加id里面的名称
在这里插入图片描述

2.4 复合选择器

只设置ul下的li中的a标签
在这里插入图片描述


http://www.ppmy.cn/devtools/38374.html

相关文章

2024-05-08 postgres-火山模型-执行-记录

摘要: 2024-05-08 postgres-火山模型-执行-记录 上下文: 2024-05-08 postgres-调试及分析-记录-CSDN博客 火山模型: 数据流是在查询树上,自上而下进行拉取,由上而下的调用。树本身就表明了数据的流动。每次执行一个元组,也就类似于迭代器的…

C++ | Leetcode C++题解之第72题编辑距离

题目&#xff1a; 题解&#xff1a; class Solution { public:int minDistance(string word1, string word2) {vector<vector<int>> dp(word1.size() 1, vector<int>(word2.size() 1, 0));for (int i 0; i < word1.size(); i) dp[i][0] i;for (int j…

巡检机器人有哪些功能和作用?

在科技如此发达的时代&#xff0c;巡检机器人犹如一位不知疲倦的守护者&#xff0c;悄然走进了我们的生活。它们具备着令人惊叹的功能和作用&#xff0c;成为了保障安全、提高效率的重要力量。那么&#xff0c;巡检机器人功能和作用&#xff1f;下面我们来说说旗晟机器人的几款…

MacOS搭建docker本地私有镜像库

相关环境 macOS: bigsur 11.7.8 docker desktop: 4.22.0 docker engine: 24.0.5 准备工作 本机已经安装好docker desktop&#xff0c;未安装的自行参考其他教程。如果不能翻墙&#xff0c;可以修改本地的镜像地址&#xff0c;可在docker desktop 设置中的docker engine中修…

读天才与算法:人脑与AI的数学思维笔记22_中文房间

1. 华生的工作模式 1.1. 请你想象一个巨大的场景&#xff0c;其中有单词、名字和其他可能的答案&#xff0c;它们散布在各处 1.1.1. IBM所做的第一步是以某种连贯的方式排列单词 1.1.2. 第二步是理解每个问题&#xff0c;并为该问题生成候选位置标记 1.1.2.1. 爱因斯坦会演…

数据库数据恢复—Sql Server数据库文件丢失丢失怎么恢复数据?

数据库数据恢复环境&#xff1a; 5块硬盘组建一组RAID5阵列&#xff0c;划分LUN供windows系统服务器使用。windows系统服务器内运行了Sql Server数据库&#xff0c;存储空间在操作系统层面划分了三个逻辑分区。 数据库故障&#xff1a; 数据库文件丢失&#xff0c;主要涉及3个…

javax.net.ssl.SSLException: Received fatal alert: protocol_version已经解决

起因&#xff1a; 在帮别人讲解项目时&#xff0c;将项目的tomcat配置完&#xff0c;点击运行后&#xff0c;报错&#xff0c;信息如标题。 解决办法&#xff1a; 在csdn百度问题&#xff0c;得到的方法主要有几个&#xff1a; 1.jdk要配置在1.8以上&#xff1b; 2.数据库地…

C++类型与声明

类型与声明 类型 字符类型 char 默认类型&#xff0c;通常占8位&#xff0c; 是否带符号以来于实现。signed char 可以存放正值也可以存放负值unsigned char 不带符号wchar_t 用于存放unicode 等更大的字符集。wchar_t 的尺寸依赖实现char16_t 用于存放UTF-16的16位字符集ch…