css中的四种基本选择器类型分别是什么

css中的四种基本选择器类型分别是标签选择器、ID选择器、类选择器和通用选择器。css中的选择器分为两大类,分别是基本选择器和扩展选择器。

css中的四种基本选择器类型分别是什么

本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。

CSS的选择器分为两大类:基本选择器和扩展选择器,其中有4种基本选择器。

(相关学习视频分享:css视频教程)

基本选择器:

立即学习“前端免费学习笔记(深入)”;

1、标签选择器:针对一类标签

2、ID选择器:针对某一个特定的标签使用

3、类选择器:针对你想要的所有标签使用

4、通用选择器(通配符):针对所有的标签都适用(不建议使用)

标签选择器:一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式。

4c4f7f0f331f785c9453f6324d14233.png

id选择器:根据元素ID来选择元素,具有唯一性。前面以”#”号来标志。

6704d3c568a05e0cc0153e5880a077f.png

类别选择器:类选择器根据类名来选择。和id非常相似,任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次。

9e6e3f2ce22c1e9e85e40dd36daad2f.png

通配符*:匹配所有标签不建议使用。

8eaeb2fd7a3152f2a59ed47966f8506.png

相关推荐:CSS教程

以上就是css中的四种基本选择器类型分别是什么的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1616056.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 05:13:26
下一篇 2025年12月24日 05:13:37

