css入门二:id和class选择器

如果需要给具体的某个元素增加样式,可以试用id选择器。

如果多个元素需要相同的样式,则可以用class选择器。

<html>

<head>

  <style>
    #id_test {background-color: gray;}
    .class_test {background-color: blue;}

  </style>

</head>


<body id="id_test">
  <h1 class="class_test">This is head</h1>
  <p class="class_test">
    this is paragraph.
  </p>

  <body>

</html>

多个class还可以同时使用,如下:

<html>

<head>

  <style>
    #id_test {background-color: gray;}
    .class_test {background-color: blue;}
    .class_test1 {color:yellow;font-size: 20px;}

  </style>

</head>


<body id="id_test">
  <h1 class="class_test">This is head</h1>
  <p class="class_test class_test1">
    this is paragraph.
  </p>

  <body>

</html>

组合选择器

后代选择器:div p{...} 选择div中的所有p

子元素选择器:div>p{...} 选择idv中的子元素p

相邻兄弟选择器:div+p{...} 选择div后的一个p

后续兄弟悬着器:div~p{} 选择div后的所有p





猜你喜欢

转载自blog.csdn.net/inch2006/article/details/80421129
今日推荐