CSS选择器

时间 2019-11-08

标签 css 选择器栏目 CSS 繁體版

原文原文链接

1、css的基本语法css

　　css选择器{html

　　　　　　css属性：值;app

　　　　　　 css属性：值;　ui

　　}　spa

1 body{ 2  background: red; 3  color:white; 4  }

2、基本的css选择器3d

一、通用选择器code

　　该选择器会匹配文档中的全部元素，包括html和body元素。htm

1 *{ 2  margin: 0px; 3  padding: 0px; 4 }

　　上面的css样式用来取消文档中全部元素的内边距和外边距。blog

二、元素选择器rem

　　用来选择文档中该元素的全部实例。　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 p{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p> I  love  China!</p> 14 <p> I  love  China!</p> 15 </body> 16 </html>

　　显示效果：

三、类选择器

　　类选择采用全局属性class匹配指定类的元素。　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 .p1{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p class="p1"> I  love  China!</p> 14 <p> I  love  China!</p> 15 <span class="p1">I  love  China!</span> 16 </body> 17 </html>

　　显示效果：　

　　一、*.class2和.class2是同样，咱们能够将前面的通用选择器换成其余元素选择器，来缩小选择范围。当class属性有多个值时，用空格隔开。

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 p.p1{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p class="p1"> I  love  China!</p> 14 <p> I  love  China!</p> 15 <span class="p1">I  love  China!</span> 16 </body> 17 </html>

　　二、一个元素用于多个类选择器，同一css属性的优先级取决于样式表中的前后顺序，与类列表的前后顺序无关。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <style> 8 .red{ 9 color:red; 10 } 11 .green{ 12 color: green; 13 } 14 </style> 15 <body> 16 <h1 class="red green">多个类选择器</h1> 17 </body> 18 </html>

　　交换style标签中两个类选择器的顺序。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <style> 8 .green{ 9 color: green; 10 } 11 .red{ 12 color:red; 13 } 14 </style> 15 <body> 16 <h1 class="red green">多个类选择器</h1> 17 </body> 18 </html>

四、id选择器

　　使用全局属性id的值选择元素。　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 #p1{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p id="p1"> I  love  China!</p> 14 <p> I  love  China!</p> 15 <span>I  love  China!</span> 16 </body> 17 </html>

　　显示效果：

五、属性选择器

　　根据元素的属性来进行选择。

　　a、[attribute]　　 选择器用于选取带有指定属性的元素，忽略属性值　

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4       <meta charset="UTF-8">
 5       <title>document</title>
 6       <style type="text/css">
 7  [id]{
 8  color: red;
 9 }
10  </style>
11  </head>
12  <body>
13      <p> I  love  China!</p>
14      <p id="p1"> I  love  China!</p>
15      <span>I  love  China!</span>
16  </body>
17  </html>

　　b、[attribute="value"] 选择器用于选取带有指定属性和值的元素　　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 [title="abc"]{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p title="abc"> I  love  China!</p> 14 <p> I  love  China!</p> 15 <span >I  love  China!</span> 16 </body> 17 </html>

　　c、[attribute^="value"] 选择器用于选取带有指定属性且属性值以value字符开头的元素　　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 [title^="a"]{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p title="abc"> I  love  China!</p> 14 <p> I  love  China!</p> 15 <span title="a1">I  love  China!</span> 16 </body> 17 </html>

　　d、[attribute*="value"] 选择器用于选取带有指定属性和属性值包含value字符的元素　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 [title*="a"]{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p> I  love  China!</p> 14 <p title="bac"> I  love  China!</p> 15 <span title="a1">I  love  China!</span> 16 </body> 17 </html>

　　e、[attribute~=value] 选择器用于选取带有指定属性、属性值具备多个值且其中一个值是value的元素　　　　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 [class~="class1"]{ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p> I  love  China!</p> 14 <p class="class1 class2"> I  love  China!</p> 15 <span title="a1">I  love  China!</span> 16 </body> 17 </html>

　 d、 [attribute|="value"] 选择器用于选取带有指定属性、属性值为（能够是0个）连字符分割多个值且其中第一个值是value的元素　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>document</title> 6 <style type="text/css"> 7 [id|="a1"]{ 8 border:2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p> I  love  China!</p> 14 <p id="a1"> I  love  China!</p> 15 <span id="a1-2">I  love  China!</span> 16 </body> 17 </html>

3、复合选择器

一、并集选择器

　　用于单个选择器匹配到的全部元素的并集。语法：选择器1，选择器2{ }　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p,a{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I  love China!</p> 14 <a href="http://www.baidu.com">百度</a> 15 </body> 16 </html>

二、后代选择器

　　后代选择器用于匹配第一个元素的后代，且匹配第二个元素。匹配第一个元素中的元素，而不单单是直接元素。语法：选择器1 选择器2{ }　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p span{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I  <span>love</span> China!</p> 14 <a href="http://www.baidu.com">百度</a> 15 </body> 16 </html>

三、选择子元素

　　用于匹配第一个选择器的元素的直接后代，且匹配第二个元素。语法：选择器1 > 选择器2{ }　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p>span{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I  <span>love</span> China!</p> 14 <a href="http://www.baidu.com">百度</a> 15 </body> 16 </html>

四、选择兄弟元素

　　a、相邻兄弟选择器

　　　　目标元素紧跟第一个选择器匹配的元素且匹配第二个元素。语法：选择器1 + 选择器2{ }　　　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p + a{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <p>I  <span>love</span> China!</p> 15 <a href="http://www.baidu.com">百度</a> 16 <a href="http://www.sina.com">新浪</a> 17 </body> 18 </html>

　　b、普通兄弟选择器

　　　　目标元素位于匹配第一个选择器的元素以后，且匹配第二个选择器。语法：选择器1 ~ 选择器2{ }　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p ~ a{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <p>I  <span>love</span> China!</p> 15 <a href="http://www.baidu.com">百度</a> 16 <a href="http://www.sina.com">新浪</a> 17 </body> 18 </html>

3、伪元素选择器

　　前面的元素选择器经过选择元素来操做文档内容。伪元素实际上并不存在，为了便于你选中文档的内容。　

　　一、:firtst-line用来匹配文本块的首行。　　　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 ::first-line{ 8 background: yellow; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <p>I  <span>love</span> China!<br>I like apple!</p> 15 <p>aaaaaa</p> 16 </body> 17 </html>

　 ::first-line和:first-line是同样。该选择器还能够和其余选择器结合使用，如p:first-line;用来选择p元素的首行。

　 二、:first-letter（::first-letter）选择文本块的首字母。　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 ::first-letter{ 8 background: yellow; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <p>I  <span>love</span> China!<br>I like apple!</p> 15 <p>aaaaaa</p> 16 </body> 17 </html>

　　三、::before和::after选择器在元素的前面、后面插出内容　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a::before{ 8 content:"click here:"; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 </body> 15 </html>

　　四、CSS计数器

　　a.建立计数器

　　body{

　　　　counter-reset:paracount;

　　}

　　这行代码会初始化一个计数器paracount，初始值为0.

　　指定初始值：　　counter-reset:paracount 10;

　　建立多个计数器：　　counter-reset:paracount 10 othercount; 　　　　counter-reset:paracount 10 othercount 2;

　　使用方法：　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body{ 8 counter-reset: paracount 0; 9 } 10 p::before{ 11 content: counter(paracount) "."; 12 counter-increment: paracount 1; 13 } 14 </style> 15 </head> 16 <body> 17 <p>I love China!</p> 18 <p>I love apple!</p> 19 </body> 20 </html>

　　counter(计数器，数值格式)；用来讲明使用哪一个计数器和数值的格式。数值格式能够是list-style-type中的值。例如counter(paracount,lower-alpha).

" ."是数值和内容之间的分割符，也能够是其余的字符。经常使用的是句号和空格。

　　counter-increment属性用来设置计数器的增量。默认是1.

4、伪类选择器

　　伪类元素选择器不是直接针对文档元素的，而是为你基于某些特征选择元素提供方便的。

　　一、结构伪类选择器

　　结构伪类是根据元素在文档中的位置选择元素的。

　　a、根元素选择器

　　：root选择文档的根元素。总数返回html元素。　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :root{ 8 border:thin black solid; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I love China!</p> 14 <p>I love apple!</p> 15 </body> 16 </html>

　　边框会包裹着整个文档。

　　b、使用子元素选择器(能够和其余选择器结合使用)

　　:first-child 选择元素的第一个子元素。　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p>span:first-child{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p><span>I</span> <span>love</span> <span>China!</span></p> 14 <p>I love apple!</p> 15 </body> 16 </html>

　　:last-child 选择元素的最后一个子元素。　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body>p:last-child{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I love apple!</p> 14 <p>I love apple!</p> 15 </body> 16 </html>

　　:only-child 选择元素中惟一一个子元素。 　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 p>span:only-child{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I <span>love</span> apple!</p> 14 <p>I <span>love</span> <span>apple!</span></p> 15 </body> 16 </html>

　　：only-of-type 选择元素指定类型的惟一子元素。　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 span:only-of-type{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I <span>love</span> apple!</p> 14 <p>I <span>love</span> <span>apple!</span></p> 15 </body> 16 </html>

　　:nth-child选择器

　　:nth-child(n) 选择父元素的第n个子元素。

　　:nth-last-child(n) 选择父元素的倒数第n个子元素

　　:nth-of-type(n) 选择父元素定义类型的第n个子元素

　　:nth-last-of-type(n) 选择父元素定义类型的倒数第n个子元素　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 body> p:nth-of-type(2){ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>I <span>love</span> apple!</p> 14 <a href="www.baidu.com">百度</a> 15 <p>I <span>love</span> <span>apple!</span></p> 16 </body> 17 </html>

二、UI伪类选择器

　　UI伪类选择器是根据元素的状态匹配元素。

　　a、:enabled和:disabled　选择启用和禁用的元素　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :enabled{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="text" disabled value="yiluhuakai"> 14 <br><br> 15 <input type="text"> 16 </body> 17 </html>

　　b、选择已经勾选的元素（只用于单选框和复选框）　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 :checked +span{ 8 background: red; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="checkbox" name="likes"><span>likes</span> 14 <input type="checkbox" name="likes"><span>likes2</span> 15 </body> 16 </html>

　　没选中：

　　选中后：

　　c、选择有效和无效的input元素

　　:invalid和:valid选择器用来匹配不符合和符合输入验证要求的input元素。

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :valid{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <input type="text" required="" value="yiluhuakai"> 14 <br><br> 15 <input type="text" required=""> 16 <button type="submit">提交</button> 17 </body> 18 </html>

　　d.选择限定范围的input元素

　　:in-range和:out-of-range　　

 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :in-range{ 8 border: 2px solid red; 9 } 10 :out-of-range{ 11 border: 2px solid yellow; 12 }; 13 </style> 14 </head> 15 <body> 16 <input type="number" min="0" max="5"> 17 </body> 18 </html>

　　输入0：

　 输入10

　　e、选择必需的可选的input元素

　　:required匹配具备required属性的元素。:optional匹配没有required属性的元素。　

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :required{ 8 border: 2px solid yellow; 9 } 10 :optional{ 11 border: 2px solid red; 12 } 13 </style> 14 </head> 15 <body> 16 name: <input type="text" required=""> 17 <br>    <br> 18 password: <input type="text"> 19 </body> 20 </html>

三、动态伪类选择器

　　动态伪类选择器能够根据条件改变匹配元素。

　　a.:link和:visited选择器

　　:link 选择连接元素

　　:visited 选择用户已经访问的连接；　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :link{ 8 background:red; 9 } 10 :visited{ 11 background:green; 12 } 13 </style> 14 </head> 15 <body> 16 <a href="http://www.baidu.com">百度</a> 17 <a href="http://www.sina.com">新浪</a> 18 </body> 19 </html>

　　连接没有访问的时候背景颜色是红的，访问后背景颜色是绿色。

　　b、:hover选择器 :hover选择器匹配用户鼠标悬停在其上的任意元素。　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a:hover{ 8 background: red; 9 }; 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <a href="http://www.sina.com">新浪</a> 15 </body> 16 </html>

　　c.:active选择器匹配用户激活的元素。

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a:active{ 8 background: green; 9 }; 10 </style> 11 </head> 12 <body> 13 <a href="http://www.baidu.com">百度</a> 14 <a href="http://www.sina.com">新浪</a> 15 </body> 16 </html>

　　d、使用：focus选择器用于匹配当前得到焦点的元素。　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 input:focus{ 8 border: 2px solid red; 9 }; 10 </style> 11 </head> 12 <body> 13 <input type="text" autofocus=""> 14 </body> 15 </html>

四、其余选择器

　　a、否认选择器:not(选择器) 对任意选择器取反　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 a:not([href*="baidu"]){ 8 color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="www.baidu.com">百度</a> 14 <a href="www.sina.com">新浪</a> 15 </body> 16 </html>

　　b、:empty选择器用于匹配没有定义任何子元素的元素。匹配的元素没有任何内容。　　

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :empty{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <p></p> 14 <a href="www.baidu.com">百度</a> 15 <a href="www.sina.com">新浪</a> 16 </body> 17 </html>

　　c、:lang选择器匹配基于lang全局属性的元素。　　

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :lang(en){ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 14 <a href="www.baidu.com" lang="en">百度</a> 15 <a href="www.sina.com" lang="en-us">新浪</a> 16 </body> 17 </html>

　　d、使用:target选择器匹配URL片断标识符指向的元素。请求expample.html#mytaget页面会导航到该页面指定id的元素上。　

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 :target{ 8 border: 2px solid red; 9 } 10 </style> 11 </head> 12 <body> 13 <a href="www.baidu.com" id="baidu">百度</a> 14 <a href="www.sina.com" id="xinlang">新浪</a> 15 </body> 16 </html>