css选择器

css选择器

内容：

基础选择器

复合选择器

伪元素选择器

基础选择器

*通配符选择器

*{
				-border: 1px solid red;
}

[href]属性选择器

[href]{
				color: red;
			}

属性选择器

[href="#"]{
				color: green;
	}//查找带有#的样式

[href^="https"]{
				color: yellow;
			} //查找开头为https的样式  ^正则里面的

[href$=".cn"]{
				color: skyblue;
			} //查找尾部为.cn的样式  $正则里面的 代表查找尾部

[href*="qq"]{
				color: pink;
			} //查找所有属性里面包含qq的样式

[class~="aa"]{
				border: 1px solid red;
			} //查找class类里面所有包含aa的类的样式

[type="password"]{
				background-color: red;
			} //查找type属性里面值为password的样式

复合选择器

并集选择器

 并集选择器  用，分隔开
				a,li,ul,h2,h5{
					border:2px  solid #008000;
				} 

后代选择器

后代选择器  用空格来表示
			 ul li{
				color: red;
			} 

子元素选择器

子元素选择器，用>表示 
		 ul>li{
				border:  2px solid yellow;
			} 

相邻兄弟选择器

相邻兄弟选择器：匹配的是和第一个元素相邻的第二个元素 
			#aa+li{
				color: blue;
			}  //只能匹配#aa中的兄弟第一个li元素

普通兄弟选择器

5.普通兄弟选择器 
			 #aa~li{
				color: #FF1493;
			}   //匹配#aa下所有兄弟li元素

伪元素选择器

p::first-line{
				color: red;
			}  //选中P标签第一行元素

p::first-letter{
				color: blue;
			} //选择p标签第一个字

p::before{
				content: "你好";
			} //在P元素最前面添加文子为你好  content必须有

p::after{
				content: "我不好";
			} //在P元素最后面添加文子为我不好  

结构性伪类

    :root {
    border: 1px solid red;
    } //根元素选择器 不怎么使用

ul > li:first-child {
color: red;
} //选中子元素的第一个元素

ul > li:last-child {
color: red;
} //选中子元素的最后一个元素

ul > li:only-child {
color: red;
}
//选择只有一个子元素的那个子元素。

div > p:only-of-type {
color: red;
}
//选择只有一个指定类型的子元素的那个子元素

ul > li:nth-child(n) {
color: red;
}
//指定子元素的第n个元素

ul > li:nth-last-child(n) {
color: red;
} //指定子元素的倒数第n个元素

动态伪类选择器

• link

  a:link {
  color: red;
  } //表示鼠标未访问的链接
  

• visited

  a:visited {
  color: orange;
  }//表示已访问过的连接
  

• hover

  a:hover {
  color: blue;
  } //表示鼠标悬停在超链接上。
  

• active

  a:active {
  color: green;
  }
  //表示鼠标按下激活超链接时候
  

• focus

  input:focus {
  border: 1px solid red;
  }//表示获得焦点时