css选择器

复合选择器

<style>
  /* 交集选择器
  作用：选中同时复合多个条件的元素
  语法：选择器1选择器2选择器3选择器n{}
  注意：交集选择器中如果有元素选择器，必须使用元素选择器开头
  */
  /*元素标签是div并且类是red*/
  div.red{ 	  /* 将class为red的div字体大小设置为30px */
    font-size: 30px;
  }

  .a.b.c{
    color: blue
  }

  /* div#box{} */  /*div标签并且id是box的，但一般不这么用，因为id是唯一的，直接用id选就行*/

  /*并集选择器
  作用：同时选择多个选择器对应的元素
  语法：选择器1,选择器2,选择器3,选择器n{}

  #b1,.p1,h1,span,div.red{}
  最后的div.red是交集选择器
  */
</style>
<div class="red">我是div</div>
<p class="red">我是p元素</p>
<div class="red2 a b c">我是div2</div>
<h1>标题</h1>
<span>哈哈</span>

关系选择器

<style>
  /* 
	父元素：直接包含子元素的元素
	子元素：直接被父元素包含的元素
	祖先元素：直接或间接包含后代元素的元素。一个元素的父元素也是它的祖先元素
	后代元素：直接或间接被祖先元素包含的元素。子元素也是后代元素
	兄弟元素：拥有相同父元素的元素是兄弟元素

  子元素选择器
  作用：选中指定父元素的指定儿子元素
  语法：父元素 > 子元素
  */

  div.box > span{
  	color: orange;
  }

  /* 
  后代元素选择器：
  作用：选中指定元素内的指定后代元素
  语法：祖先 后代
  div span{
  color: skyblue
  } */

  /* 
  选择下一个兄弟语法：前一个 + 下一个
  选择下边所有的兄弟语法：兄 ~ 弟
  */

  p + span{
    color: red;
  }

  p ~ span{
    color: red;
  }
</style>

<div class="box">
  我是一个div
  <p>
    我是div中的p元素
    <span>我是p元素中的span</span>
  </p>
  <div></div>   
  <!-- p + span的话找不到，他找的是紧挨p的span。这俩之间加了一个div就不行 -->
  <!-- p ~ span的话可以选中下面所有span，他不要求紧挨着。～是选下面的兄弟元素，比如把下面那些span放在p前面就不会选 -->
  <span>我是div中的span元素</span>
  <span>我是div中的span元素</span>
</div>

属性选择器

<style>
  /* 
  [属性名] 选择含有指定属性的元素
  [属性名=属性值] 选择含有指定属性和属性值的元素
  [属性名^=属性值] 选择属性值以指定值开头的元素
  [属性名$=属性值] 选择属性值以指定值结尾的元素
  [属性名*=属性值] 选择属性值中含有某值的元素的元素
  */
  /* p[title]{    选有title属性的p元素*/
  /* p[title=abc]{      选有title属性并且值为abc的p元素  即少小离家老大回   */
  /* p[title^=abc]{   少小离家老大回 和 乡音无改鬓毛衰*/
  /* p[title$=abc]{  少小离家老大回 和 儿童相见不相识   */
  p[title*=abc]{    /*值中含有abc  前三行全选中*/
    color: orange;
  }
</style>

<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音无改鬓毛衰</p>
<p title="helloabc">儿童相见不相识</p>

伪类选择器

<style>
  /* 
  :first-child 第一个子元素
  :last-child 最后一个子元素
  :nth-child(参数) 选中第n个子元素   从1开始
  特殊值： n从0开始代入 每次加1
  n  全选
  2n 或 even 表示选中偶数位的元素
  2n+1 或 odd 表示选中奇数位的元素
  5n  5 10 15...
  n+5  5 6 7...
  -n+5 1 2 3 4 5

  以上这些伪类都是根据所有的子元素进行排序
  比如ul > li:first-child是指ul的所有子元素中的第一个，而且是li。不是所有li子元素中的第一个。下面的例子中由于第一个子元素是span，所以这句不会让第一个li变红

  :first-of-type
  :last-of-type
  :nth-of-type()
  这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序

  :not() 否定伪类
  将符合条件的元素从选择器中去除
  
  ul > li:first-child{   将ul里的第一个li设置为红色
  color: red;
  } 
  
  ul > li:nth-child(1){ 第一个子元素
  color: red;
  } 
  
  ul > li:first-of-type{   所有li中的第一个，不管span
  color: red;
  } */
  ul > li:not(:nth-child(3)){ 我是一个span和第一个 不是绿
    color: green;
  }

  ul > li:not(:nth-of-type(3)){我是一个span和第二个 不是绿
    color: green;
  }
