css5. CSS选择器

[lixiaojuan12]

1） 通配符选择器

• 匹配全部HTML元素 , 一般不使用，因为全部匹配比较耗性能,一般用来清除浏览器默认自带的间距样式
• 语法 *{ margin:0;padding:0; }
• 权重：0

  *{
  margin:0;
  padding:0;
  }

2) 标签选择器

• 直接将HTML元素的标签名当做选择器来用
• 语法：标签选择器{css属性名:css属性值;} p{color: black}
• 权重：1
• 例子：标签名+{}，这一类标签都能起作用

  p{
  background:darkcyan;
  }

  3) 类选择器

• 将html元素的class标签属性值，当做选择器使用，需要在这个标签属性值前面加"." ，一个HTML元素可以有很多个标签属性值(类名)，每个类名之间用空格隔开；类名可以重复使用；
• 语法：类选择器{css样式;} .box{color: black}
• 权重：10
• 起名字：在开始标签里面 class=“名字”
• 选取：.+ "name"

  .p2{
  background:green;
  }
  <p class='p2'>段落</p>

  4) id选择器

• 将html元素的id标签属性值，当做选择器使用，需要在这个标签属性值前面加"#", 一个HTML元素，id标签属性值只能用一次，id在html中具有唯一性；
• 语法：ID选择器{css样式;} #box{color: black}
• 权重：100
• 用法:
  • 在开始标签里面 id=”name1”
  • 使用的时候：#name1{}
• id选择器和class选择器不同，例如在页面中写了一个id=“name1”，那么这个页面中不允许出现第二个相同的，这个是规定。id=“name1”是唯一的

  <style>
  #p1{
    background:green;  
  }   
  </style>
  <p id="p1" class="p1">段落1</p>

  5) 属性选择器

• 利用标签的属性名和属性值来选择html元素
• 语法: [标签属性名]{ 属性名：属性值}、[标签属性名 = 属性值]{ 属性名：属性值} [title]{} 、 [title=he]{}
• 权重: 10
• 用法：
  • [属性]{},把具有这个属性的所有标签选中
  • [属性=“属性值”]，把不仅具有这个属性，而且必须是属性值也是规定的这一类标签选中

    <style>
    [index]{
       background:darkorange;
    }
    [index="a1"]{
      background:darkorchid;
    }
    </style>

    6) 子级选择器

• 存在包含关系的元素选择，通过父级确定选择子级 ; 父级选择器是用来确定取值范围 , 子级选择器才是我们要添加样式的那个元素 , 子级选择器必须是紧邻的父子关系
• 语法：父级选择器 > 子级选择器 { 属性名 : 属性值} ul>li{color: black}
• 权重：组合的选择器之和
• 连接符：>
• 意思：结合生活中群代关系，“子”可以理解成“儿子”，例如下面的div>h1 代表选中div里面的儿子元素，并且是h1的这一类标签

  <style>
  div>h1{
  background:green;
  }
  </style>
  <div class="main">
  <p>p1</p>
  <h1>h1</h1>
  <div>
  <span>span</span>
  </div>
  </div>

  7) 后代选择器

• 在一个根元素的范围内，查找到它的后代元素, 符号用空格隔开
• 语法：祖辈选择器 后代选择器{} 如：ul li{}
• 权重: 单个选择器权重之和
• 连接符： 空格
• 意思：结合生活中的裙带关系，这个后代就是不论是儿子还是孙子还是…只要是后代就符合

  <style>
    div span{
        background:green;
    }
  </style>
  <div class="main">
  <div>
  <span>span</span>
  </div>
  <span>span</span>
  </div>

  8) 分组选择器

• 同一份css样式，可以一次性的添加给多个不同html元素
• 语法：选择器1，选择器2，选择器3 {属性名：属性值 } h1, h2, h3{color: black}
• 权重：组合选择器之和
• 连接符：逗号，
• 意义：将相同的代码提取出来，减少冗余
• 下面列子，.box1>p和.box2具备同样的样式

  .box1>p,.box2{
         color:darkorange;
         width:100px;
         height:100px;
         background:green;
  }
  <div class="box1">
  <p>p1</p>
  </div>
  <p class="box2">box2</p>

  9) 交集选择器

• 权重：组合的选择器之和
• 符号：没有
• 意思：有多个选择器组成

  <style>
  .box1.current{
      background:green;
  }
  </style>
  <div class="box1 current" >box1</div>
  <div class="box1">box1</div>
  <p class="current">p1</p>

  10) 相邻兄弟选择器

• 权重：组合选择器之和
• 连接符号：+
• 代表的意思：以下面为例，h1+p 代表的是选中与h1相邻的p标签（注意：向下寻找，下面代码中第一个p标签并不能被选中）

  <style>
    h1+p{
        background:green;
    }
  </style>
  <p>p1</p>
  <h1>h1</h1>
  <p>p1</p>
  <p>p2</p>
  <h1>h1</h1>
  <div>div1</div>
  <h1>h1</h1>
  <p>p1</p>
  <p>p2</p>

  11) 通用兄弟选择器

• 权重：组合选择器之和
• 连接符号：~
• 代表的意思：以下面为例，h1~p 代表的是选中h1下面所有的兄弟p标签（注意：向下寻找，下面代码中第一个p标签并不能被选中）

  <style>
  h1~p{
  background:green;
  }
  </style>
  <p>p1</p>
  <h1>h1</h1>
  <p>p1</p>
  <div>box1</div>
  <p>p2</p>
  <h1>h1</h1>
  <div>div1</div>
  <h1>h1</h1>
  <p>p1</p>
  <p>p2</p

  12) 伪类选择器

• 给页面（元素）添加某种状态，叫做伪类选择器；
• 权重: 10
• a标签的四种状态，它这四种状态有一定的顺序，在网络上被称为“爱恨原则”
• 重点记住：hover 即可，其它几个不兼容
  • :link{} 默认的状态
  • :hover{} 鼠标经过（滑过）的状态
  • :active{} 点击时的状态
  • :visited{} 点击后的状态

    <style>
    a{
    font-weight: bold;
    font-size:100px;
    }
    /* 默认链接的文字颜色 */
    a:link{
    color:green;
    }
    /* 访问过后的文字颜色 */
    a:visited{
    color:gold;
    }
    /* 鼠标滑上 */
    a:hover{
    color:hotpink;
    }
    /* 点击链接时候的 */
    a:active{
    color:darkcyan;
    }
    </style>

    13) 伪元素选择器及权重

• 通过css代码向指定元素内添加假的(html中不存在)的元素, :before 会出现在元素所有内容之前, :after 会出现在元素所有内容之后
• 使用伪元素的时候要保证两个前提：
  • 要有display：block这个属性
  • 要有content这个属性，这个属性的属性值可以为空，但是引号不能少

CSS优先级 权重顺序:

!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承>浏览器默认