在 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="#a1">菜单一</a>
<a href="#a2">菜单二</a>
<div id="a1">
<h1>标题</h1>
<p>内容</p>
</div>
<div id="a2">
<h1>标题</h1>
<p>内容</p>
</div>

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

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

CSS3常用选择器(一)的更多相关文章

  1. CSS3常用选择器(三)

    在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...

  2. CSS3常用选择器

    一.基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father > Children)兼容性:IE8+.FireFox.Chrome.S ...

  3. CSS3常用选择器(二)

    本文继续介绍css3新增的选择器. 1.选择器 first-child.last-child.nth-child 和 nth-last-child 利用这几个选择器能够针对一个父元素中的第一个子元素. ...

  4. CSS3 常用选择器

    p:last-of-type{background-color: red;} 选择p中最后一项 p:nth-of-type(2n){background-color: red;} 隔行变色里面也可以填 ...

  5. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  6. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  7. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  8. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  9. css常用选择器选择器

    tap选择器 ulclass选择器 .id选择器 #后代选择器 a b子代选择器 a>b兄弟选择器 a + b 以a为参考给b加样式属性选择器 input [type="text&qu ...

随机推荐

  1. 纯js轮播效果(减速效果)待改进

    HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. Kubuntu 使用YaH3C进行中大校园网认证

    之前都是用路由器连网线上网,我也没注意到inode校园网客户端在linux上的问题.直到前两天把路由器给搞残废了,只能默默的找办法装inode.根据学校网络中心给的教程,在kubuntu上尝试安装in ...

  3. 配置vim环境

    <1> 一般不建议更改/etc/vimrc这个文件,因为此文件更改对所有用户生效, 故一般只更改当前用户 即更改文件 vim ~/.vimrc (.表示隐藏文件) <2> 该文 ...

  4. python笔记集合

    1.win_64下编译pyd(编译器用的tdm-gcc-5.1) gcc test.c -shared -Ic:\Python27\include -Lc:\Python27\libs -lpytho ...

  5. OpenStack nova VM migration (live and cold) call flow

    OpenStack nova compute supports two flavors of Virtual Machine (VM) migration: Cold migration -- mig ...

  6. MySQL日志恢复误删记录

    1.查询日志是否开启 show variables like"log_"; 2.查询是用的哪个日志文件 show master status; 3.定位是在什么时间误删的 /usr ...

  7. PHP截断函数mb_substr()详细介绍

    [导读] 在php中mb_substr()函数是用来截中文与英文的函数,可以方便快速的解决截取指定字符长度的问题,下面我来给大家介绍介绍.提示:mb_substr在于php中是默认不被支持的我们需要在 ...

  8. ModelAttribute注解

    1.使用@ModelAttribute标记方法,会在每个目标方法执行前被springMVC调用 2.使用@ModelAttribute修饰目标方法pojo入参,其value属性值有以下作用: 1)sp ...

  9. System.Web.HttpCompileException (0x80004005): (0): error CS0016: 未能写入输出文件

    重新系统后,iis asp.net站点老是出现: System.Web.HttpCompileException (0x80004005): (0): error CS0016: 未能写入输出文件“c ...

  10. 常见面试问题 - Useful Links

    1. Data Structure & Algorithm - 二叉树 http://baike.baidu.com/link?url=jKNdOOipbp-gloTVmSU4PT2mVB94 ...