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 ...
随机推荐
- button click event in jqxgrid jqwidgets
button click event in jqxgrid jqwidgets http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/p ...
- UI Framework-1: Browser Window
Browser Window The Chromium browser window is represented by several objects, some of which are incl ...
- selenium自动化框架介绍------unittest版本
首先说下unittest的两个问题:1.未实现失败重跑 2.未实现远程的分布式(即多线程呼起多台远程计算机,并行进行用例的执行), 为什么要使用框架: 比较方便,只需要写用例就行,而不用考虑结构.还 ...
- HNU 12876 Quite Good Numbers 完美数变形
筛法是一种很快的方法,贴代码纪念一下. 做法很像筛法 #include <iostream> #include <cstdio> #include <cstring> ...
- Spring Boot学习总结(2)——Spring Boot整合Jsp
怎么使用jsp上面起了疑问,查阅了多方资料,找到过其他人的博客的描述,也找到了spring在github上的给出的例子,看完后稍微改动后成功 整合jsp,于是决定将整合过程记载下来. 无论使用的是那种 ...
- POI0109 POD (最短路)
POI0109 POD (最短路) 版权声明:本篇随笔版权归作者YJSheep(www.cnblogs.com/yangyaojia)所有,转载请保留原地址! 现在让我们来对一个交通运输图进行研究,这 ...
- Spring-statemachine Action不能并发执行的问题
Spring-statemachine版本:当前最新的1.2.3.RELEASE版本 这几天一直被Action是串行执行搞得很郁闷,写了一个demo专门用来测试: public static void ...
- 可穿戴KEY带来的身份认证的革命
在用户身份认证方面,PKI体系给出了极好的解决方式.即基于X.509数字证书的用户身份认证.该方法基于非对称公钥算法的难题为用户提供非常安全的认证过程. PKI体系尽管明白要求"私钥必须保密 ...
- KVM硬件辅助虚拟化之 EPT in Nested Virtualization
在嵌套虚拟环境(Nested Virtualization)下,执行在hypervisor上的Virtual Machine仍能够作为hypervisor去执行其他的Virutal Machine,而 ...
- Mac系统下安装ant
看了一些别人怎么在mac下安装ant,大体都是从官网下载bin文件,然后改动权限,建链接.配path. 须要这么麻烦吗?我认为不须要. 以下一个命令搞定: forlong401:build forlo ...