CSS之选择器

选择器是选取需设置样式的元素的模式，用来指定网页上我们想要样式化的HTML元素。

一、css基础选择器

1.1 行内选择器

行内选择器：直接在html标签里设置style样式

• 注意：建议少用行内选择器，原因是容易造成代码混乱，不利于后期修改维护

<p style="color:red" >趁着万家灯火时爬上那山坡，再唱起那首歌好吗</p>

1.2 id选择器

id选择器：给标签指定id，并对已指定id的标签设置样式。通过#号来定义

• 注意:不允许多个id选择器同名，id名唯一；

<style>
	#pName{
	color: #fd0000;
}
</style>
<p id="pName">趁着万家灯火时爬上那山坡，再唱起那首歌好吗</p>

1.3 类选择器

类选择器：对已指定class的选择器进行样式更改。

• 注意：
  • 一个标签可以同时设置多个class，用空格隔开即可。
  • 允许多个class名字相同；

<style>
	/*定义类选择器*/
	.oneclass{
	 width:800px;
	}
</style>
<h2 class="oneclass towclass">你好</h2>

1.4 标签（元素）选择器

标签选择器：又叫元素选择器，可以批量选择同名的标签进行样式更改。

• 注意：是选择所有同名的标签，而不是一个。

<style>
	span{
	  color: red;
	}
</style>
<p>学完了<span>前端</span>，继续学Java</p>

1.5 全局（通配符）选择器

全局选择器：又叫通配符选择器，可以与任何元素匹配，一般只做初始化用，影响范围最大所以优先级越低

 *{
      margin: 0;
      padding: 0;
  }

1.6 基础选择器之间的优先级

各选择器之间存在优先级关系，一般来说，标签的影响范围越大，优先级越低。

• 优先级：行内选择器>id选择器>类选择器>标签选择器>全局选择器

二、组合选择器

2.1 并集选择器

并集选择器：使用逗号，来选择需要设置相同样式的标签

<style>
  li,p,span,h5{  
  color: red;  
}
</style>
<ul>  
  <li>111</li>  
  <li>222</li>  
</ul>  
<p>相邻选择器</p>  
<h5>hello html</h5>  
<span>hello java</span>

2.2 交集选择器

不使用任何分隔符，选择同时满足多个条件的元素，只有同时匹配两个选择器的元素才会被选中。

• 只有同时具有"box"和"content"两个class的按钮元素才会被选中，并应用红色字体颜色。

<style>
  box.content{
  	color:red;
  }
}
</style>
<span class="box content">hello java</span>

2.3 后代选择器

后代选择器：使用空格，选择所有被父元素包含的后代元素。

<style>
    ul li{  
    color: red;  
}
</style>
<ul>  
    <li>111</li>  
    <li>222</li>  
    <div>        
	    <ol>            
		    <li>333</li>  
        </ol>    
    </div>
</ul>

2.4 子代选择器

子代选择器：使用 >，选择所有被父元素包含的直接子元素，更深一层的元素不起作用。

<style>
    ol>li{  
    color: blue;  
}
</style>o
<ul>  
    <li>111</li>  
    <li>222</li>  
    <div>        
	    <ol>            
		    <li>333</li>  
        </ol>    
    </div>
</ul>

2.5 兄弟选择器

兄弟选择器：使用 ~，在同一父元素下选择在指定元素之后的所有兄弟元素，

<style>
    p~p{
     color: blue;  
    }
</style>
<p>这是第一个段落</p>
<div>这是一个 div 元素</div>
<p>这是第二个段落</p>
<p>这是第三个段落</p>

2.6 相邻兄弟选择器

相邻兄弟选择器：使用 +，选择与父元素相邻的第一个兄弟元素。

<style>
    ul+p{  
    color: blue;  
}
</style>
<ul>  
    <li>111</li>  
    <li>222</li>  
</ul>
<p>相邻选择器</p>

2.6属性选择器

  <a href="#" target="_blank"></a>
  <a href="#" target="_self"></a>
  <img src="picture" title="flower">
  <img src="picture" title="summer flower">
  <p class="topcontent">Are you learning CSS?</p>
  <p class="top-text">Hello world!</p>
  <h1 class="top-header">Welcome</h1>
  <div class="my-test">The third div element.</div>
  <div class="mytest">This is some text in a paragraph.</div>

