码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • CSS选择符和可继承属性


    属性选择符:

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

    伪类选择符:

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

    伪元素选择符:

    • 选择元素的特定部分或插入的内容。
    • 示例:
      • ::before:在元素内容之前插入内容。
      • ::after:在元素内容之后插入内容。
      • ::first-line:选择元素的第一行。
      • ::first-letter:选择元素的第一个字母。
    • 组合选择符 h1, h2 { color: blue; }(选择所有

      和

      元素)

    • 后代选择符(空格分隔)div p { color: green; }(选择所有
      元素内的

      元素)

    • 子元素选择符(>):div > p { color: purple; }(所有直接位于
      元素内的

      元素)

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

    • 相邻兄弟选择符(+):div + p { margin-top: 20px; }(紧接在
      元素后的

      元素)

    • 一般兄弟选择符(~)h1 ~ p { font-size: 14px; }(

      元素之后的所有

      兄弟元素)

    可继承的属性

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

    • 字体及其相关属性:font-family, font-size, font-weight, font-style, font-variant, font-stretch, font-size-adjust, font, line-height
    • 文本相关属性:text-indent, text-align, text-transform, text-decoration, letter-spacing, word-spacing, white-space, vertical-align (对于内联元素和表格单元格), text-shadow, direction, unicode-bidi
    • 颜色相关属性:color, opacity (注意,opacity继承会影响元素的透明度,但不会影响其颜色值本身)
    • 列表属性:list-style-type, list-style-position, list-style-image, list-style
    • 表格布局属性:border-collapse, border-spacing, empty-cells, caption-side
    • 其他属性:cursor, visibility, speak
    不可继承的属性

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

    • 盒模型相关属性:width, height, margin, padding, border, display, position, float, clear, top, right, bottom, left, overflow, clip, z-index, box-sizing, flex, grid 布局属性等
    • 背景和边框属性:background, background-color, background-image, background-repeat, background-position, background-size, background-attachment, border-color, border-style, border-width, border-radius 等
    • 其他与布局和外观相关的属性:opacity (当作为单独属性时,而非从color继承), visibility: collapse (对于表格行、行组、列和列组), content, counter-reset, counter-increment, outline, quotes, volume, speak-header, speak-numeral, speak-punctuation, voice-family, volume, pitch, pitch-range, stress, richness, azimuth, elevation 等
  • 相关阅读:
    C语言求 MD5 值
    Namomo Summer Camp 2023 Day 1 题解 | JorbanS
    2023icpc网络预选赛I. Pa?sWorD(dp)
    UWB 定位技术方案选择
    2022科大讯飞A.I.开发者大赛 柑橘花果梢识别挑战赛冠军方案
    【力客热题HOT100】-【040】101 对称二叉树
    天软特色因子看板 (2023.08 第08期)
    JAVA类加载器
    关于原型的一些总结
    Java开发从入门到精通(一):Docker
  • 原文地址:https://blog.csdn.net/m0_55049655/article/details/139752828
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号