CSS的基础学习2 -选择器

发表于   |  
  1. 常用选择器
  2. 组合选择器

  • 常用选择器：

    • 类选择器 .class

      .word {color:red;}

      <html>
<head>
<style>
.word {color:red;}
</style>
</head>
<body>
<div class="word">
<p>类选择器类选择器</p>
</div>
</body>
</html>

      类选择器类选择器

    • id选择器 #id

      #word {color:red;}

      <html>
<head>
<style>
#word {color:red;}
</style>
</head>
<body>
<div id="word">
<p>id选择器id选择器</p>
</div>
</body>
</html>

      id选择器id选择器

    • 通配符 *

      * {margin:0; padding:0;}

    • 元素选择器 element

      p {color:red;}

    • 属性选择器 [attribute]
`.at[target]{
background-color:yellow;
}`

    <html>
    <head>
    <style>
    .at[target]{
    background-color:yellow;
    }
    </style>
    </head>
    <body>
    <div>
    <a class="at" target='##'>属性选择器属性选择器</a></br>
    <a>没有target没有target</a></p></div>
    </div>
    </body>
    </html>

- 伪类选择器 name:伪类
    </br>伪类有许多常见的有：hover,:after,:before,:first-child,:last-child等

  • 组合选择器

    • 群组选择器 name1,name2
    • 后代选择器 name1 name2

    • 相邻兄弟选择器 name1 + name2

      <html>
<head>
<style>
.name1+p
{
background-color:yellow;
}
</style>
</head>
<body>
<div class="name1">
<p>相邻兄弟选择器</p>
<p>相邻兄弟选择器</p>
</div>
<p>相邻兄弟选择器</p>
</body>
</html>

      相邻兄弟选择器
      相邻兄弟选择器
      相邻兄弟选择器

    • 子代选择器 name1 > name2

      <html>
<head>
<style>
.name2 > p
{
background-color:yellow;
}
</style>
</head>
<body>
<div class="name2">
<p>子代选择器</p>
<p>子代选择器</p>
</div>
<p>其他段落</p>
</body>
</html>

      子代选择器
      子代选择器
      其他段落

子代选择器与后代选择器的区别

子代选择器只对子代有用，而后代选择器不仅对子代对孙代，曾孙代都有用。