iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >CSS选择器有哪些
  • 269
分享到

CSS选择器有哪些

2024-04-02 19:04:59 269人浏览 泡泡鱼
摘要

这篇文章将为大家详细讲解有关CSS选择器有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。复合选择器并集选择器:多个类型选择器,中间用逗号隔开 div,span,p{}

这篇文章将为大家详细讲解有关CSS选择器有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

复合选择器

并集选择器:多个类型选择器,中间用逗号隔开 div,span,p{} 为了让多个选择器设置同一个样式。

后代选择器: ul li{} ul中的所有li都会设置样式,包含li中的子元素ul中的li。也就是ul1的孙元素。

直接后代选择器:ul>li{} 只管父类后边的子类li,不管子类后边的子类ul中的li。

伪选择器

伪元素选择器:配合选择器使用

1.first-line选择器

2.first-letter选择器

3.before{ content: ""}(前边加文字)

4.after{content:""}

伪类选择器:根据元素位置选择元素 比如ul中的li的位置

nth-child选择器:根据索引元素位置判断,从1开始

子元素选择器:

1.nth-child(n):选择元素的第n个元素作为选择器。

n=odd 奇数; n=even 偶数

2.nth-last-child(n):倒数索引

first-child: ul li:first-child{}

last-child: ul li:last-child{}

动态伪类选择器

1.(:link):指定链接未被点击时的样式

2.vistited:链接被访问之后的效果。一般由于浏览器缓存会显示错误

3.hover:鼠标悬停时候的样式

4.active:用户点击时候的样式

5.focus:获得聚焦时候的样式

补充:

CSS对大小写不严格要求,但是还是要书写规范。

权值大小比较:

内联样式表的权值为 1000

ID 选择器的权值为 1000

Class 类选择器的权值为 10

html 标签选择器的权值为 1

优先级:important>内联样式>id>class>标签|伪类|属性选择器>伪元素>通配符(*)>继承

关于“CSS选择器有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: CSS选择器有哪些

本文链接: https://www.lsjlt.com/news/92794.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • CSS有哪些选择器
    CSS是一种用于网页设计的样式表语言,可以通过它来控制网页的外观和布局。而选择器是CSS中最重要的一部分之一,它可以帮助我们找到想要更改样式的HTML元素。本文将详细介绍CSS中常用的选择器类型。一、基础选择器标签选择器:通过HTML标记名...
    99+
    2023-05-14
  • CSS选择器有哪些
    这篇文章将为大家详细讲解有关CSS选择器有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。复合选择器并集选择器:多个类型选择器,中间用逗号隔开 div,span,p{}...
    99+
    2024-04-02
  • 有哪些css选择器
    CSS(层叠样式表)是一种用于描述网页上元素样式的语言。在CSS中,选择器用于选择需要应用样式的HTML元素。选择器是CSS中最重要的概念之一,它决定了哪些元素将会被样式化。CSS选择器有多种类型,每种类型都有不同的语法和用途。下面是一些常...
    99+
    2023-10-21
    css 选择器
  • css选择器有哪些属性选择器
    CSS选择器提供了多种属性选择器,用于根据元素的属性值来选择元素。这些属性选择器可以根据属性值的相等、包含、开始、结束等条件进行选择。以下是CSS中常见的属性选择器:1. 等于选择器(Equals Selector):使用方括号([])和等...
    99+
    2023-10-21
    属性选择器 CSS选择器
  • css的选择器有哪些
    这篇文章主要介绍“css的选择器有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css的选择器有哪些”文章能帮助大家解决问题。一、基本选择器1、id选择器(优先级最高 0100)如:#id{.....
    99+
    2023-06-27
  • css中有哪些选择器
    本篇文章为大家展示了css中有哪些选择器,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。css选择器介绍:类别(class)选择器类选择器根据类名来选择,前面以“.”来标志。示例:.demoDiv{c...
    99+
    2023-06-14
  • css中选择器有哪些
    css选择器有:1、类选择器,使用语法为:“<p class="first"></p>”,在css中的样式为“.first{样式代码;}”;2、ID选择器,通过#符号加上id名称组成,使用语法为:...
    99+
    2024-04-02
  • css常用选择器有哪些
    css 中常用的选择器包括:类选择器、id 选择器、元素选择器、后代选择器、子选择器、通配符选择器、群组选择器和属性选择器,用于指定特定元素或元素组,从而实现样式化和页面布局。 CSS...
    99+
    2024-04-25
    css 属性选择器
  • css伪类选择器有哪些
    CSS 伪类选择器有以下几种:1. :hover - 鼠标悬停在元素上时触发2. :active - 元素被激活时触发,通常是元素被...
    99+
    2023-05-29
    css伪类选择器 css
  • CSS选择器有哪些类型
    本文小编为大家详细介绍“CSS选择器有哪些类型”,内容详细,步骤清晰,细节处理妥当,希望这篇“CSS选择器有哪些类型”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。   我们先看...
    99+
    2024-04-02
  • css基本选择器有哪些
    这篇文章主要为大家展示了“css基本选择器有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css基本选择器有哪些”这篇文章吧。   CSS基本选择器(对指...
    99+
    2024-04-02
  • css有哪些后代选择器
    本篇内容主要讲解“css有哪些后代选择器”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css有哪些后代选择器”吧! css后代选择器...
    99+
    2024-04-02
  • CSS选择器类型有哪些
    这篇文章主要为大家展示了“CSS选择器类型有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS选择器类型有哪些”这篇文章吧。 CSS选择器类型总结 1...
    99+
    2024-04-02
  • css选择器种类有哪些
    这篇文章主要介绍css选择器种类有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   一、标签名选择器   根据指定的标签名,在当前界面中找到所有该名称的标签,然后设置属性。...
    99+
    2024-04-02
  • 有哪些css高级选择器
    这篇文章给大家介绍有哪些css高级选择器,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。CSS的选择器分为两大类:基本选择题和扩展选...
    99+
    2023-06-15
  • css中的选择器有哪些
    本文将为大家详细介绍“css中的选择器有哪些”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“css中的选择器有哪些”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内...
    99+
    2024-04-02
  • css标签选择器有哪些
    css 标签选择器根据标签名选择元素,语法为 tag_name { 样式声明 }。它可以匹配所有元素、特定标题、段落、链接、列表和 div 容器。标签选择器的优点是简单易用和高性能,但不...
    99+
    2024-04-25
    css
  • css属性选择器有哪些
    小编给大家分享一下css属性选择器有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!第一种: E[att^=value]属性选择器此选择器只选择标签名称是E的,...
    99+
    2023-06-14
  • CSS选择符有哪些
    小编给大家分享一下CSS选择符有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! id 选择器 #app 类选择器 .co...
    99+
    2024-04-02
  • 有用的CSS伪选择器有哪些
    这篇文章主要讲解了“有用的CSS伪选择器有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“有用的CSS伪选择器有哪些”吧! 1、::first-line...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作