你的位置:首页 > 网页设计

[网页设计]神奇的CSS3选择器

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

 Css3选择器

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

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

    属性选择器

  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.

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

  1. 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><body><input type="text" name="name"></body></html>

  E:enabled,E:disabled,E:read-only,E:read-write选择器

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">    input[type="text"]:disabled    {      background-color: green;    }    input[type="text"]:read-only    {      background-color:darkgrey;    }  </style></head><body><input type="text" disabled><br><input type="text" ><br><br><input type="text" readonly="readonly" ></body></html>

  E:checked、E:default选择器

  E:checked指定复选框选取时的样式

  E:default 指定默认选取框的样式

  

    E::selection选择器

  指定元素处于选中状态时的样式

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">    p::selection    {      background-color: goldenrod;    }  </style></head><body> <p>测试测试</p></body></html>