css3新特性选择器(补充)
1.选择p标签中的第一个字符
p:first-letter{
color:red;
font-size:25px;
}
2.选择p标签中的第一行
p:first-line{
color:red;
font-size:25px;
}
3.在p的前面和后面添加伪类
p:before/after{
content:"';
设置属性样式
}
4.设置input在得到焦点、可以被修改、不能被修改、选中时的样式
input:focus/enabled/disabled/cheked{
background:orange;
}
5.选择parent中第一个p标签
#parent p :first-of-type{
设置样式
}
6.选择是独生子的p标签(没有任何兄弟标签)
#parent p:only-child{
设置样式
}
7.选中div的第二个元素,且第二个元素是p元素(如果不符合要求,不能被选中)
div p:nth-child(2){
}
8.选择div中第n个p元素
div p:nth-of-type(n){
}
9.选择第一个和最后一个元素,且他们是p标签
div p:first/last-child{
}
css3新特性选择器(补充)的更多相关文章
- 总结CSS3新特性(选择器篇)
CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- css3的新特性选择器-------属性选择器
自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
随机推荐
- Java 类和对象7
创建一个三角形类,成员变量三边,方法求周长,创建类主类A来测试它. public class sanjiaoxing { private double a; private double b; pri ...
- RMAN动态视图
1.V$ARCHIVEG_LOG 显示归档文件在数据库中创建.备份.清除 2.V$BACKUP_CORRUPTION 显示当一个备份集备份时块中发现的坏块 3.V$COPY_CORRUPTION 显示 ...
- Python开发注意事项
仅为记录自己在使用python过程的的一些心得! 1.服务器上运行脚本: windows服务器: 显式运行:在cmd中直接用python xxxx.py 运行一个py脚本文件. 后台运行:在cm ...
- 栈 <stack> F - 宋飞正传
I’m out of stories. For years I’ve been writing stories, some rather silly, just to make simple prob ...
- Entity Framework的一个实例
环境:Visual studio2013+sql server本地数据库 创建一个C#应用程序,首先在nuget中添加Entity Framework 接下来的工作分为四个主要部分: 第一部分:App ...
- 今日SGU 5.30
SGU 190 题意:给你个n*n的矩形,然后上面有几个点不能放东西,然后问你能不能用1*2的矩形,把能放 东西的地方放满 收获:一开始想的是,dfs,然后感觉这样的话,代码很长,而且很容易超时, 看 ...
- HBase快照、Snapshots 淘宝快照
淘宝在2011年之前所有的后端持久化存储基本上与我们所认知的意义, 大量存于 mysql .少量 oracle mongdb 等,使用mysql 的原因相信各位也很熟悉了. 开源.社区庞大.解决方 ...
- 【JavaScript】JavaScript中的replaceAll
JavaScript中是没有replaceAll的.仅仅有replace,replace仅仅能替换字符中的第一个字符.并且这个replace里面不支持正則表達式,以达到replaceAll的目的. 只 ...
- java 究竟老年代和年轻代的比例为多大合适呢?
眼下我还没有这方面过多的经验,和切身体会 只是以我眼下的水平看来,年轻代不宜大,假设年轻代大会导致转为老年代的时候,老年代撑不下.导致full gc.回收停顿时间过长
- Android实战简易教程-第二十六枪(基于ViewPager实现微信页面切换效果)
1.头部布局文件top.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...