CSS选择器

三大基础选择器

• id选择器：#

  • #box {
    	color:red;
    }
    

• class选择器=类选择器

  • .box {
    	color:red;
    }
    

• 标签选择器：标签名

  • div {
    	color:red;
    }
    

常用选择器

• 交集选择器 .

  • 前面必须是标签，后面是类选择器

  • 缺点：权重小的，会被覆盖样式

  • p.container {
    	color:red;
    }
    

• 并集选择器 ，

  • 可以添加多个标签，同时实现样式效果

  • 缺点，多个标签会产生标签空格

  • .container,
    div{
    	border:10px solid #ccc
    }
    或者
    p.container,（一个整体）
    div{
    	border:10px solid #ccc
    }
    

• 后代选择器 空格隔开

  • 符合标签的，全部会改变样式

  • 可以解析空格

  • .gran p {
    	color:red;
    }
    

• 子代选择器 >

  • 精准改变子代样式

  • 可以解析空格

  • .gram>p{
    	color:red;
    }
    

• 相邻元素选择器 +

  • 以自己是参照物，找邻居，往下找一位来改变样式

•  li+li{
   	color=”red“
   }
  

• 兄弟选择器 ~

  • 兄前面标签不变，弟弟后面标签全部改变样式

  • .lis~li{
    	color：red；
    }
    

:nth-child（规律选择器）

注意

当同级标签都会生效，但是另外一个结构也会从头开始计算，不会连续计算。但是同级其他标签也会计算数

子代不会生效，会继承个别样式属性

：nth-last-child（5） 这是倒序，对比nth-child（5）

• 某项选中 n

• 双数选中 2n/even

• 单数选中 2n+1/odd 2n必须在前面

li：nth-child（5） {
	修改样式
}	

:nth-of-type（规律选择加强版）

只会计算选中的标签，计算数，结构别的标签不计算在内

无视其他结构标签

：nth-last-of-type（） 这是倒序，对比：nth-of-type（）

ul：nth-of-type {
	修改样式
}

:first-child（头尾选择器）

选择在父元素中第一个子代

ul:first-child

选择父元素中最后一个子代

ul:last-child

:first-of-child(继承头尾选择器)

等同于先是子代选择器选择了第一个生效，然后是后代选择器。第一个子代 后代全部生效

ul:first-of-child 

​

等同于先是子代选择器选择了最后一个生效，然后是后代选择器。最后一个的子代 后代全部生效

ul:last-of-child 	

:empty 选择空的

ul:empty    标签没有内容的会被选中

:not() 取反

li:not(.one)  取反，除了这个one，其他的都选择

伪类选择器~属性类

ul[class]（类名筛选）

两次筛选，第一次是标签，第二次是类名

用的是方括号[]

ul[class]{		
	color：red
}

attr=val（准确属性值筛选）

1.筛选所有标签（ul） 2. 筛选所有属性=属性值

input[name=“text”] {
	backround：lightblue；
}

attr~=val（包含属性值筛选）

val=当前属性值中，标签中只要有，就会选择。（包含等于很多，不精准）

class 名字可以写很多个 class=“gegg texet rex”

ui[class~=“ufjg”] {
		font-size：30px；
}

attr^=val（属性值开头筛选）

属性值开头筛选

input[name^="t"]  {
		样式修改
}

name$=“t”（属性值结尾筛选）

input[name$="t"]  {
		样式修改
}

name=“t”（属性值包含筛选）

属性 中间的字符选几个字符也行，范围广，包含就行

input[name="t"] {
		样式修改
}