自己学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的新特性选择器-------属性选择器的更多相关文章

  1. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  2. HTML5和CSS3的新特性

    html5的新特性 添加了用于媒介回放的 <video>,<audio> 元素 添加了语义标签譬如 header.footer.nav 等等元素 添加了用于绘画的 canvas ...

  3. CSS3常用新特性

    CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...

  4. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  5. CSS/CSS3语法新特性笔记

    CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...

  6. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  7. CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  8. css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

    后代选择器 祖先元素 后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器 元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器 元素~兄弟元素(该 ...

  9. CSS3的新特性

    CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...

随机推荐

  1. js中 '枚举' 的使用

    习惯了.net编程,c#的枚举很好用,无论管理上,可读上,易用上都非常强大. JS作为弱类型解析语言,并没有严格的数据类型限定. “枚举”在JS中并不存在的. 通过定义上,枚举是一种类常量的存在,只不 ...

  2. Adobe 2015 CC update (Windows/Mac OS) 独立升级包下载 Adobe Photoshop CC (Windows 32bit)

    Adobe CC 2015 Product Updates/Downloads for Windows ** = To access these updates, please first follo ...

  3. rails 开发随手记 8

    rails上传文件 无需gem 首先是model class DataFile < ActiveRecord::Base def initialize end def name @name en ...

  4. <Three.js>(第二节)添加长方体

    一.实验内容 上一节已经搭好了实验的框架.这一节我们将在屏幕上显示一些几何图形.如下图所示,我们将在屏幕上显示一个正方体. 二.实验步骤 1.创建场景 正像上一节所说,首先我们需要建一个场景,场景就是 ...

  5. Map<String,String>转换json字符串

    import java.util.HashMap; import java.util.Map; import net.sf.json.JSONObject; public class testJson ...

  6. 转移顺序的艺术 luogu4394 + lougu2966 + luogu3537

    lougu4394: N个政党要组成一个联合内阁,每个党都有自己的席位数. 现在希望你找出一种方案,你选中的党的席位数要大于总数的一半,并且联合内阁的席位数越多越好. 对于一个联合内阁,如果某个政党退 ...

  7. windows用xstart远程连接linux图形用户界面

    转载:https://blog.csdn.net/yabingshi_tech/article/details/51839379 双击xstart 输入:/usr/bin/xterm -ls -dis ...

  8. 关于vue自定义事件中,传递参数的一点理解

    例如有如下场景 先熟悉一下Vue事件处理 <!-- 父组件 --> <template> <div> <!--我们想在这个dealName的方法中传递额外参数 ...

  9. Unity C# 设计模式(二)简单工厂模式

    定义: 简单工厂模式是属于创建型模式,又叫做静态工厂方法(Static Factory Method)模式,但不属于23种GOF设计模式之一. 简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例 ...

  10. C++ 输出缓冲区的管理

    在C++中,每个I/O对象管理一个缓冲区,用于存储程序读写的数据.本文将对输出缓冲区的管理进行简单的讲解. 举一个简单的例子: myOs << "Please enter a v ...