CSS3【1】—选择器总结

最近抽了点时间，整理一下一些前端基础知识，写的不好的地方请大家踊跃留言，我会继续优化这一系列文章：

一、兄弟选择器

1.相邻兄弟选择器

基本语法： 参考选择器+目标选择器{样式}

匹配规则： 参考选择器 下的紧挨着的那个兄弟，所有的  {  之前放的都是  选择器

//加号左右有空格，匹配id为tag的标签紧挨着的p兄弟标签
#tag + p {
    color: cyan;
}

2.通用兄弟选择器

基本语法： 参考选择器  ~  目标选择器{样式}

匹配规则： 参考选择器  下的所有兄弟

//~前后有空格，匹配id为tag的标签的p兄弟标签
 #tag  ~  p{
    color: red;
 }

二、属性选择器

属性选择器：
1操控属性命名
        []     [][]
2操控属性值
        [=]   [~=]  [*=]
        [^=]   [$=]
3带选择器的
        选择器[]

1.基础选择器

基础属性选择器：4大通用属性：id class title style

基本语法：  [属性名]{样式}

匹配规则：  含有 该属性名的所有元素被匹配

 [title]{
        background-color: #ff0;
    }

2.并列属性

基本语法： [属性名a][属性名b]...{样式}

匹配规则：  表示同时具有两个属性的的元素在满足匹配规则

[title][id]{
        background-color: #ff0;
    }

3.表示更加精确的匹配:

通过属性值的区分：=

• 全等

	基本语法：  [属性名 ="属性值"]
	匹配规则：  = 表示全等  属性名全等属性值

• 部分全等

基本语法：  [属性名 ~="属性值"]
匹配规则：  ~= 表示部分全值等   这个所谓的全值 是用空格隔开的那个值 就是一个全值

• 含有

   基本语法：[属性名 *="属性值"]
   匹配规则： 只要是属性值中包含有该匹配值就可以（不需要全值） 就是将属性值看做是一个整体

• 作为开始

 基本语法：[属性名^="属性值"]
 匹配规则：是当前的属性值作为一个整体，该整体是以当前的属性值为开始被匹配成功

• 作为结尾

  基本语法： [属性名$="属性值"]
  匹配规则： 是当前的属性值作为一个整体，该整体是以当前的属性值为结尾被匹配成功

	nav[class$="ab"]{
	    background-color: #f00;
	}

三、伪类选择器

1.让标记更加的凸显

（1）target 是和a 标签的锚点配用

div:target{
          color: cyan;
          font-size: 100px;
          font-weight: bold;
      }

（2）enabled 是from表单 那些可选元素匹配

   input:enabled{
        background-color: #f00;
        width: 50px;
        height: 50px;
    }

（3）disabled 是from表单 那些不可选元素匹配

//当前的input 有disabled属性的,中间没有空格
  input:disabled{
        background-color: #f00;
        width: 50px;
        height: 50px;
    }

（4）单选或多选钮 那些被选中的 :checked

//:前没有空格
  input:checked{
     width: 50px;
       height: 50px;
   }

（5）滑词效果 ：可以设置的是表现样式，那些有可能改变元素大小那些都不可以生效

 pre::selection{
            background-color: green;
            color: red;
            font-size: 50px;
        }

2.结构伪类

(1)语法：父级 :first-child{}

  匹配规则： 该父级下面的第一个孩子

//父级后加空格 再加：
 ul :first-child{
        background-color: #f00;
    }

/*精确写法*/
 ul li:first-child{
    background-color: #f00;
   }

(2)语法：父级 :last-child{}

  匹配规则： 该父级下面的最后一个孩子

	//父级后加空格 再加：
    ul :last-child{
        background-color: #f00
    }
   
   /*精确写法*/
   ul li:last-child{
        background-color: #f00;
    }

(3)语法：父级 :nth-child(n /?n){}

  匹配规则：
  		1 父级 下面的任意一个孩子   第几个孩子用n 表示  n 从1开始
      	2 父级  下名的任意倍数孩子

	//父级后加空格 再加：
	//ul 的第4个孩子
   	ul :nth-child(4){
    	background-color: yellow;
   	} 
    /*精确写法*/
    //ul的第4个标签是li的孩子
    ul li:nth-child(4){
    background-color: yellow;
    }
	
	//ul 的偶数孩子
    ul :nth-child(2n) {
        background-color: yellow;
    }

(4)语法：:not（选择器1）{样式} 非

  匹配规则：除了选择器1 的其他选择器

//让 div,p,span下的字体颜色为红色
   	div,p,span{
        color: red;
   	}
//让 除了i，p标签下的字体颜色为黄色
    body :not(i,p){   
        color: yellow;
    }

//所以最终：div,span：黄色；p：红色 

(5)语法：:only-child{}

  匹配规则：唯一子元素

	//div下唯一的元素
    div :only-child{
        background-color: #f00;
    } 

    /*表示更加精确*/
    //div下唯一的div元素
    div div:only-child{
        background-color: #f00;
    }

(6)语法：:empty{}

  匹配规则：一个空元素 （有空格不算空元素）

    body :empty{
       background-color: #f00;
       width: 50%;
       height: 10px;
   }

(7)语法：:first-letter{}

  匹配规则：标签中的第一个文本，行内元素没有效果，针对块级（块 /行内块）标签

	span{
        display: inline;
    }
    span:first-letter{
        font-size: 50px;
        font-weight: bold;
        color: cyan;
    }

(8)语法：:fist-line{}

  匹配规则：第一行，不管是自动换行还是其他，只要换行则后面的内容就不匹配

	div:first-line{
        font-size: 30px;
        color: red;
    }