css3选择器相关知识
-
第2章 CSS3选择器-22.3 层次选择器层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。2.3.1 层次选择器语法选择器类型功能描述E F后代选择器（包含选择器）选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内E > F子选择器选择匹配的F元素，且匹配的F元素是所匹配的E元素的子元素E + F相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面E ~ F通用兄弟选择器选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素2.3.2 浏览器兼容性子选择器、相邻兄弟选择器和通用兄弟选择器要IE7及以上版本才支持，随着IE6的慢慢消失，层次选择器可以放心使用。2.3.3 实战体验：使用层次选择器选择元素在层次选择器中，后代选择器与子选择器是比较常用的，而对于相邻兄弟选择器和通用兄弟选择器而言，平时大家并不常使用，特别是CSS3选择器中新增的通用兄弟选择器。页面中有10个div元素，其中第四个d
-
CSS3简明教程之征服CSS3选择器第6章 征服CSS3选择器属性选择器在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：属性选择器功能描述E[att^='val']选择匹配元素E，且E元素定义了属性att，其属性值以val开头的任何字符串E[att$='val']选择匹配元素E，且E元素定义了属性att，其属性值以val结尾的任何字符串E[att*='val']选择匹配元素E,且E元素定义了属性att，其属性值的任意位置包含了val示例：<a href="xxx.pdf">我链接的是PDF文件</a><a href="#"
-
css3选择器css3选择器1：属性选择器， a[class^=column]{} 火车头开始的class名column匹配 a[href$=doc] {} 火车尾结尾的href名字为doc a[title=box]{} title中只要有box就匹配 2：根选择器 :root ==html 3：结构性选择器 input:not([type="submit"]){} 和jquery一样，除了submit，其它都可以。 4：empty 选择没有内容的元素，一个空格都没有。 div:empty { border: 1px solid green; } 5：target 用法类似锚点，显示与隐藏。 <h2><a href="#brand">Brand</a></h2> <div class="menuSect
-
好程序员HTML5培训教程-总结30个CSS3选择器好程序员HTML5培训教程-总结30个CSS3选择器 1 *：通用选择器{ margin:0; padding:0; }*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。*选择器也可以应用到子选择器中，例如下面的代码：container * { border:1px solid black; }这样ID为container 的所有子标签元素都被选中了，并且设置了border。2 #id：id选择器# container { width: 960px; margin: auto; } id选择器是很严格的并且你没办法去复用它。使用的时候大家还是得相当小心的。需要问自己一下：我是不是必须要给这个元素来赋值个id来定位它呢？3 .class：类选择器.error { color: red; } 这是个class选择器。它跟id选择器不同的是，它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的
css3选择器相关课程
css3选择器相关教程
- 2.2 CSS 选择器 CSS 选择器决定了对应 CSS 样式会被用到网页中的哪个元素上。CSS 选择器主要有以下几种：元素选择器：通过元素名来定位元素，并将对应 CSS 样式用于网页上所有该元素上；<style type="text/css"> p { color: red; }</style>...<body> <div>无样式作用</div> <p>红色文本</p> <h4>标题文本</h4> <p>有一个红色文本</p> <div><lable>有无样式文本</lable></div></body>示例图：元素选择器效果图这里我们可以看到字体红色的样式作用到了所有 <p> 标签中，其他 HTML 标签则没有应用到这样的样式。ID 选择器：ID 选择器是根据 HTML 元素的 ID 属性确定对应的元素。它的使用语法如下：#ID { 属性1: 值1; 属性2: 值2; ...}示例代码：<style type="text/css"> #red-color { color: red; }</style>...<body> <div>无样式作用</div> <p id="red-color">红色文本</p> <h4>标题文本</h4> <p>未被选中</p> <div><lable>又无样式文本</lable></div></body>效果图如下，可以看到只有 id 属性值等于 red-color 的元素被选中，然后应用对应的样式：ID 选择器效果图类选择器：类选择器以 HTML 元素的类属性来确定元素。语法如下：.class { 属性1: 值1; 属性2: 值2; ...}示例代码：<style type="text/css"> .red-color { color: red; }</style>...<body> <div class="red-color">红色文本</div> <p>普通文本</p> <h4>标题文本</h4> <p>未被选中</p> <div class="red-color"><lable>红色文本</lable></div></body>效果图如下，可以看到只有元素的 class 属性值为 red-color 时，对应的样式才会被应用到该元素上。类选择器效果图组合选择器：组合选择器有很多种形式，比如元素 + 类组合、元素和元素组合、元素和 ID 组合、类和类组合等等。对应具体的选择规则需要参考相关的文档，这里就不一一说明，我们通过示例代码来了解下组合选择器。<style type="text/css"> p.red-color { color: red; } p span { color: yellow; }</style>...<body> <div class="red-color">div作用红色文本样式</div> <p><span>黄色文本</span></p> <div><span>div包裹span的文本</span></div> <h4>标题文本</h4> <p class="red-color">p元素作用红色文本样式</p> <div><lable>红色文本</lable></div></body>效果图如下，可以看到 p.red-color 表示该样式只作用于 p 标签中 class 属性为 red-color 的标签，其他标签的 class 属性值等于 red-color 并不会被选中。 p span 指的是在 p 标签内的 span 标签，对于这类的标签才会被应用其样式：组合选择器效果图其他选择器：CSS 中很多形式的选择器，比如后代选择器等等，有非常多的选择元素的方式。需要大家耐心去学习和实践。
- 1. 什么是 CSS3 ？ 它其实是 CSS 不停升级的演变，早在 2001 年 W3C 就完成了 CSS3 的草案规范。CSS3 规范的一个新特点是被分为若干个相互独立的模块。一方面分成若干较小的模块较利于规范及时更新和发布，及时调整模块的内容，这些模块独立实现和发布，也为日后 CSS 的扩展奠定了基础。另外一方面，由于受支持设备和浏览器厂商的限制，设备或者厂商可以有选择的支持一部分模块，支持 CSS3 的一个子集，这样有利于 CSS3 的推广。我们日常工作中其实 CSS 和 CSS3 是在一起使用的，有时候你甚至不知道已经使用了 CSS3 。因为 CSS3 就是 CSS 升级演变的产物。
- 3.1 占位符选择器 在 Sass 中有一种特殊的选择器叫占位符选择器，它的写法像我们写的 id 或 class 选择器一样，只不过占位符选择器是以 % 开头的。在 Sass 中你单独使用这种选择器是不会转换为 CSS 的，只能是通过 @extend 来使用。比如说有时候你想编写一个可扩展的样式，然后在各处继承它，你就可以使用占位符选择器，我们结合实际的例子来看下：%placeholder { box-sizing: border-box; border-top: 1px #666666 solid; width: 100%; &:hover { border: 2px #999999 solid; } &:active {color: blue;}}.buttons { @extend %placeholder; color: #4285f4;}.btn { @extend %placeholder;}从上面的代码中看到，我通过占位符选择器 %placeholder 定义了一堆样式，然后在其他的样式表中继承它，这个告诉你一个简单的理解方式，占位符选择器你就理解为一个虚拟的选择器，这个名是不会编译到 CSS 中的，最终编译出的选择器名是根据你使用继承的选择器名来定的。上面这段代码会转化为如下的 CSS 代码：.btn, .buttons { box-sizing: border-box; border-top: 1px #666666 solid; width: 100%;}.btn:hover, .buttons:hover { border: 2px solid;}.btn:active, .buttons:active { color: blue;}.buttons { color: #4285f4;}从上面的代码中可以看到，编译成 CSS 后 %placeholder 这个选择器不见了，但它的样式被继承了，这就是占位符选择器结合继承 @extend 的用法。
- 4.2 父选择器 (Parent Selector) 父选择器是 Sass 中一种特殊的选择器，用于嵌套选择器中，用来引用外部的选择器；通俗的讲就是，当你使用嵌套的时候，可能你会需要使用到嵌套外层的父选择器，比如为一个元素 添加伪类 (hover、active、before、after) 的时候，可以用 & 代表嵌套规则外层的父选择器，我们举个例子来更直观的感受下：a { &:hover { color:red; } &:active { color:blue; } &:before { content:''; } &:after { content:''; } span { &:hover { color:green; } }}在上面的 Sass 代码中我们编写了几个伪类，在编译的时候 & 将会被替换为嵌套外层的父选择器，有多层嵌套的话将会把父选择器一级一级的传递下去，最终转换为如下的 CSS 代码：a:hover { color: red;}a:active { color: blue;}a:before { content: "";}a:after { content: "";}a span:hover { color: green;}4.2.1 添加后缀 (Adding Suffixes)可以使用 & 向外部选择器添加后缀，举个例子看下：.box { width:100px; &-head { width:100%; &-title { color:red; } } &-body { width:100%; } &-footer { width:100%; }}上面这个例子将会转换为如下的 CSS 代码：.box { width: 100px;}.box-head { width: 100%;}.box-head-title { color: red;}.box-body { width: 100%;}.box-footer { width: 100%;}
- 2.5 额外的选择器 ECharts 图例还支持额外的选择器模块，用以实现图例的全选、反选交互功能，可通过设置 legend.selector 属性启动，效果如：与选择器相关的配置项有：配置名类型默认值说明selectorboolean | arrayfalse图例组件中的选择器按钮，目前支持全选(all和反选(inverse两种功能selectorLabelobject选择器按钮的文本标签样式，详见 官网selectorPositionstringauto选择器的位置，可以放在图例的尾部或者头部，对应的值分别为 ‘end’ 和 ‘start’selectorItemGapnumber7选择器按钮之间的间隔selectorButtonGapnumber10选择器按钮与图例组件之间的间隔其中，selector 属性支持如下值：selector: [ { // 按钮类型 // 支持 all、inverse type: 'all', title: '全选', }, { type: 'inverse', title: '反选', },];// 或selector: true;// 或selector: ['all', 'inverse'];当图例项较多时，可以配合分页功能使用，示例：1331示例效果：
- 2. 设置 CSS 类选择器 这个知识点中我们讲解一下 CSS 的类选择器，在 CSS 的语法中，一般是将 # 开头的为 ID 选择器，由.开头的一般为类选择器。类选择器，顾名思义，对应 HTML 元素的 class 属性。而我们今天并不是讲如何写 CSS 代码，而是如何利用 Dreamweaver CC 2018 来设置类选择器。其实大体步骤和设置 ID 选择器是一样的。第一步：我们要先建一个空白页面。第二步：我们打开 CSS 设计器，点击源，添加一个 style 。第三步：在选择器那一行中，点击 + 添加一个选择器，输入的时候由之前的 #testelement 改为 .testelement，设置好属性后，这样就完成了一个类选择器的创建/修改：
css3选择器相关搜索
-
c 正则表达式
c string
c 编程
c 程序设计
c 程序设计教程
c 多线程编程
c 教程
c 数组
c 委托
c 下载
c 线程
c 语言
caidan
cakephp
call
calloc
calu
camera
caption
case语句