基本选择器
标签选择器
该页面中所有该标签都会应用该样式,使用"标签名"作为选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: red; } /*标签选择器,该标签都会应用该css样式*/ </style> </head> <body> <h1> helloworld </h1> <h1> helloworld </h1> <h2 class="green"> helloworld </h2> </body> </html>
类选择器
该页面之中标签的class属性为css样式值都会应用该CSS样式,可以复用,一个标签想要使用多个样式,class属性可以使用多个class,用空格隔开.使用".class属性值"作为选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .green{ color: green; } /*类选择器,标签之中class属性为green的都hi应用该css样式,可以做到css样式复用*/ </style> </head> <body> <h1> helloworld </h1> <h1> helloworld </h1> <h2 class="green"> helloworld </h2> </body> </html>
id选择器
当标签的id属性为该值的时候会应用该样式,要注意id是全局唯一、不可重复的,所以不能实现复用,一般用于某个特定标签的样式修改.
使用"#id值"作为选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #aqua{ color: aqua; } /*id选择器,标签之中id属性为aqua的都会应用该样式,注意id属性是全局唯一的,所以该样式不能做到批量复用*/ </style> </head> <body> <h1> helloworld </h1> <h1 id="aqua"> helloworld </h1> <h2> helloworld </h2> </body> </html>
基本选择器注意:
/*要注意当一个标签应用了多个css样式,并且这几个css样式中有相同的属性,应用优先级为:id选择器>class选择器>标签选择器*/
层次选择器
后代选择器
后代选择器能够指定某一标签下的所有指定标签应用该样式,后代选择器使用空格分隔父标签和子标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!-- 后代选择器 (空格)--> 7 <!-- 子选择器 (>)--> 8 <!-- 相邻兄弟选择器 (+)--> 9 <!-- 通用兄弟选择器 (~)--> 10 11 <style> 12 body p{ 13 background: aqua; 14 } 15 /*这个是后代选择器,在body标签下的所有p标签都会应用该样式,使用空格分隔*/ 16 17 18 </style> 19 </head> 20 <body> 21 <h1>h1</h1> 22 <p>p0</p> 23 <p >p1</p> 24 <p >p2</p> 25 26 <ul > 27 <li> 28 <p>p3</p> 29 </li> 30 <li> 31 <p>p4</p> 32 </li> 33 </ul> 34 <p>p5</p> 35 <p>p6</p> 36 </body> 37 </html>
子选择器
只有处于父标签的第一级子标签才会应用该样式,使用右尖括号">"分隔父标签和子标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 后代选择器 (空格)--> <!-- 子选择器 (>)--> <!-- 相邻兄弟选择器 (+)--> <!-- 通用兄弟选择器 (~)--> <style> body>p{ background: aqua; } /*!*这个是子选择器,处于body标签下的第一级p标签都会应用该样式,使用左尖括号">"分隔*!*/ </style> </head> <body> <h1>h1</h1> <p>p0</p> <p >p1</p> <p >p2</p> <ul > <li> <p>p3</p> </li> <li> <p>p4</p> </li> </ul> <p>p5</p> <p>p6</p> </body> </html>
相邻兄弟选择器
只有指定的兄标签的下一个同级标签为弟标签的时候才会应用该样式,使用加号"+"分隔兄弟标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 后代选择器 (空格)--> <!-- 子选择器 (>)--> <!-- 相邻兄弟选择器 (+)--> <!-- 通用兄弟选择器 (~)--> <style> #active+p{ background: aqua; } /*!*这个是相邻兄弟选择器,只有id为active的标签的下一个同级为p标签才会应用该样式,*/ /*注意id为active的本标签是不会应用该样式的,而是兄弟标签会应用该样式,用加号"+"分隔*!*/ </style> </head> <body> <h1 id="active">h1</h1> <p>p0</p> <p >p1</p> <p >p2</p> <ul > <li> <p>p3</p> </li> <li> <p>p4</p> </li> </ul> <p>p5</p> <p>p6</p> </body> </html>
通用兄弟选择器
指定兄标签向下所有的同级标签为弟标签的时候应用该样式,使用波浪号"~"分隔兄弟标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 后代选择器 (空格)--> <!-- 子选择器 (>)--> <!-- 相邻兄弟选择器 (+)--> <!-- 通用兄弟选择器 (~)--> <style> #active~p{ background: aqua; } /*!*这是通用兄弟选择器,id为active的标签向下的所有同级p标签都会应用该样式 使用波浪号"~"分隔*!*/ </style> </head> <body> <h1 id="active">h1</h1> <p>p0</p> <p >p1</p> <p >p2</p> <ul > <li> <p>p3</p> </li> <li> <p>p4</p> </li> </ul> <p>p5</p> <p>p6</p> </body> </html>
结构伪类选择器
使用冒号":"分隔标签与指定规则
first-child
指定父标签的第一个子标签为指定子标签应用该样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li:first-child{
background: red;
}
/*处于ul标签下的第一个子标签为li标签的时候就应用该样式*/
p a:first-child{
background:red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p1</p>
<p>p1</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p>
<h4>helloworld</h4>
<a>helloWorld</a>
</p>
</body>
</html>
last-child
指定父标签的最后一个子标签为指定子标签应用该样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul li:last-child{ background: aqua; } /*ul标签下的最后一个子标签为li就使li应用该样式*/ </style> </head> <body> <p>p1</p> <p>p1</p> <p>p1</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> <p> <h4>helloworld</h4> <a>helloWorld</a> </p> </body> </html>
nth-child(位置)
指定标签的父标签的指定位置子标签会应用该样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:nth-child(1){ background: antiquewhite; } /*每个p标签的父标签的第一个子标签应用该样式*/ </style> </head> <body> <p>p1</p> <p>p1</p> <p>p1</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> <p> <h4>helloworld</h4> <a>helloWorld</a> </p> </body> </html>
nth-of-type(位置)
其父标签的指定位置的指定子标签应用该样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:nth-of-type(2){ background: blue; } </style> </head> <body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> <h4>helloworld</h4> <a>helloWorld</a> </body> </html>
hover
当鼠标停在该指定标签上的时候应用该样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:hover{ background: black; } </style> </head> <body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> <h4>helloworld</h4> <a>helloWorld</a> </body> </html>
属性选择器(重要)
属性选择器可以根据标签的任意属性的取值来选择应用该css样式的标签(并且可以使用正则表达式匹配)
属性名,属性名=正则,当只取属性名会匹配拥有这个属性的标签,而取属性名=正则的时候会匹配属性取值符合正则的标签.
= 绝对等于
*= 包含
^= 开头
$=结尾
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 a{ 8 display:block; 9 height:50px; 10 width:50px; 11 border-radius: 10px; 12 background: aquamarine; 13 text-align: center; 14 text-decoration: none; 15 margin-right:5px; 16 } 17 a[id]{ 18 background: aqua; 19 20 } 21 /*选择了a标签下所有存在id属性的标签*/ 22 a[class="links"]{ 23 background: blue; 24 } 25 /*选择a标签下class属性值绝对等于links的*/ 26 a[class*="styles"]{ 27 background: red; 28 } 29 /*选择a标签下class属性值包括styles的*/ 30 31 a[class^="styles"]{ 32 background: blanchedalmond; 33 } 34 /*选择a标签下class属性值以styles开头的*/ 35 a[href$="edu"]{ 36 background: blueviolet; 37 } 38 /*选择a标签中href属性结尾为edu的*/ 39 </style> 40 </head> 41 <body> 42 <a href="11111" id="a1" >11111</a> 43 <a href="22222" id="a2" >22222</a> 44 <a href="22222.com" >33333</a> 45 <a href="22222.com" class="links">33333</a> 46 <a href="22222.com" class="links styles">33333</a> 47 <a href="22222.com" class="links styles">33333</a> 48 <a href="22222.com" class="links titles">33333</a> 49 <a href="22222.com" class="links styles">33333</a> 50 <a href="22222.edu" class="styles links">33333</a> 51 </body> 52 </html>