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新特性选择器(补充)的更多相关文章

  1. 总结CSS3新特性(选择器篇)

    CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth ...

  2. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  3. css3的新特性选择器-------属性选择器

    自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a ...

  4. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  5. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  6. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  7. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  8. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  9. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

随机推荐

  1. strlen() 和 sizeof() 的区别

    1.strlen() 时函数,他在程序运行时才能计算.它的参数类型要求时 char *,且必须是以'/0'结尾.数组在传入时已经退化为指针.它的作用是返回数组中字符串的长度. 2.sizeof()时运 ...

  2. springMVC接受前台传值

    今天,用ajax向springMVC的控制器传参数,是一个json对象.({"test":"test","test1":"test ...

  3. jqueryEasyUI form表单提交的一个困惑

    今天用到了jqueryEasyUI的form表单做一个增加操作的提交,想打开调试(用的是火狐)看看传的参数,但是怎么也看不到form表单提交的http请求?而且还会发送一个另外的请求! 在页面加载时, ...

  4. UVa 10305 Ordering Tasks【拓扑排序】

    题意:给出n件事情,m个二元组关系,求它们的拓扑序列 用的队列来做 #include<iostream> #include<cstdio> #include<cstrin ...

  5. who---显示目前登录系统的用户信息

    who命令是显示目前登录系统的用户信息.执行who命令可得知目前有那些用户登入系统,单独执行who命令会列出登入帐号,使用的终端机,登入时间以及从何处登入或正在使用哪个X显示器. 语法 who(选项) ...

  6. Python组织文件 实践:查找大文件、 用Mb、kb显示文件尺寸 、计算程序运行时间

    这个小程序很简单原本没有记录下来的必要,但在编写过程中又让我学到了一些新的知识,并且遇到了一些不能解决的问题,然后,然后就很有必要记录一下. 这个程序的关键是获取文件大小,本来用 os.path.ge ...

  7. 紫书 例题 10-23 UVa 10213(欧拉公式+高精度)

    用欧拉公式V-E+F=2 V是顶点数,E是边数,F是面数 具体推导见https://blog.csdn.net/QWsin/article/details/53635397 要用高精度 #includ ...

  8. MyBatis学习总结(10)——批量操作

    一.mybatis中的批量操作    批量操作核心就是一次传入多个数据然后进行相关操作,增删改查中掌握其中一个其他的也不成问题 1.最新在做的短信平台,要批量插入群发的短信记录: 当然批量操作还有:批 ...

  9. LocalDateTime在spring boot中的格式化配置

    在项目中日期格式化是最常见的问题,之前涉及的 java.util.Date 和 java.util.Calendar 类易用性差,不支持时区,非线程安全,对日期的计算方式繁琐,而且容易出错,因为月份是 ...

  10. 洛谷——P3374 【模板】树状数组 1

    https://www.luogu.org/problem/show?pid=3374 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某一个数加上x 2.求出某区间每一个数的和 输入输 ...