相关推荐

  • CSS怎么控制行高?

    在CSS中,可以通过line-height属性来控制行高,该属性可以通过百分比、数字、像素值等方法来设置行间的距离(行高);语法“line-height:属性值;”,属性值可以设置为百分比值、数字、像素值和normal关键字。 本教程操作环境:windows10系统、css3,本文适用于所有品牌的电…

    好文分享 2025年12月24日
    000
  • CSS元素选择器的运作原理介绍

    推荐教程:CSS视频教程 在前端工程师的日常工作中,使用 CSS 元素选择器是稀松平常的事;无论你是编写一般的 CSS 还是需要经过编译的 SASS,SCSS,LESS等,最终都被编译成一行一行的 CSS 样式属性,最终交给浏览器解析并套用。但是你想过没有这是如何实现的呢? 浏览器渲染 我们先看一下…

    2025年12月24日 好文分享
    000
  • 了解css中容易被忽略特性,避免一些经常遇到的坑

    CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各种坑,先总结一些经常遇到的坑。 推荐教程:CSS视频教程 大小写不敏感 虽然我们平时在写CSS的时候都是用小写,但其实CSS并不是大小写敏感的 立即学习“前端免费学习笔记(深入)”; .test{ background-CO…

    2025年12月24日 好文分享
    000
  • 什么是CSS权重

    CSS权重是指选择符的优先级,优先级高的css样式会覆盖优先级低的样式,优先级越高说明权重越高。当css选择规则的权重不同时,权值高的优先。当css选择规则的权值相同时,后定义的规则优先。 要知道什么是CSS的权重,那么我们必须先了解CSS样式的6种基础选择器:ID选择器、类选择器、属性选择器、伪类…

    2025年12月24日
    000
  • 什么是css预编译

    css预编译是指通过能读取文件的语言编写的插件把文件解析成css文件,因为它们的文件名都不是css,写法也不是纯css,而是无法被浏览器识别的,所以写完需要编译一下才能使用,这便是css预编译。 预编译原理 通过能读取文件的语言编写的插件把文件解析成css文件,因为他们的文件名都不是css,写法也不…

    2025年12月24日
    000
  • css怎么设置图片的对比度

    css设置图片的对比度的方法:可以利用【filter:contrast(%)】属性来设置图片的对比度,如【filter:contrast(0%)】。filter属性定义了元素的可视效果,如模糊、饱和度、对比度等。 属性介绍: filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。 …

    2025年12月24日
    000
  • css如何设置鼠标的形状

    css设置鼠标的形状的方法:可以利用cursor属性来进行设置,如【span.crosshair {cursor:crosshair;}】。cursor属性规定要显示的光标的类型,默认状态下光标是一个箭头。 cursor 属性规定要显示的光标的类型(形状)。 该属性定义了鼠标指针放在一个元素边界范围…

    2025年12月24日
    000
  • css中的流式布局是什么意思

    css中的流式布局是指页面中元素的宽度按照屏幕分辨率自动进行适配调整,它可以保证当前屏幕分辨率发生改变的时候,页面中的元素大小也可以跟着改变。 什么是流式布局 网页布局中包括:静态布局,流式布局,响应式布局和弹性布局几种情况。 (学习视频分享:css视频教程) 静态布局:指的就是网页中的所有元素都使…

    2025年12月24日
    000
  • 怎么用CSS调整背景图的大小

    用CSS调整背景图的大小的方法:可以利用background-size属性来进行调整,如【background-size:80px 60px;】。backgrond-size属性规定了背景图像的尺寸。 属性介绍: background-size 属性规定背景图像的尺寸。 (学习视频分享:css视频教…

    2025年12月24日
    000
  • css如何隐藏溢出来的文字

    css隐藏溢出来的文字的方法:可以利用text-overflow属性来实现,如【text-overflow:ellipaos;】,属性值ellipsis表示显示省略符号来代表溢出来的文字。 属性介绍: text-overflow 属性规定当文本溢出包含元素时发生的事情。 (学习视频分享:css视频教…

    2025年12月24日
    000
  • css伪元素是用来干嘛的

    css伪元素是用来添加一些选择器的特殊效果的,例如【:first-line】伪元素用来向文本首行设置特殊样式,【:first-letter】伪元素用于向文本的首字母设置特殊样式。 CSS伪元素是用来添加一些选择器的特殊效果。 (学习视频分享:css视频教程) 伪元素的语法: selector:pse…

    2025年12月24日
    000
  • css怎么控制字间距

    css控制字间距的方法是:利用letter-spacing属性来进行控制,如【h1 {letter-spacing:2px;}】。letter-spacing属性用于增加或减少字符间的空白(字符间距)。 本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。 属性介绍: let…

    2025年12月24日
    000
  • css中rem有什么特点

    css中rem的特点是:使用rem为元素设定字体大小时,仍然是相对大小,但相对的是HTML根元素,例如【.b{font-size: 2rem;   //这里就8px;}】。 本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。 rem:(相对于根元素的即HTML) rem是C…

    2025年12月24日
    000
  • css中list-style是什么意思

    css中list-style是一个简写属性,它涵盖了所有其他列表样式属性。list-style属性可以应用到任何元素中,并由list-item元素继承,如【list-style:square inside url()】。 本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。 …

    2025年12月24日
    000
  • css文本属性有哪些

    css文本属性有:1、颜色属性color;2、文本方向direction;3、行高line-height;4、字符间距letter-spacing;5、文本阴影text-shadow;6、文本方向unicode-bidi。 css文本属性: (学习视频分享:java视频教程) color 设置文本颜…

    2025年12月24日
    000
  • css如何让图片自适应屏幕大小

    css让图片自适应屏幕大小的方法:在css文件中加入代码【img {height: auto; width: auto9; width:100%;}】即可。如果我们只想更改特定的图片,那么可以使用方法【height: auto;】。 本教程操作环境:windows10系统、css3,本文适用于所有品…

    2025年12月24日
    000
  • css中的内联元素是什么

    css中的内联元素是指行内元素,与块级元素对应。内联元素和它的兄弟元素之间一个挨着一个,都在同一行按从左至右的顺序显示,不单独占一行。内联元素通常被包含在块级元素中使用。 一、什么是内联元素? 内联元素有很多种叫法,如内联元素、内嵌元素、行内元素、直进式元素等,和块级元素对应。内联元素和它的兄弟元素…

    2025年12月24日
    000
  • css怎么让字体更大

    css让字体更大的方法:可以利用font-size属性来设置字体的大小,如【font-size:12px】。需要注意的是,font-size属性设置的是字体中字符框的高度。 本教程操作环境:windows7系统、css1版,该方法适用于所有品牌电脑。 相关推荐:CSS教程 css让字体更大 font…

    2025年12月24日
    000
  • css怎么实现文本的垂直排列

    css实现文本的垂直排列的方法:可以利用writing-mode属性来实现,如【writing-mode: vertical-rl;】。writing-mode属性定义了文本在水平或垂直方向上如何排布。 本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。 writing-m…

    2025年12月24日
    000
  • css Bulma框架是什么

    css Bulma框架是一个开源、简单、现代的css框架,它基于flexbox模块,纯css没有js代码。Bulma框架的优点:1、为电脑、平板和手机提供响应式设计;2、纯css框架;3、代码优雅简洁。 Bulma是一个开源、简单、现代的CSS框架,它基于flexbox模块(用于开发响应式布局结构)…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信