CSS Core & CSS hack & CSS优化

web前端2021–小白进阶之路CSS3(2)

CSS Core

复杂选择器

• 兄弟选择器

(1)相邻兄弟选择器

选择器1+选择器2{
   }

要求匹配选择器2紧挨着选择器1，修改选择器2的样式

(2)通用兄弟选择器

选择器1~选择器2{
   }

获取某个选择器后面，满足所有条件的兄弟元素
**使用场合：**所有元素中，第一个元素被筛选掉，其余元素都保留

• 属性选择器

[attr]{
   }						//匹配页面中，具有attr属性的元素
elem[attr]{
   }					//匹配页面中，具有attr属性的elem元素
[attr=value]{
   } 					//匹配页面中，具有attr属性并且属性值为value的元素
elem[attr=value]{
   }				//匹配页面中，具有attr属性并且属性值为value的elem元素
[attr1][attr2]...{
   }				//匹配页面中，同时具有attr1和attr2...的元素
elem[attr1][attr2]...{
   }			//同时具有attr1和attr2...的elem元素
elem[attr1=value1][attr2]...{
   }	//......自己悟吧！！！！！	

用自定义属性为dom服务：

使用属性选择器进行模糊查询：

[attr^=value]{
   }		//匹配attr的值，以value开头的元素
[attr$=value]{
   }		//匹配attr的值，以value结尾的元素
[attr*=value]{
   }		//匹配attr的值，含有value的元素
[attr~=value]{
   }		//匹配attr的值，含有value这个单独单词的元素

• 伪类选择器

:link  :visited  :hover  :active  :focus

(1)目标伪类
匹配要激活的锚点，要应用的样式
es6规定，伪类选择器要使用::开头 但是es6之前就定义好的伪类，还是用:

:target{
   }

(2)结构伪类
通过结构关系来，匹配元素

first-child{
   }		两个条件，找p元素的父级元素的第一个子元素
last-child{
   }		找到当前元素的父级元素的最后一个子元素
nth-child(n){
   }		找到其父级元素的第n个儿子，n从1开始	

(3)否定伪类

:not(selector){
   }		符合条件的元素都不匹配

(4)空元素

:empty{
   }			匹配内部没有内容的元素

(5)独生子女

:only