</style>

<ul>
  <span>我是一个span</span>
  <li>第〇个</li>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  <li>第四个</li>
  <li>第五个</li>
</ul>

超链接的伪类

<style>
  /* :link 用来表示没访问过的链接（正常的链接）*/
  a:link{
    color: red;            
  }

  /* :visited 用来表示访问过的链接由于隐私的原因，所以visited这个伪类只能修改链接的颜色 */
  a:visited{
    color: orange; 
    /* font-size: 50px;   */
  }

  /* :hover 用来表示鼠标移入的状态*/
  a:hover{
    color: aqua;
    font-size: 50px;
  }

  /*:active 用来表示鼠标点击*/
  a:active{
    color: yellowgreen;
  }
</style>

按照link visited hover active的顺序写

<style>
  .box:hover .mask {    //当鼠标移到box上时，让box里的mask显示出来
    display: block;
  }
</style>
<div class="box">
  <div class="mask"></div>
</div>

伪元素

<style>
  /* 
  伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
  伪元素使用 :: 开头

  ::first-letter 表示第一个字母
  ::first-line 表示第一行
  ::selection 表示选中的内容
  ::before 父元素内容的开始 
  ::after 父元素内容的最后
  before 和 after 必须结合content属性来使用    这俩是行内元素，不能设置大小
  */
  p::first-letter{
    font-size: 50px;
  }

  p::first-line{
    background-color: yellow; 
  }

  /*网页上用鼠标选中的地方变黄绿色*/
  p::selection{
    background-color: greenyellow;
  }

  div::before{
  content: 'abc';
  color: red;
  }

  div::after{
    content: '』';
  }
</style>
<div>Hello Hello How are you</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit modi veniam nisi</p>

这样就只需要一个div就行了

//案例土豆遮罩层  鼠标放上变黑
<style>
  .tudou::before {
    content: '';
    display: none;
    position :absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("img/mask.jpg") rgba(0, 0, 0, .4) no-repeat center;
  }
  .tudou:hover::before {    //注意中间没有空格
    display: block;    //经过时使遮罩层显示出来
  }
</style>
<div class="tudou"><img src="1.jpg"></div>

选择器优先级

同种选择器则用下面的，不同的话根据优先级

<style>
  /* #box1{
  background-color: orange;
  }

  div#box1{  优先级大于上面
  background-color: yellow;
  } */

  .d1{
    background-color: purple !important;     /*!important是最屌的*/
  }
  .red{
    background-color: red;
  }

  /* div,p,span{
  background-color:yellowgreen;
  } */

  /* 
  选择器的权重
  内联样式             1000
  id选择器             100
  类、属性和伪类选择器   10
  伪元素、标签选择器     1
  通配选择器            0
  继承的样式       		 没有优先级

  比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示
  选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器,比如用十一个类即使110>100,也用id的设置
  如果优先级计算后相同，此时则优先使用靠后的样式

  可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级
  注意：在开发中这个玩意一定要慎用！
  */
</style>

<div id="box1" class="red d1 d2 d3 d4" style="background-color: chocolate;">我是一个div <span>我是div中的span</span></div>

<style>
  #father {
		color: red !important;
  }
  p {
    color: pink;   //即使父元素用了！important，继承过来还是0，所以是pink
  }
</style>
<div id="father">
  <p></p>
</div>

<a>hh</a>
<style>
  body {
    color: red !important;
  }
</style>
<!-- a标签有自己的默认样式，会覆盖继承的样式，所以是默认的蓝色 -->