【web前端开发】CSS最常用的11种选择器

news/2024/11/25 5:42:51/

文章目录

  • 1.CSS介绍
  • 2.CSS的语言规则
  • 3.CSS的引入方式
  • 4.选择器
    • 标签选择器
    • 类选择器
    • id选择器
    • 通配符选择器
    • 复合选择器
      • 后代选择器
      • 子代选择器
    • 并集选择器
    • 交集选择器
    • 伪类选择器
      • hover伪类选择器
      • active伪类选择器
    • 结构伪类选择器
  • 结语

1.CSS介绍

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS的作用:给HTML里面的标签设置样式
简单点来说就是让HTML的页面变得更加好看

2.CSS的语言规则

  • CSS是写在 style 标签里面的,而style标签一般写在head标签里面,title标签的下面

3.CSS的引入方式

CSS共有三种引入方式,分别是内嵌式,外联式和行内式

内嵌式: CSS写在style标签中
注意:style标签可以写在页面的任意位置,但一般都会在head标签里面

外联式: CSS写在单独的.css文件里面
要通过link标签在网页中导入

行内式: CSS写在标签的style属性中
一般搭配js来使用

4.选择器

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式

语法:

标签名 {CSS属性名: 属性值CSS属性名: 属性值...}

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p {color: blue;}</style>
</head>
<body><p>这是一个段落</p><p>这是一个段落</p><div>这是一个段落</div>
</body>
</html>

效果:
在这里插入图片描述

作用: 通过标签名,找到页面中所有这类标签,并设置样式

注意:

  • 标签选择器选择的是一类标签,而不是单独一个
  • 标签选择器无论嵌套关系有多深,都能找到对应的标签

类选择器

标签选择器是选择这一类标签并设置样式,而类选择是可以给单独的一个标签设置样式

语法:

    .类名 {CSS属性名: 属性值CSS属性名: 属性值...}

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one {color: red;}.two {font-size: 30px;}</style>
</head>
<body><p class="one">这是一个段落</p> <p class="one two">这是一个段落</p><p>这是一个段落</p>
</body>
</html>

效果:
在这里插入图片描述

注意点:

  • 所有的标签都有class这个属性,class属性的属性值就是类名
  • 类名不能以数字或中横线 - 作为开头
  • 一个标签可以有多个类名,类名之间要用空格隔开
    - 类名可以重复,一个类选择器可以同时选中多个标签

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

语法:

#id属性值 {CSS属性名: 属性值CSS属性名: 属性值...
}

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#nav {color: blue;}</style>
</head>
<body><p id="nav">这是一个段落</p><p>这是一个段落</p>
</body>
</html>

效果:
在这里插入图片描述

注意:

  • 所有的标签都有id这个属性
  • id是唯一的,不能重复!
  • id选择器只能被调用一次
  • id选择器通常搭配js来使用

类选择器与id选择器的区别

  • 类选择器可以被多个标签调用
  • id选择器只能被调用一次

通配符选择器

找到文中所有的标签,并设置样式

语法:

* {CSS属性名: 属性值CSS属性名: 属性值...
}

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {color: blue;}</style>
</head>
<body><p>CSS</p><span>CSS</span><div>CSS</div><h1>CSS</h1>
</body>
</html>

效果:
在这里插入图片描述
因为通配符选择器会改变所有标签的样式,在实际开发使用中用的很少

复合选择器

复合选择器中有 后代选择器和子代选择器

后代选择器

作用:根据HTML标签的嵌套关系,选择父元素"后代中"所有满足条件的标签

语法:

选择器1 选择器2{CSS属性名: 属性值CSS属性名: 属性值...
}

