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.背景图像显示的原 ...
随机推荐
- RelativeLayout中的baseline
比如,加入两个相邻的TextView,给第二个TextView一个大一点的padding(比如20dp),如果加了layout_alignBaseline到第二个TextView中的话, TextVi ...
- css hover图片hover效果兼容ie8
例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- vue实现文字上下滚动
实现文字的上下滚动使用positon的relative的top属性,通过动态改变top来实现相关内容的更换,通过transion来实现相关的动画效果, 相关的dom内容 <template> ...
- NodeJS学习笔记 (16)子进程-child_process(ok)
原文: https://github.com/chyingp/nodejs-learning-guide/blob/master/README.md 自己的跟进学习: 父进程,子进程,线程之间的关系 ...
- Ubuntu下Matlab代码中中文注释乱码解决方案
环境:Ubuntu18.04,Matlab R2017b. 把matlab文件从windows拷贝到Ubuntu中,打开发现原先的中文注释全部乱码.真正原因是因为windows中.m文件采用的是gbk ...
- 推荐《R数据可视化手册》高清英文版PDF+中文版PDF+源代码
绝大多数的绘图案例都是以强大.灵活制图而著称的R包ggplot2实现的,充分展现了ggplot2生动.翔实的一面.从如何画点图.线图.柱状图,到如何添加注解.修改坐标轴和图例,再到分面的使用和颜色的选 ...
- Intel NUC迷你机2019年底迎来i9 8核心16线程
Intel处理器这两年全年提速,虽然10nm新工艺受阻,但核心数在全面增加,从发烧到桌面到低功耗莫不如此,如今连NUC迷你机也要全新进化了,一年多之后就会迎来8核心16线程,而且也划入i9序列. 根据 ...
- Linux GPT分区表16进制实例分析
Linux GPT分区表16进制实例分析 GPT分区表随着win10的普及,已经在越来越多的新电脑上开始使用了.前段时间的新闻有看到说Intel会在后面的新平台中完全取消CSM支持,这也大概相当于后面 ...
- HDU 4960 Another OCD Patient 简单DP
思路: 因为是对称的,所以如果两段是对称的,那么一段的前缀和一定等于另一段的后缀和.根据这个性质,我们可以预处理出这个数列的对称点对.然后最后一个对称段是从哪里开始的,做n^2的DP就可以了. 代码: ...
- TIME定时器
一.定时器分类 STM32F1 系列中,除了互联型的产品,共有 8 个定时器,分为基本定时器,通用定时器和高级定时器.基本定时器 TIM6 和 TIM7 是一个 16 位的只能向上计数的定时器,只能定 ...