首页 > 代码库 > CSS3常用选择器(一)

CSS3常用选择器(一)

  在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。比如最常用到的#id,.class,标签选择器。

  随着CSS3到来,增加了很多新型选择器,这里就常用的做一个总结。

  1.属性选择器。

  在css3中,追加了三个属性选择器,分别为[attribute*=value],[attribute^=value],[attribute$=value],使选择器有了通配符的概念。这三个选择器分别是包含,首字符,结束字符。

举个栗子:

a[src*="abc"]表示选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。

a[src^="https"]表示选择其 src 属性值以 "https" 开头的每个 <a> 元素。

a[src$=".pdf"]表示选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。

 

  2.结构性伪类选择器

  CSS3 结构性伪类选择器,包含伪类选择器和伪元素选择器。伪类选择器在css中就存在,不再赘述。在伪元素选择器中包含 first-line、first-letter、before、after。

first-line顾名思义,应该是对某个元素中的第一行使用样式。

first-letter是对某个元素的首字母使用样式。

before用于在某个元素之前插入内容。

after用于在某个元素之后插入内容。

 

p:first-line{
      color:red;  /*将p元素第一行内容变为红色*/
}
p:first-letter{
      color:blue;  /*将p元素首个文字变为蓝色*/
}

li:before{
  content:"--";  /*给每一个li元素内容前面加上"--"*/
}

li:after{
  content:"这是对列表的解释";  /*给每一个li元素内容后面加上一段文字*/
  font-size:18px;
  color:green;  /*可以加上一些样式以区分*/
}

 

<p>第一行<br/>第二行</p>
<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
  <li>列表4</li>
</ul>

 

3.CSS3 选择器 root、not、empty 和 target

  CSS3 选择器 root、not、empty 和 target, root 选择器是绑定到页面的根元素中,如果想对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,可以使用 not,使用 empty 选择器来指定当元素中内容为空白时使用的样式。

  root 选择器是绑定到页面的根元素中,根元素是指位于文档中最顶层的元素,在页面中就是指html的部分。如果此时还有body也设置了样式,那么body只在内容部份生效。

:root{
      background-color:grey;/*页面背景变成灰色*/  
}
  

  

not用于排除:

div *not(h1){
/*div中除h1以外都生效*/
}

 

:empty{}用于当元素内容为空时的样式,比如用在表格中,设置空表格的样式。

:target{}用于突出显示活动的 HTML 锚。

用法一:

p:target
{ 
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}

用法二:

:target{
    background-color:pink;/*被选中的区域背景变为粉色*/
}

<a href="http://www.mamicode.com/#a1">菜单一</a>
<a href="http://www.mamicode.com/#a2">菜单二</a>
<div id="a1">
    <h1>标题</h1>
    <p>内容</p>   
</div>
<div id="a2">
    <h1>标题</h1>
    <p>内容</p>   
</div>

URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。

:target 选择器可用于选取当前活动的目标元素。

CSS3常用选择器(一)