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="#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常用选择器(一)的更多相关文章
- CSS3常用选择器(三)
在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...
- CSS3常用选择器
一.基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father > Children)兼容性:IE8+.FireFox.Chrome.S ...
- CSS3常用选择器(二)
本文继续介绍css3新增的选择器. 1.选择器 first-child.last-child.nth-child 和 nth-last-child 利用这几个选择器能够针对一个父元素中的第一个子元素. ...
- CSS3 常用选择器
p:last-of-type{background-color: red;} 选择p中最后一项 p:nth-of-type(2n){background-color: red;} 隔行变色里面也可以填 ...
- CSS3常用30种选择器总结
CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- 【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- css常用选择器选择器
tap选择器 ulclass选择器 .id选择器 #后代选择器 a b子代选择器 a>b兄弟选择器 a + b 以a为参考给b加样式属性选择器 input [type="text&qu ...
随机推荐
- 纯js轮播效果(减速效果)待改进
HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- Kubuntu 使用YaH3C进行中大校园网认证
之前都是用路由器连网线上网,我也没注意到inode校园网客户端在linux上的问题.直到前两天把路由器给搞残废了,只能默默的找办法装inode.根据学校网络中心给的教程,在kubuntu上尝试安装in ...
- 配置vim环境
<1> 一般不建议更改/etc/vimrc这个文件,因为此文件更改对所有用户生效, 故一般只更改当前用户 即更改文件 vim ~/.vimrc (.表示隐藏文件) <2> 该文 ...
- python笔记集合
1.win_64下编译pyd(编译器用的tdm-gcc-5.1) gcc test.c -shared -Ic:\Python27\include -Lc:\Python27\libs -lpytho ...
- OpenStack nova VM migration (live and cold) call flow
OpenStack nova compute supports two flavors of Virtual Machine (VM) migration: Cold migration -- mig ...
- MySQL日志恢复误删记录
1.查询日志是否开启 show variables like"log_"; 2.查询是用的哪个日志文件 show master status; 3.定位是在什么时间误删的 /usr ...
- PHP截断函数mb_substr()详细介绍
[导读] 在php中mb_substr()函数是用来截中文与英文的函数,可以方便快速的解决截取指定字符长度的问题,下面我来给大家介绍介绍.提示:mb_substr在于php中是默认不被支持的我们需要在 ...
- ModelAttribute注解
1.使用@ModelAttribute标记方法,会在每个目标方法执行前被springMVC调用 2.使用@ModelAttribute修饰目标方法pojo入参,其value属性值有以下作用: 1)sp ...
- System.Web.HttpCompileException (0x80004005): (0): error CS0016: 未能写入输出文件
重新系统后,iis asp.net站点老是出现: System.Web.HttpCompileException (0x80004005): (0): error CS0016: 未能写入输出文件“c ...
- 常见面试问题 - Useful Links
1. Data Structure & Algorithm - 二叉树 http://baike.baidu.com/link?url=jKNdOOipbp-gloTVmSU4PT2mVB94 ...