当前位置: 首页 > news >正文

CSS选择符和可继承属性

属性选择符

  • 示例:a[target="_blank"] { text-decoration: none; }(选择所有target="_blank"<a>元素)
/* 选择所有具有class属性的h1元素 */  
h1[class] {  color: silver;  
}  /* 选择所有具有href属性的a元素 */  
a[href] {  text-decoration: underline;  
}
/* 选择所有name属性值为"username"的input元素 */  
input[name="username"] {  border: 1px solid black;  
}  /* 选择所有class属性值为"highlight"的元素 */  
.highlight, [class="highlight"] {  background-color: yellow;  
}
/* 选择所有class属性值中包含"row-"的div元素 */  
div[class*="row-"] {  border-bottom: 1px solid #ccc;  
}  /* 选择所有id属性值以"nav-"开头的元素 */  
[id^="nav-"] {  color: navy;  
}

伪类选择符

  • 选择处于特定状态的元素。
  • :hover:用户悬停在元素上时。
  • :active:元素被用户激活时(如点击)。
  • :visited:用户已访问的链接。
  • :first-child:其父元素的第一个子元素。

伪元素选择符

  • 选择元素的特定部分或插入的内容
  • 示例:
    • ::before:在元素内容之前插入内容。
    • ::after:在元素内容之后插入内容。
    • ::first-line:选择元素的第一行。
    • ::first-letter:选择元素的第一个字母。
  • 组合选择符 h1, h2 { color: blue; }(选择所有<h1><h2>元素)
  • 后代选择符(空格分隔)div p { color: green; }(选择所有<div>元素内的<p>元素)
  • 子元素选择符>):div > p { color: purple; }所有直接位于<div>元素内的<p>元素)

子元素选择符使用>符号来选择某个元素的直接子元素。与后代选择符不同,子元素选择符仅选择直接的子元素,而不包括孙子元素、曾孙元素

  • 相邻兄弟选择符+):div + p { margin-top: 20px; }紧接<div>元素后的<p>元素)
  • 一般兄弟选择符~h1 ~ p { font-size: 14px; }<h1>元素之后的所有<p>兄弟元素

可继承的属性

大多数与文本相关的CSS属性都是可继承的。这些属性主要包括:

  • 字体及其相关属性font-familyfont-sizefont-weightfont-stylefont-variantfont-stretchfont-size-adjustfontline-height
  • 文本相关属性text-indenttext-aligntext-transformtext-decorationletter-spacingword-spacingwhite-spacevertical-align (对于内联元素和表格单元格), text-shadowdirectionunicode-bidi
  • 颜色相关属性coloropacity (注意,opacity继承会影响元素的透明度,但不会影响其颜色值本身)
  • 列表属性list-style-typelist-style-positionlist-style-imagelist-style
  • 表格布局属性border-collapseborder-spacingempty-cellscaption-side
  • 其他属性:cursorvisibilityspeak
不可继承的属性

大部分与布局和盒子模型相关的CSS属性都是不可继承的。这些属性包括:

  • 盒模型相关属性widthheightmarginpaddingborderdisplaypositionfloatcleartoprightbottomleftoverflowclipz-indexbox-sizingflexgrid 布局属性等
  • 背景和边框属性backgroundbackground-colorbackground-imagebackground-repeatbackground-positionbackground-sizebackground-attachmentborder-colorborder-styleborder-widthborder-radius 等
  • 其他与布局和外观相关的属性:opacity (当作为单独属性时,而非从color继承), visibility: collapse (对于表格行、行组、列和列组), contentcounter-resetcounter-incrementoutlinequotesvolumespeak-headerspeak-numeralspeak-punctuationvoice-familyvolumepitchpitch-rangestressrichnessazimuthelevation 等
http://www.lryc.cn/news/375175.html

相关文章:

  • C++升级软件时删除老版本软件的桌面快捷方式(附源码)
  • github国内加速访问有效方法
  • 如何处理JavaScript中的浮点数精度问题
  • ASPICE标准与ASPICE认证:提升汽车软件开发质量与效率的关键途径
  • easyexcel的简单使用(execl模板导出)
  • 代码随想录算法训练营第39天|● 62.不同路径 ●63. 不同路径 II
  • 【DevOps】 什么是容器 - 一种全新的软件部署方式
  • 使用pnpm创建vue3项目
  • 【软件测试】43个功能测试点总结
  • Python — — GPU编程
  • C#中的枚举类-自定义属性
  • 多态深度剖析
  • OSPF被动接口配置(华为)
  • Android --- 异步操作
  • (55)MOS管专题--->(10)MOS管的封装
  • 超高清图像生成新SOTA!清华唐杰教授团队提出Inf-DiT:生成4096图像比UNet节省5倍内存。
  • 网络安全 - DNS劫持原理 + 实验
  • MyBatis的运行原理
  • 算法题解记录29+++全排列(百日筑基)
  • 苹果AI功能,AI训练数据缺乏,SD3推出,MJ6推出新特性
  • 超越中心化:Web3如何塑造未来数字生态
  • 【ic-tool】timegen使用
  • 1:25万基础电子地图(云南版)
  • springboot宠物领养系统-计算机毕业设计源码07863
  • 牛客热题:最长回文子串
  • 如何访问寄存器
  • 苍穹外卖笔记-18-修改密码、bug记录
  • java如何截取字符串
  • 虚拟淘宝-Virtual-Taobao论文解读(AAAI2019)
  • 低代码组件扩展方案在复杂业务场景下的设计与实践