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. RelativeLayout中的baseline

    比如,加入两个相邻的TextView,给第二个TextView一个大一点的padding(比如20dp),如果加了layout_alignBaseline到第二个TextView中的话, TextVi ...

  2. css hover图片hover效果兼容ie8

    例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. vue实现文字上下滚动

    实现文字的上下滚动使用positon的relative的top属性,通过动态改变top来实现相关内容的更换,通过transion来实现相关的动画效果, 相关的dom内容 <template> ...

  4. NodeJS学习笔记 (16)子进程-child_process(ok)

    原文: https://github.com/chyingp/nodejs-learning-guide/blob/master/README.md 自己的跟进学习: 父进程,子进程,线程之间的关系 ...

  5. Ubuntu下Matlab代码中中文注释乱码解决方案

    环境:Ubuntu18.04,Matlab R2017b. 把matlab文件从windows拷贝到Ubuntu中,打开发现原先的中文注释全部乱码.真正原因是因为windows中.m文件采用的是gbk ...

  6. 推荐《R数据可视化手册》高清英文版PDF+中文版PDF+源代码

    绝大多数的绘图案例都是以强大.灵活制图而著称的R包ggplot2实现的,充分展现了ggplot2生动.翔实的一面.从如何画点图.线图.柱状图,到如何添加注解.修改坐标轴和图例,再到分面的使用和颜色的选 ...

  7. Intel NUC迷你机2019年底迎来i9 8核心16线程

    Intel处理器这两年全年提速,虽然10nm新工艺受阻,但核心数在全面增加,从发烧到桌面到低功耗莫不如此,如今连NUC迷你机也要全新进化了,一年多之后就会迎来8核心16线程,而且也划入i9序列. 根据 ...

  8. Linux GPT分区表16进制实例分析

    Linux GPT分区表16进制实例分析 GPT分区表随着win10的普及,已经在越来越多的新电脑上开始使用了.前段时间的新闻有看到说Intel会在后面的新平台中完全取消CSM支持,这也大概相当于后面 ...

  9. HDU 4960 Another OCD Patient 简单DP

    思路: 因为是对称的,所以如果两段是对称的,那么一段的前缀和一定等于另一段的后缀和.根据这个性质,我们可以预处理出这个数列的对称点对.然后最后一个对称段是从哪里开始的,做n^2的DP就可以了. 代码: ...

  10. TIME定时器

    一.定时器分类 STM32F1 系列中,除了互联型的产品,共有 8 个定时器,分为基本定时器,通用定时器和高级定时器.基本定时器 TIM6 和 TIM7 是一个 16 位的只能向上计数的定时器,只能定 ...