• 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选择器

  • 相关阅读:
    《微信小程序-基础篇》带你了解小程序中的生命周期（一）
    Linux-线程同步（条件变量、POSIX信号量）
    5G基带厂商
    Spring-AOP-加强
    什么是Token，javascript 如何获取和禁用 cookie
    怎么把amr格式转换为mp3格式？
    视频分析：走路看手机行为
    .NET餐厅管理系统sql数据帮助类执行SQL返回首行首列的值,不存在返回、根据SQL判断是否存在对应的数据、执行SQL返回DataSet数据集
    学习git博客
    如何快速地生成一个Python项目的requirements.txt
  • 原文地址：https://blog.csdn.net/m0_37607945/article/details/125889847