效果:在选择器1中找到标签的后代(儿子,孙子,重孙子...)中,找到满足选择器2的标签,并设置样式

  • 选择器和选择器之间用空格隔开
  • 只要是后代(儿子,孙子,重孙子...)就会被选中

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div p{color: #f00;}</style>
</head>
<body>
<div><p>这是一个段落</p><span><p>这也是一个段落</p></span><h4>这是一个小标题</h4>
</div>
</body>
</html>

效果:
在这里插入图片描述

子代选择器

作用:根据HTML标签的嵌套关系,选择父元素"子代中"所有满足条件的标签

语法:

选择器1>选择器2{CSS属性名: 属性值CSS属性名: 属性值...
}

效果:在选择器1中找到标签的子代中,找到满足选择器2的标签,并设置样式

  • 这里的子代是只有儿子
  • 选择器与选择器之间用 > 隔开

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div > p{color: blue;}</style>
</head>
<body>
<div><p>这是一个段落</p><span><p>这也是一个段落</p></span>
</div>
</body>
</html>

效果:
在这里插入图片描述

并集选择器

作用:同时选择多组标签,并设置样式

语法:

选择器1,选择器2,...{CSS属性名: 属性值CSS属性名: 属性值...
}

效果:找到选择器1和选择器2所选中的标签,并设置样式

  • 选择器和选择器中间用 , 隔开
  • 选择器可以有多个

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one {font-size: 50px;}div,.one,span{color: blue;}</style>
</head>
<body><div>这是一个div</div><p class="one">这是一个段落</p><span>这是一个span标签</span>
</body>
</html>

效果:
在这里插入图片描述

交集选择器

作用:找到 HTML中同时满足选择器的标签

语法:

选择器1选择器2...{CSS属性名: 属性值CSS属性名: 属性值...
}

效果:找到 包含上述选择器的标签,并设置样式

  • 选择器可以有多个

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one {color: blue;}.two {font-style: italic;}p.one.two{font-size: 30px;}     </style>
</head>
<body><div class="one">这是一个div</div><p class="one two">这是一个p标签</p><span>这是一个span标签</span>
</body>
</html>

效果:
在这里插入图片描述

伪类选择器

伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态

hover伪类选择器

作用:将鼠标悬停在元素上,并设置样式

语法:

选择器:hover {CSS属性名: 属性值CSS属性名: 属性值...
}

效果:鼠标悬停在设置的元素时,会出现样式

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>a:hover{color: red;}</style>
</head>
<body>
<a href="#">这是一个超链接</a>
<br>
<a href="#">这也是一个超链接</a>
</body>
</html>

效果:
我这里鼠标其实是悬浮在第二个标签上的,但是截图的时候不显示的鼠标了
在这里插入图片描述

  • 任何一个元素都可以悬停,都可以设置样式

active伪类选择器

作用:将鼠标点击元素时,并设置样式

语法:

选择器:avtive {CSS属性名: 属性值CSS属性名: 属性值...
}

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p:active{color: skyblue;}</style>
</head>
<body>
<p>这是一个段落</p>
<p>这是一个段落</p>
</body>
</html>

在这里插入图片描述

结构伪类选择器

作用:根据HTML的结构关系查找元素

选择器描述
E:first-child{ }找到父元素中第一个子元素E
E:last-child{}找到父元素中最后一个子元素E
E:first-child(n){ }找到父元素第n个子元素E
E:last-child(n){}找到父元素中倒数第n个子元素E

注:E是元素的英文单词element 的首字母 E ，就是元素/标签的意思

结语

选择器在前端开发中还是很常用的
实践为主,理论为辅 建议大家可以自己去尝试着使用一下

感谢你的观看!希望这篇文章能帮到你!
web前端开发专栏在不断更新中,欢迎订阅!
“愿与君共勉,携手共进!”
在这里插入图片描述


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

相关文章

【微信小程序】-- 自定义组件 -- 创建与引用 样式（三十二）

【微信小程序】-- 自定义组件 -- 创建与引用 样式（三十二）

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…
阅读更多...
css3横向无限公告消息滚动功能

css3横向无限公告消息滚动功能

css部分 .container { display: flex; /* 父容器需要有明确的高度 / // height: 150px; width: 2100rpx; margin: auto; overflow: hidden; position: absolute; top: 20%; left: 0; animation: scroll 8s linear infinite normal; } .container > .scroll-list { display:…
阅读更多...
python的django框架从入门到熟练【保姆式教学】第二篇

python的django框架从入门到熟练【保姆式教学】第二篇

在上一篇博客中&#xff0c;我们介绍了Django的基础知识&#xff0c;并创建了一个简单的Web应用程序。在本篇教程中&#xff0c;我们将深入探讨Django的模型层&#xff08;Model&#xff09;&#xff0c;它是Django应用程序的核心组件之一。 模型层 Django的模型层是一个对象…
阅读更多...
Oracle 实现对全局错误语句的审计监控 ORA- alert

Oracle 实现对全局错误语句的审计监控 ORA- alert

--将所有数据库ora-错误写入表create table error_tab (username varchar2(4000), d_current_nr_error varchar2(4000), ora_server_error_msg varchar2(4000), full_text varchar2(4000),errdate date);create or replace trigger error_triggerafter servererror on database…
阅读更多...
04从零开始学Java之可能是最详细的Java环境配置教程

04从零开始学Java之可能是最详细的Java环境配置教程

作者&#xff1a;孙玉昌&#xff0c;昵称【一一哥】&#xff0c;另外【壹壹哥】也是我哦CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者前言在上一篇文章中&#xff0c;壹哥给大家重点讲解了Java实现跨平台的原理&#xff0c;不知道你现在有没有弄清楚呢&#xff1f;如…
阅读更多...
ASP.NETCore学习资料

ASP.NETCore学习资料

1.ASP.NETCore比ASP.NET更具优势的地方是什么&#xff1f; ASP.NET Core(ASP.NET Core 简介) ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET(ASP.NET 简介) ASP.NET 是一个成熟的框架&#xff0c;提…
阅读更多...
react+antdpro+ts实现企业级项目四：注册页面实现及useEmotionCss的介绍

react+antdpro+ts实现企业级项目四：注册页面实现及useEmotionCss的介绍

创建文件路径并注册register路由 在pages/User下创建Register文件夹并创建index.tsx文件 然后在config/routes创建register注册路由。注册完后&#xff0c;当在登陆页面点击注册按钮时就可以跳转到此注册页面而不会报404了。 export default [{path: /user,layout: false,rou…
阅读更多...
【Java】SpringBoot中实现异步编程

【Java】SpringBoot中实现异步编程

前言 首先我们来看看在Spring中为什么要使用异步编程&#xff0c;它能解决什么问题&#xff1f; 什么是异步&#xff1f; 首先我们先来看看一个同步的用户注册例子&#xff0c;流程如下&#xff1a; 异步的方式如下&#xff1a; 在用户注册后将成功结果返回&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023