HTML5 03_选择器

一.选择器

1.基本选择器

1.1.标签选择器（元素选择器）

标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

h1{
 color: red; 
} 
p{
 color: green; 
}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式

1.2.id选择器

id选择器使用“#”进行标识，后面紧跟id名

<div id="name">张三</div>

#name{
 color:red; 
}

不可多用，不可复写，因为虽然不会报错，但会影响js节点操作

1.3.类选择器

类选择器使用“.”（英文点）进行标识，后面紧跟类名

<div class="nanme">李四</div>

.name{
 color:red; 
}

①类选择器最大的优势是可以为元素对象定义单独或相同的样式

②长名称或词组可以使用中横线来为选择器命名，如：text-color-red

③不要纯数字、中文等命名，尽量使用英文字母来表示。见名知意

1.4.通配符

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素

*{
 margin:0;
 padding:0; 
}

虽然可以清除浏览器默认样式，但会影响页面加载速度，造成页面缓存慢

1.5.!important

​​.p{
 color:#blue !important
}​​

优点:样式可以不用作为对比,直接作为最高级

缺点:一旦增加这条属性后期无法更改

1.6.基本选择器的优先级比较

通配符<标签选择器<class选择器（就近原则）<id选择器<行内样式<!important

2.伪类选择器

2.1.链接伪类选择器

链接伪类选择器主要针对a标签

a:link{
/*未访问的链接*/
} 
a:visited{
/*已访问的链接*/
} 
a:hover{
/*鼠标移动到链接上*/
} 
a:active{
/*选定的链接*/
}

①a:hover 必须在 a:link 和 a:visited 之后

②a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果

2.2.结构（位置）伪类选择器

<div>
 <p>伪结构选择器</p>
     <p>测试文字测试文字</p>
     <p>测试文字测试文字</p>
     <p>测试文字测试文字</p>
     <p>测试文字测试文字</p>
 </div> <table border="1px">
   <tr>
     <td>内容</td>
     <td>内容</td>
     <td>内容</td>
     <td>内容</td>
     <td>内容</td>
   </tr>
   <tr>
     <td>内容</td>
     <td>内容</td>
     <td>内容</td>
     <td>内容</td>
     <td>内容</td>
   </tr>
   <tr>
     <td>内容</td>
     <td>内容</td>
     <td>内容</td>
     <td>内容</td>
     <td>内容</td>
   </tr>
 </table><br>

p:first-child {
   color: red;
 /* 所选中的第一个孩子元素：先找位置再匹配元素 */ 
} 
p:last-child {
   color: black; 
} 
P:first-of-type {
   color: pink;
 /* 第一个位置的元素：先匹配元素再找位置*/ 
} 
td:nth-of-type(odd){
   color: red; 
} 
td:nth-of-type(even){
   color: blue; 
} 
b:only-of-type{
   color: skyblue; 
}

first-chil： 获取第一个子元素

last-child：获取最后一个子元素

nth-child(n)：选取某个元素的一个或者多个特定的子元素。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）

nth-last-child(n)：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）

first-of-type：选择特定元素的第一个子元素

last-of-type：选择特定元素的最后一个子元素

nth-of-type(n)：只计算父元素中指定的某种类型的子元素

nth-last-of-type(n)：只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取

2.3.特定状态选择器

2.3.1.only-child：匹配没有任何兄弟元素的元素

2.3.2.only-of-type：代表了任意一个元素，这个元素没有其他相同类型的兄弟元素

2.3.3.empty：现在的元素里面没有任何的内容或子节点

2.3.4.root：匹配文档的根节点

li:only-child {
 /*匹配父元素中只有一个子元素*/
 color: blue; 
} 
p:only-of-type {
 /*匹配父级中唯一的子元素，如整个文档只有一个p元素*/
 color: green; 
} 
div:empty { 
/*匹配没有内容和子节点的元素*/
 width: 100px;
 height: 50px;
 background-color: red; 
} 
:root {
 /*匹配文档的根元素*/
 background-color: blue; 
}

为了方便记忆，把CSS的结构伪类选择器归为四类：

①通用子元素（不同类型）过滤器：:nth-child(n)（顺序过滤）和 :nth-last-child(n)（逆序过滤）

②通用子类型元素（同一类型）过滤器：:nth-of-type(n)（顺序过滤）和 :nth-last-of-type(n)（逆序过滤）

③特定位置的子元素：:first-child, :last-child, :first-of-type, :last-of-type

④特定状态的元素：:root（根节点）、:only-child（独子元素）、:only-of-type（独子类型元素）、:empty（孤节点）

2.4.目标伪类选择器

:target选择器用于选取页面中的某个target元素，通常和锚点标签一起使用

<a href="./通用素材.html" id="sourcematerial">
       目标伪类 
</a>

#sourcematerial:target {
 color:red; 
}

2.5.伪元素选择器

p::first-letter {
 color: red;
 font-size: 50px; 
} 
p::first-line {
 color: green; 
} 
p::selection {
 color: blue; 
}

p::first-letter：块级文本的第一个单词或字

p::first-line：文本的第一行

p::selection：可改变选中文本的样式

3.复合选择器

3.1.交集选择器

<p class="red">段落1</p> 
<p id="pink">段落2</p>
<p class="red" id="pink">段落3</p>

p.red {
 color: red; 
} 
p#pink {
 color: pink; 
} 
.red#pink {
 color: blue; 
}

①选择器之间没有任何的连接符号

②选择器可以是class，也可以是id，还可以是标签，但标签要放在前面

3.2.并集选择器

<div>这是一个div</div> 
<p>段落</p> 
<h1>孙悟空</h1> 
<h1 class="pig">猪八戒</h1> 
<h2>沙悟净</h2> 
<h2 id="sanzang">唐三藏</h2>

div, p, .pig, #sanzang {
 color: red; 
}

3.3.兄弟选择器

div+p {
 color: red; 
} 
div~p {
 color: red; 
}

①‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的

②‘~’选择器则表示某元素后所有同级的指定元素，强调所有的

3.4.后代选择器

<div class="live"> 
 <p>植物</p> 
</div> 
<div id="animal">
 <p>猴子</p>
</div>

.live p{
 color:red; 
} 
#animal p{
 color:blue; 
}

3.5.子代选择器

<ul class="nav">
 <li>一级菜单
 <ul>
 <li>二级菜单</li>
 <li>二级菜单</li>
 <li>二级菜单</li>
 </ul>
 </li>
</ul>

.nav li {
 /*后代选择器*/
 color: blue; 
} 
.nav > li {
 /*子元素选择器*/
 color: red; 
}

3.6.属性选择器

表示选取标签带有某些特殊属性的选择器

<a href="#" title="flower">玫瑰</a>
<a href="#" title="flower">百合</a> 
<a href="#">月季</a> 
<a href="#">水仙</a>

a[title] {
 color: red; 
}/*表示存在title属性的a标签都使用该样式*/

选择器	含义
[attr]	存在attr属性即可
[attr=val]	属性值完全等于val
[attr*=val]	属性值里包含val字符并且在“任意”位置
[attr^=val]	属性值里包含val字符并且在“开始”位置
[attr$=val]	属性值里包含val字符并且在“结束”位置