• CSS选择器

    • 元素选择器
    h1 {
    color: red;
    font-size: 5em;
}

    • 1
    • 2
    • 3
    • 4

    In the above example, the CSS rule opens with a selector . This selects the HTML element that we are going to style. In this case, we are styling level one headings h1.

    • 类选择器

    In your HTML document, add a class attribute to the second list item. Your list will now look like this:

    <ul>
  <li>Item oneli>
  <li class="special">Item twoli>
  <li>Item <em>threeem>li>
ul>

    • 1
    • 2
    • 3
    • 4
    • 5

    Copy to Clipboard

    In your CSS, you can target the class of special by creating a selector that starts with a full stop character. Add the following to your CSS file:

    .special {
  color: orange;
  font-weight: bold;
}

    • 1
    • 2
    • 3
    • 4
    • 位置选择器

    // 儿子

    li em {
  color: rebeccapurple;
}

    • 1
    • 2
    • 3

    This selector will select any element that is inside (a descendant of) an

  • .

    Something else you might like to try is styling a paragraph when it comes directly after a heading at the same hierarchy level in the HTML. To do so, place a + (an adjacent sibling combinator) between the selectors.

    // 兄弟

    h1 + p {
  font-size: 200%;
}

    • 1
    • 2
    • 3
    • 状态选择器

    the CSS below styles unvisited links pink and visited links green.

    a:link {
  color: pink;
}

a:visited {
  color: green;
}
/* when the user hovers over it  */
a:hover {
  text-decoration: none;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 组合选择器和组合器

    You can target multiple selectors at the same time by separating the selectors with a comma. If you want all paragraphs and all list items to be green, your rule would look like this:

    p, li {
    color: green;
}

    • 1
    • 2
    • 3
    li.special {
  color: orange;
  font-weight: bold;
}

    • 1
    • 2
    • 3
    • 4

    This syntax means “target any li element that has a class of special”.

    /* selects any  that is inside a 
    , which is inside an 
      */
article p span { }

/* selects any 
     that comes directly after a 
      , which comes directly after an 
        */
h1 + ul + p { }

      • 1
      • 2
      • 3
      • 4
      • 5
    body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

    • 1
    • 2
    • 3
    • 4
    • 5

    This will style any element with a class of special, which is inside a

    , which comes just after an

    , which is inside a .

    参考 CSS选择器

  • 相关阅读:
    科普读书会丨《被讨厌的勇气》：愤怒不是目的，是一种工具
    UI自动化 --- UI Automation 基础详解
    UNI-APP中如何通过配置访问代理，解决跨域问题
    代码随想录 Day46 动态规划14 LeetCode T392 判断子序列 T115 不同的子序列
    UltraISO制作U盘启动盘安装Win11系统攻略
    苹果15OTG音频转接器方案大卖-无敌成本加兼容性性价比直接拉满
    C++新经典 | C++ 查漏补缺（概述）
    ExoPlayer架构详解与源码分析（9）——TsExtractor
    HarmonyOS 3.1 API9 集成认证服务提示client id or secret error.
    MySQL 备份策略详解：完全备份、增量备份和差异备份（InsCode AI 创作助手）
  • 原文地址：https://blog.csdn.net/m0_37607945/article/details/125889847