首页 > 其他分享 >列举出css所有的样式选择器

列举出css所有的样式选择器

时间:2023-08-25 21:56:12浏览次数:43  
标签:class 元素 Selector 选择 child 列举 选择器 css

以下是 CSS 中常见的各种样式选择器:

1. 元素选择器:通过 HTML 元素名称选择元素,如 `p`、`div` 等。
2. 类选择器(Class Selector):通过 `class` 属性选择一个或多个具有相同类名的元素,如 `.example`。
3. ID 选择器(ID Selector):通过 `id` 属性选择具有唯一标识符的元素,如 `#uniqueID`。
4. 属性选择器(Attribute Selector):通过属性名称和属性值来选择元素,如 `[attribute="value"]`。
5. 后代选择器(Descendant Selector):通过嵌套关系选择元素,如 `parent child`。
6. 直接子元素选择器(Child Selector):选择指定父元素下的直接子元素,如 `parent > child`。
7. 相邻兄弟选择器(Adjacent Sibling Selector):选择紧接在指定元素后的兄弟元素,如 `element + sibling`。
8. 全部兄弟选择器(General Sibling Selector):选择在指定元素后的所有兄弟元素,如 `element ~ sibling`。
9. :hover 伪类选择器(Hover Pseudo-class Selector):选择鼠标悬停在元素上的状态,如 `:hover`。
10. :active 伪类选择器(Active Pseudo-class Selector):选择元素处于活动(被点击)状态的样式,如 `:active`。
11. :focus 伪类选择器(Focus Pseudo-class Selector):选择元素获取焦点的样式,如 `:focus`。
12. :nth-child() 伪类选择器(Nth-child Pseudo-class Selector):选择指定在其父元素中的索引位置的子元素,如 `:nth-child(n)`。
13. :first-child 伪类选择器(First Child Pseudo-class Selector):选择父元素中的第一个子元素,如 `:first-child`。
14. :last-child 伪类选择器(Last Child Pseudo-class Selector):选择父元素中的最后一个子元素,如 `:last-child`

标签:class,元素,Selector,选择,child,列举,选择器,css
From: https://www.cnblogs.com/coversky/p/17658027.html

相关文章

  • 【Python-每日技巧】列举一些Python稍微有点难度的技巧
    元编程(Metaprogramming):这是一项高级技术,允许你在运行时动态地创建、修改和操作代码。Python提供了强大的元编程特性,如使用装饰器(Decorators)、元类(Metaclasses)和反射(Reflection)等。这些概念需要深入理解Python的对象模型和元数据处理能力。以下是一个使用元编程的示例,展示如何动态......
  • 记录--一个炫酷的css动画
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助最近有一个需求,要我实现一个动画效果,效果如下简单分析了一下效果,是一个3d的效果,首先是一个圆,接着是两段圆环,第三层是一堆小圆环,最里面是一些线上运动,有着渐变色的矩形。第一层的圆环很简单。第二层的圆环其实......
  • css粘性页脚,固定一个页脚
    css粘性页脚,固定一个页脚方案一:<divclass="wrapper"><headerclass="page-header">Thisistheheader</header><articleclass="page-body"><p>Mainpagecontenthere,addmoreifyouwanttose......
  • CSS-01
    CSS样式课程目标1.css引入方式(重点)2.css选择器(重点)3.css盒子模型(重点)4.css3常见效果(重点)级联样式表css概述层叠样式表其实就是对静态页面进行装饰,但是,特别要注意的点是:通常建议表现形式与页面内容分离(例如:人就是内容,穿着打扮就是表现形式)css引入方式行内样式行内样式(将样式直接写在......
  • CSS:table单实线边框的实现方案与浏览器兼容性验证
    摘要本文主要探讨table单实线边框的几种实现方案,以及各个方案的浏览器兼容性验证(Chrome、Edge、Firefox、IE)。引子项目上希望业务表单在填写时,展现形式可以做成该表单实际打印出来的样子,而不是ElementUI等前端框架所提供的form样式。在使用table做表单时,Chrome出现了表格边框粗细......
  • element-ui 中 Cascader 级联选择器同时获取value值和label值
    给Cascader级联选择器添加一个别名 复制代码<el-cascader:options="options"ref="myCascader"></el-cascader>选择完毕之后可以通过别名获取 复制代码letlabelValue=this.$refs['myCascader'].inputValue当然,element-ui在一直更新变化,label值的字......
  • [转]vue中的css深度选择器 :deep(<inner-selector>)、/deep/、>>>、::v-deep 到底是什
    原文地址:vue中的css深度选择器:deep(<inner-selector>)、/deep/、>>>、::v-deep到底是什么?-掘金vue中的css深度选择器概念与作用当<style>标签有scoped属性时,它的CSS只作用于当前组件中的元素,父组件的样式将不会渗透到子组件。如果你希望scoped样式中的一个选......
  • h5(html5)+css3前端笔记五
    盒子模型网页布局本质网页布局过程先准备好相关的网页元素,网页元素基本都是盒子Box。利用CSS设置好盒子样式,然后摆放到相应位置PS基本操作综合案例圆角边框盒子阴影文字阴影......
  • CSS基础-背景
    background-color背景颜色,可以使用十六进制、rgb、rgba表示。语法/**selector背景元素的原则去*//**color背景颜色的值,可以是颜色名称、十六进制值、RGB、RGBA*/selector{background-color:color;}示例/**设置body标签背景为白色*/body{background-......
  • 前端命令——编译文件ts scss sass 等
    1.安装npminstall-gtypescripttsc--initÏ2.使用方法2.1、将ts文件转化为jstscindex.ts会自动生成对应的index.js文件2.2、一行直接搞定ts转jsnpxts-nodeindex.ts>output.js直接将index.ts转化为对应的js文件......