css3 伪类选择器

css3 伪类选择器

 a:link {
   color: yellow;
 }
 a:visited {
   color: palegreen
 }
 a:hover {
   color: pink;
 }
 a:active {
   color: blue;
 }
 /* 新的知识：E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点 */
 input:focus {
   background: palegreen;
 }

UI 状态伪类选择器

<E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E:selection 匹配E元素中被用户选中或处于高亮状态的部分

 p::selection{
     /* 选中文字  高亮时 */
     background: palegreen;
     color:purple;
 }
 /* ------------可用的元素   其实就是没有被禁用的   都是可用的------
 input:enabled{
     /* 代表可以使用 可以框选的input */
     width: 100px;
     height: 100px;
 }
 /* 禁用的  不能框选的 */
 input:disabled{
     width: 200px;
     height: 200px;
 }
 /* -------被选中的  ----  */
 input:checked{
     width: 50px;
     height: 50px;
 }

否定伪类选择器

除了box1都选

  p:not(.box1) {
    background: yellow;
  }

目标伪类选择器

<style>
  #gouzi {
    width: 200px;
    height: 300px;
    background: cyan;
  }
  /* 请注意 目标伪类 不是给锚链接设置 是给锚链接目标设置 */
  #gouzi:target {
      表示锚链接点击时 对应目标有以下样式
    background: palegreen;
  }
</style>
head>
body>
<a href="#gouzi">duioduo</a>
<div id="gouzi">锚链接目标</div>
body>

层级选择器

1、 选中header里的子元素img 不选择孙元素img*/
    #header>img {
      margin-top: 40px;
    }
#header img {后代选择器选择header里子级 孙子级 曾孙子。。。。所有的img
  margin-top: 40px;
}

2、毗邻选择器 也叫加号选择器 第一个不是aside则无效*/
section+aside {
  /* 代表选中section下第一个弟弟 注意是同级 */
  background: palegreen;

3、波浪号选择器 */
section~aside {
  /* 代表选中section下方所有弟弟aside 同级 */
  color: red;
}