css选择器

CSS

CSS：层叠样式表，就是给html标签添加样式，让其更加美观。

CSS的注释

/*单行注释*/

/*
多行注释1
多行注释2
多行注释3
*/

# 通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)

CSS语法结构

选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

CSS的三种引入方式

#1 style标签直接书写css代码
<style>
    h1{
        color: burlywood;
    }
</style>


#2 link标签引入外部css文件，正规
<link rel="stylesheet" href="mycss.css">


#3 行内式，直接html标签内书写样式，一般不推荐
<h1 style="color: green">老板好 要上课吗?</h1>

---

注意：CSS学习分两步：先找标签(选择器)，再美化(css样式)

---

CSS选择器

所谓选择器，就是确定标签位置的方法

基本选择器

• id选择器，根据id值确定一个标签

  #id_name{
      color:red;
  }
  

• class选择器，根据class值确定一类标签

  .class_name{
      color:red;
  }
  

• 元素/标签选择器，根据标签名确定一堆标签

  span{
      color:red;
  }
  

• 通用选择器，选择所有标签

  *{
      color:red;
  }
  

层级选择器

• 后代选择器，空格隔开，选择div 里面的所有span

  div span{
      color:red;
  }
  

• 儿子选择器，>连接，选择内部第一层的所有span

  div>span{
      color:red;
  }
  

• 毗邻选择器，+连接，选择div同级别的紧挨着的下面一个span，隔着一个都不行

  div+span{
      color:red;
  }
  

• 弟弟选择器，~连接，选择同级别下面所有的span

  div~span{
      color:red;
  }
  

属性选择器

属性选择器，以[]作为标志。

• 含有某个属性的标签

  [username]{  /*选择属性名含有username的标签*/
      color:red;
  }
  

• 含有某个属性且有某个值的标签，选择属性名为

  [username='xliu']{	/*选择属性名含有username且名字为'xliu'的标签*/
      color:red;
  }
  

• 含有某个属性且有某个值的某个标签

  input[username='xliu']{	/*选择属性名含有username且名字为'xliu'的input标签*/
      color:red;
  }
  

分组

多个选择器可以同时设置样式，选择器之间用逗号隔开。

div, p, span{
    color:red;
}

#name, .animal, span{
    color:red;
}

伪类选择器

a:link{			/*a标签访问前的颜色*/
    color:red;
}
a:hover			/*鼠标悬浮在a标签上，显示的颜色*/
a:active		/*鼠标点击不松开时a标签的颜色，激活态*/
a:visited		/*访问之后a标签的颜色*/  
input:focus		/*input框获取焦点(鼠标点了input框)时的颜色

伪元素选择器

注意：before和after通常用来清除浮动带来的影响：父标签塌陷问题

/*设置段落首字符样式*/
p:first-letter {
            font-size: 48px;
            color: orange;
        }

/*在文本开头 同css添加内容*/
p:before { 
            content: '你说的对';
            color: blue;
        }

/*在文本结尾 同css添加内容*/
p:after{
    ...
} 	

选择器优先级

• 选择器相同，就近原则。（三种引入方式，谁靠近标签谁有效）

• 选择器不同，精确度越高原则。

  顺序：行内 > id选择器 > class选择器 > 标签选择器
  权重：1000   100      10           1