/* 选择所有带有 target 属性的 <a> 元素*/
a[target] {
  background-color: yellow;
}

/* 选取所有带有 target="_blank" 属性的 <a> 元素 */
a[target="_blank"] { 
  background-color: yellow;
}

/* 选取 title 属性包含 "flower" 单词的所有元素 */
[title~="flower"] {
  border: 5px solid yellow;
}

/* 选取 class 属性以 "top" 开头的所有元素（值必须是完整） */
[class|="top"] {
  background: yellow;
}

/* 选取 class 属性以 "top" 开头的所有元素（值不一定是完整） */
[class^="top"] {
  background: yellow;
}
/* 选取 class 属性以 "test" 结尾的所有元素（值不一定是完整）*/
[class$="test"] {
  background: yellow;
}
/* 选取 class 属性包含 "my" 的所有元素（值不一定是完整） */
[class*="my"] {
  background: yellow;
}

类型	举例
a[target]	选取所有带有指定属性的元素
a[target=“_blank”]	选取所有带有指定属性和值的元素
[title~=“flower”]	选取属性值包含指定词的元素
[class I=“top”]	选取指定属性以top开头的元素 （必须完整单词）
[class^=“top”]	选取指定属性以指定值开头的元素 （不一定完整单词）
[class$=“test”]	选取指定属性以指定值结尾的元素 （ 不一定完整单词）
[class*=“my”]	选取属性值包含指定词的元素（不一定完整单词）

三、伪类选择器

• 伪类选择器：用来选择处于特定状态或位置的元素的选择器。

3.1 hover 鼠标悬停状态

hover 鼠标悬停状态：选择鼠标悬停在元素上的状态

<style>  
    h1:hover{  
        color:red ;  
    }  
</style>
<h1>hello java</h1>

3.2 超链接状态

超链接伪类一共有四个状态，如果要同时设置这四个状态，一定要按顺序依次设置，否则不起作用。

 <style>
        a:link{
            color: red;
        }
        a:visited{
            color: aqua;
        }
        a:hover{
            color: saddlebrown;
        }
        a:active{
            color: cornflowerblue;
        }
    </style>
 <a href="#">boss直聘</a>

3.3 focus获取焦点

focus：选择当前获取焦点的元素

<style>
    input:focus{
    	background-color: skyblue;
    }
</style>
<input type="text">

3.3 结构伪类选择器 nth-child

结构伪类选择器：用于选择作为其父元素的第 n 个子元素的元素。

<style>
   li:nth-child(2){
       color: red;
   }
   div p:nth-child(2){
       color: blue;
   }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<div>
    <p>111</p>
    <p>222</p>
    <p>333</p>
</div>

运行截图

• nth-child(公式)：

li:nth-child(2n){  
  background-color: #3064bb;  
}  
li:nth-child(2n+1){  
  background-color: #fd0000;  
}  
li:nth-child(5n){  
  background-color: #2c5f44;  
}  
li:nth-child(n+4){  
  background-color: black;  
}

3.4 伪元素选择器 before&after

伪元素选择器：用于在元素内容的前面和后面插入生成的内容，不需要修改 HTML 结构，为元素添加自定义的样式和装饰效果。

• 注意：
  • 必须要有content属性，要来设置伪元素的内容。如果没有则引号留空即可；
  • 伪元素默认是行内显示模式；
  • 优先级和标签选择器相同。

::before： before选择器用于给选定的元素之前插入内容

::after： after选择器一般给选定的元素之后插入内容

<style>
    span::before{
    content: "before";
    color: red;
  }
    span::after{
    content: "after";
    color: red;
  }
</style>
<span>伪元素选择器</span>

运行截图

3.5 checked伪类选择器

用于选择在表单中已被勾选元素，注意只能用于表单元素，且仅用于那些可以被选中或取消选中的元素，如单选框和复选框。

<style>
    input[type="radio"]:checked{
       background-color: skyblue;
    }
    input[type="checkbox"]:checked{
       background-color: skyblue;
       font-size: 20px;
    }
</style>
<input type="radio" checked>男
<input type="checkbox" checked>同意
~~