神奇的CSS3选择器

2024-04-27 14:25:16

字体：大中小

来源：转载

供稿：网友

神奇的CSS3选择器

话说园子里也混迹多年了，但是基本没写过blog，写点基础的，那就从css3选择器开始吧。

　Css3选择器

先说下，为什么提倡使用选择器。

使用选择器可以将样式与元素直接绑定起来，在样式表中什么样式与什么元素匹配一目了然，修改起来也很方便。
减少样式表的代码量。

属性选择器

　　1.[att*=val]属性选择器

　　意义：表示元素用att表示的属性的属性值包含用val表示的字符，则该元素使用这个样式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        [id*=demo]        {            width: 100px;            height: 100px;            background-color: #000099;        }    </style></head><body><div id="demo"></div></body></html>

　　2.[att^=val]属性选择器

　　意义：表示元素用att表示的属性的属性值以val表示的字符串开头，则该元素使用这个样式。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        [id^=demo]        {            width: 100px;            height: 100px;            background-color: #000099;            margin: 10px;        }    </style></head><body><div id="demo"></div><div id="demo1"></div></body></html>

　　3.[att$=val]属性选择器

　　意义：表示元素用att表示的属性的属性值以val表示的字符串结尾，则该元素使用这个样式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        [id$=o]        {            width: 100px;            height: 100px;            background-color: #000099;            margin: 10px;        }    </style></head><body><div id="demo"></div><div id="demooo"></div></body></html>

　　结构性伪类选择器

　　伪类选择器是指已经定义好的选择器，不能随便起名。

　　例如：a:link,a:visited,a:hover,a:active.

　　伪元素选择器是指已经定义好的为元素使用的选择器。

first-line伪元素选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       p:first-line       {           color: red;       }    </style></head><body>  <p>      hello world      <br/>      你好  </p></body></html>

2.first-letter 伪元素选择器

 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       p:first-letter       {           color: red;       }    </style></head><body>  <p>      hello world  </p>  <p> 你好</p></body></html>

befor伪元素选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:before       {           content: '*';       }    </style></head><body>   <ul>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>   </ul></body></html>

after伪元素选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:after       {           content: '*';       }    </style></head><body>   <ul>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>       <li>demo1</li>   </ul></body></html>

　　root选择器

　　root选择器将样式绑定到页面的根元素。在使用：root与body元素的背景时，根据不同的条件，显示效果不同

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       :root       {           background-color: #003300;       }        body        {            background-color: yellow;        }    </style></head><body><p>你好</p></body></html>

　　not 选择器

　　排除结构元素下面子结构元素，使他不使用该元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        body *:not(h1)        {            background-color: yellow;        }    </style></head><body><h1>大家好</h1><p>你好</p></body></html>

　　empty选择器

　　当元素内容为空时使用的样式。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        td:empty        {            background-color: yellow;        }    </style></head><body><table border="1">    <tr>        <td width="100px">1</td>        <td width="100px">2</td>        <td width="100px"></td>    </tr></table></body></html>

　　target选择器

　　使用target选择器给页面中的target元素使用样式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        :target        {            background-color:yellow;        }    </style></head><body><table border="1">   <a href="#text3">示例1</a>    <div id="text1">        <h1>你好</h1>        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>    </div>    <div id="text2">        <h1>你好</h1>        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>    </div>    <div id="text3">        <h1>你好</h1>        <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>    </div></table></body></html>

　　first-child、last-child选择器

　　指定第一个子元素和最后一个子元素的样式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:first-child       {           background-color: yellow;       }        li:last-child        {            background-color: #009999;        }    </style></head><body><table border="1">   <ul>       <li>1</li>       <li>2</li>       <li>3</li>       <li>1</li>   </ul></table></body></html>

　　nth-child、nth-last-child选择器

　　针对父元素中某个指定序号的子元素来指定样式。

　　也可以使用Nth-child(even)对偶数子元素指定样式，Nth-child(odd)对奇数元素指定样式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">       li:nth-child(2)       {           background-color: yellow;       }        li:nth-last-child(2)        {            background-color: #009999;        }    </style></head><body><table border="1">   <ul>       <li>1</li>       <li>2</li>       <li>3</li>       <li>1</li>   </ul></table></body></html>

　　nth-of-type nth-last-of-type选择器

　　这两个选择器是为了弥补nth-child、nth-last-child选择器的缺陷，这两个选择器只针对同类元素指定样式。

　　UI元素状态选择器

　　E:horver,E:active,E:focus选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        input[type="text"]:hover        {            background-color: yellow;        }        input[type="text"]:focus        {            background-color: green;        }        input[type="text"]:active        {            background-color: red;        }    </style></head><b

上一篇：为什么设置的vertical-align垂直居中不起作用

下一篇：iPhone 6/plus iOS Safari fieldset border 边框消失