css3的新特性选择器-------属性选择器
自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结
<div id="parent">
<p>I'm a example</p>
<p id="one">I'm a example</p>
<p>I'm a example</p>
<p>I'm a example</p>
<p>I'm a example</p>
<p>I'm a example</p>
<p>I'm a example</p>
<p name="shuai">I'm a example</p>
<p>I'm a example</p>
<div id="child">
<p>I'm a example</p>
<p>I'm a example</p>
<p>I'm a example</p>
<p>I'm a example</p>
<div>
</div>
1.选择id为parent的div下所有的p元素
#parent p{
color:red;
font-size:24px;
}
2.选择id为parent的div下子元素p标签
#parent>p{
color:red;
font-size:24px;
}
3.选择id为one的p标签后相邻的p标签
#one+p{
color:red;
font-size:24px;
}
4.选择id为onep的p后面所有同级的p标签
#one~p{
color:red;
font-size:24px;
}
5.选择parent中有id的p标签
#parent p[id]{
color:red;
font-size:24px;
}
6.选择parent中name属性值是shuai的p标签
#parent p[name=shuai]{
color:red;
font-size:24px;
}
7.选择parent中id以o开头的p标签
#parent p[id^=o]{
color:red;
font-size:24px;
}
8.选择parent中id以o结尾的p标签
#parent p[id$=o]{
color:red;
font-size:24px;
}
9.选择parent中id包含o的p标签
#parent p[id*=o]{
color:red;
font-size:24px;
}
css3的新特性选择器-------属性选择器的更多相关文章
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- HTML5和CSS3的新特性
html5的新特性 添加了用于媒介回放的 <video>,<audio> 元素 添加了语义标签譬如 header.footer.nav 等等元素 添加了用于绘画的 canvas ...
- CSS3常用新特性
CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})
1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素 例如:input [ value ...
- css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类
后代选择器 祖先元素 后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器 元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器 元素~兄弟元素(该 ...
- CSS3的新特性
CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...
随机推荐
- SSD-2(代码部分介绍)
single shot multibox detectior tensorflow 代码 一.SSD重要参数设置 在ssd_vgg_300.py文件中初始化重要的网络参数,主要有用于生成默认框的特征层 ...
- bzoj1025 [SCOI2009]游戏 动态规划
题目描述 对于一些长度为n的排列,将其作为一个置换,那么可能有一个自置换的次数使其回到1,2,3,...,n的情况.求对于所有能够回到1,2,3..,n的排列,不同的次数共有多少种. 题解来自黄学长 ...
- 使用SVN+Axure RP 8.0创建团队项目
一.使用到的工具:VisualSVN Server --SVN服务器:https://www.visualsvn.com/server/ Axure RP 8.0 :http://www.downc ...
- Python组织文件 实践:拷贝某种类型的所有文件
#! python3 #chapter09-test01- 遍历目录树,查找特定扩展名的文件不论这些文件的位置在哪里,都将他们 #拷贝到一个新的文件夹中 import os,shutil,pprint ...
- Python IO编程-组织文件
对于日常中遇到的批量任务,有些可以通过请求python完成自动化,我非常渴望拥有这些能力,在去年学习了python读写文件之后,我马上迫不及待的开始学习‘组织文件’,经过学习,我发现python组织文 ...
- hiho 1055 刷油漆 树形dp
一个简单的树上的背包问题. 代码: #include <iostream> #include <cstdio> #include <cstring> #includ ...
- 【cdoj 1544】当咸鱼也要按照基本法
[题目链接]:http://acm.uestc.edu.cn/#/problem/show/1544 [题意] [题解] 容斥原理题; 1..(2^m)-1枚举 设k为其二进制形式中1的个数; k为奇 ...
- Varnish 缓存加速, Varnish 菜鸟看过来,Varnish实战
Varnish可以有效降低web服务器的负载,提升访问速度.按照HTTP协议的处理过程,web服务器接受请求并且返回处理结果,理想情况下服务器要在不做额外处理的情况下,立即返回结果,但实际情况并非如此 ...
- Mac上配置 Ruby on Rails和Git
Ruby on Rails on Mac =============================================================================== ...
- Qt编译mysql以及创建表后进行导入操作
鉴于很多同学对Qt编译myql总是不能成功.出现各种问题,今天特此写出本教程,希望可以帮到须要的同学. 首先,须要明确编译的目的和原理. 目的:Qt 5.2版本号曾经都是不带mysql驱 ...