CSS的选择器

平常有做一些简单网页的需求,以前一直只是单纯了解了HTML,在HTML里去定义格式已经落伍啦,了解一下CSS很有必要。(这里只是简单的应用)

1.ID 选择器(ID selector,IS):使用 # 标识selector。例:

<style>
#name{
  color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">red text</p>

2.类选择器(class selector,CS):使用 . 标识selector。例:

<style>
.value{
  text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>

3.元素选择器(element selector,ES):又叫标签选择器,使用html的标签作为selector,例:

<style>
p{
  font-style:italic;
}
</style>
<!--下面的文字是斜体的-->
<p style="font-style:italic">italic text</p>

4.属性选择器(attribute selector,AS):是ES的加强版,平常用不着,不过多介绍。

5.包含选择器(package selector,PS):指定目标选择器必须处在某个选择器对应的元素内部,语法格式:A B{…}(A、B为HTML元素/标签,表示对处于A中的B标签有效)。例:

<style>
p{
  color:red;
}
div p{
  color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
  <p>yellow text</p><!--文字是黄色的-->
</div>

6.子选择器(sub-selector,SS):类似于上一个,指定目标选择器必须处在某个选择器对应的元素内部,两者区别在于:
- PS允许”子标签”甚至”孙子标签”及嵌套更深的标签匹配相应的样式。
- 而S强制指定紧挨着的里面一层标签进行匹配。
语法格式:A>B{…}(A、B为HTML元素/标签)。例:

<style>
div>p{
  color:red;
}
</style>
<div>
  <p>red text</p><!--文字是红色的-->
  <table>
    <tr>
      <td>
        <p>no red text;</p><!--文字是非红色的-->
      </td>
    </tr>
  </table>
</div>

7.兄弟选择器(brother selector,BS):BS是CSS3.0新增的一个选择器,语法格式:A~B{…}(A、B为HTML元素/标签,表示A标签匹配selector的A,B标签匹配selector的B时,B标签匹配样式),简单来说,就是两个标签并列的时候,第二个标签的样式。

<style>
div~p{
  color:red;
}
</style>
<div>
  <p>no red text</p><!--文字是非红色的-->
  <div>no red text</div>
  <p>red text</p><!--文字是红色的-->
</div>
阅读更多
版权声明:如果对您有所启发,欢迎留言告知。若需转载请先联系作者获得许可,转载后请注明出处。 https://blog.csdn.net/yq_forever/article/details/79602559
个人分类: Coding
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