css选择器

css的作用就是修饰html,每个html标签都可以被css修饰,这时就需要使用选择器让css和被修饰的html标签产生关系,css中有4种选择器,分别是:基本选择器,属性选择器,伪元素选择器,层级选择器。

基本选择器

1.元素选择器

语法:html的标签名{css属性}

示例:
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>元素选择器</title>
  <style type="text/css">
      span{color:red;font-size:88px; }
  </style>
  </head>
  <body>
      <span>我想学习css</span>
  </body>
  </html>

2.id选择器

html中,每个标签都有一个id属性,id的值在一个html文件中是唯一的 语法:#id的值{css属性} 示例:

  <!DOCTYPE html>
  <html>
  <head>    
  <meta charset="UTF-8">
  <title>id选择器</title>
  <style type="text/css">
      #div1{background-color: orange;}
      #div2{background-color: pink;}
  </style>
  </head>
  <body>
      <div id="div1">css id选择器1</div>
      <div id="div2">css id选择器2</div>
  </body>
  </html>

3.class选择器

语法:.class的值{css属性} 示例:

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>class选择器</title>
  <style type="text/css">
      .style1{background-color: orange}
      .style2{background-color: pink}
  </style>
  </head>
  <body>
      <div class="style1">css class选择器1</div>
      <div class="style1">css class选择器2</div>
      <div class="style2">css class选择器3</div>
  </body>
  </html>

选择器的优先级:id>class>元素

属性选择器

语法:基本选择器[属性='属性值']{css属性} 示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>

<style type="text/css">
  input[type='text']{background-color: yellow}
  input[type='password']{background-color: pink}
</style>

</head>
<body>
  <form action="">
      <tr>
          <td>用户名:</td>
          <td><input type="text" /></td>
      </tr>
      <tr>
          <td>密码:</td>
          <td><input type="password" /></td>
      </tr>
  </form>
</body>
</html>

伪元素选择器

常用的一般就是a标签的伪元素选择器

语法:
a标签一般有下面四种状态
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>

<style type="text/css">
  a:link{color:blue}
  a:hover{color:red}
  a:active{color:yellow}
  a:visited{color:green}
</style>

</head>
<body>
  <a href="#">点我试试!</a>
</body>
</html>

层级选择器

语法:父级选择器 子级选择器 …..

示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>

<style type="text/css">
  #d1 .dd2 span{color:red}
</style>

</head>
<body>
  <div id="d1">
      <div class="dd1">
          <span>span1-1</span>
      </div>
      <div class="dd2">
          <span>span1-2</span>
      </div>
  </div>
  <div id="d2">
      <div class="dd1">
          <span>span1-1</span>
      </div>
      <div class="dd2">
          <span>span1-2</span>
      </div>
  </div>
</body>
</html>