03-复合选择器

复合选择器

004-5交集选择器

🎈由标签选择器和类选择器组成
	语法:
		标签名.类名{
			属性:值;
		}
	ex：
		/*选择p元素中带有class=“colorRed”的标签*/
        p.colorRed{
			color:red;
        }
🎈由标签选择器和id选择器组成
	语法：
        标签名#id名{
            属性:值;
        }
	ex:
		/*选择p元素中带有id=“colorRed”的标签*/
        p#colorRed{
			color:red;
        }

004-6群组选择器

✨选择器和选择器器之间用 “,” 隔开
语法：
	选择器1,选择器2{
		属性:值;
	}
ex:
	/*p标签和ul标签同时实现，margin:0;,padding:0;效果*/
    p,ul{
        margin:0;
        padding:0;		
    }

004-7后代选择器

✨选择器和选择器器之间用 空格 隔开
语法：
	选择器1 选择器2{
		属性:值;
	}
ex:
	/*div标签内的所有p标签*/
    div p{
		margin:0;
        color:red;
    }

004-8子集选择器

✨选择器和选择器器之间用 “ >” 隔开
语法：
	选择器1>选择器2{
		属性:值;
	}
ex:
	选择父元素是 div 标签 的所有  元素。
    div>p{
		margin:0;
        color:0
    }

004-9兄弟选择器

✨紧邻选择器 +
	语法：
		选择器1+选择器2{
			属性:值;
		}
	ex:
		/*选择div标签里，第一个 p 标签*/
        div+p{
            color:red;
        }
✨相邻选择器 ~
	语法：
		选择器1~选择器2{
			属性:值;
		}
	ex:
		/*选择div标签里，后边的每一个 p 标签*/
        div~p{
            color:red;
        }

004-10属性选择器

✨选择带有指定 属性 的所有元素
	语法:
		[属性]{
			属性:值;
		}
	ex：
		/*将所有 带title=“”  的标签改变字体为红色*/
		[title]{
			color:red;
		}
✨选择带有指定 属性和值 的所有元素
	语法：
        [属性=“值”]{
            属性:值;
        }
	ex：
		/*将所有 带 title=“niHao” 的元素字体改为红色*/
        [title="niHao"]{
            color:red;
        }

004-11伪类选择器

🎀伪造了一个类选择器，:伪类
语法：
	选择器:伪类{
		属性:值;
	}
✨鼠标滑过:hover
	/*鼠标滑过p标签时文字颜色改为 红色*/
    p:hover{
        color:red;
    }
✨访问前状态:link
	/*a标签未被访问前文字颜色改为 红色*/
    a:link{
        color:red;
    }
✨访问时状态:active
	/*a标签 点击时 文字颜色改为 绿色*/
    a:active{
        color:green;
    }
✨访问后:visited
	/*a标签 访问后 文字颜色改为 绿色*/
    a:visited{
        color:green;
    }
✨焦点状态:focus
	/*input框获取焦点时（点它时），取消外边框*/
    input:focus{
        outline:0
    }
✨禁用:disabled
	/*input框中带有 disabled 属性 的文字颜色改为 红色*/
    input:disabled{
		color:red;
    }
✨选中:checked
	/*input框中带有 checked 属性 的 颜色改为透明*/
	input:checked{
		opacity:0.3;
    }
✨否定	:not(n)
	/*p标签中除了 class =“p1” 的，其他所有标签均文字颜色改为红色*/
    p:not(.p1){
        color:red;
    }
✨根:root
	/*html中所有文字颜色为红色*/
    :root{
        color:red;	
    }
✨父元素中的第一个同种子元素:first-child
	/*在divl里只有p 时,选择第一个p元素*/
    div p:first-child{
		color:red;
    }
✨父元素中的第一个子元素:first-of-type
	/*div里 p元素的第一个*/
    div p:first-of-type{
        color:red;
    }
✨父元素中最后一个同种子元素:last-child
	/*在divl里只有p 时,选择最后一个p元素*/
    div p;last-child{
        color:red;
    }
✨父元素中最后一个子元素:last-of-type
	/*div里 p元素的最后一个*/
    div p:last-of-type{
        color:red;
    }
✨选择父元素中相同元素的任意个:nth-child()
	/*div 里的所有p元素*/
    div p:nth-child(n){
        color:red;
    }
	/*div 里的任选的一个p(数值)*/
    div p:nth-child(3){
        color:red;
    }
	/*div里的p 元素 没两行改变一行（改变的在下方）*/
    div p:nth-child(2n){
        color:red;
    }
	/*div里的p 元素 没两行改变一行（改变的在上方）*/
    div p:nth-child(2n+1){
        color:red;
    }
	/*div里奇数行的p 元素*/
    div p:nth-child(odd){
        color:red;
    }
	/*div里偶数行的p 元素*/
    div p:nth-child(even){
        color:red;
    }

004-12伪元素选择器

🎀伪装了一个元素，::伪元素
语法：
	选择器1::伪元素{
		属性:值;
	}
✨在……之前::before
	/*p标签之前添加 文字 你好*/
    p::before{
        content:"你好"
    }
✨在……之后::after
	/*p标签之后添加 文字 呀*/
    p::after{
        content:"呀"
    }
✨input中提示性文字::placeholder
	/*input中提示性文字改为红色*/
    input::placeholder{
        color:red;
    }
✨改变首字母::first-letter
	/*p标签里的第一个字母改为红色*/
    p::first-letter{
        color:red;
    }
✨改变第一行::first-line
	/*p标签里的第一h行文字改为红色*/
    p::first-line{
        color:red;
    }
✨改变鼠标选中状态::selection
	/*改变p 标签里文字本选中时为红色*/
    p::selection{
        color:red;
    }
✨改变列表前缀:marker
    li::{
		content:"";
    }
	如果需要改变的为其他标签，必须添加--display:list-item;