一.Tag selector
标签selecor ,也可以称为类型selector,它将对HTML页面中所有的该类型有效。
h1 {
font-family:Arial, sans-serif;
color:#CCCCFF;
}
表示所有h1标签都适用该CSS的rule,当然为了缩短代码,适用相同的rule的多个HTML Tag可以用逗号分隔开进行统一的修饰。如
DIV,H1 {
}
二.Class Selector
类选择器和HTML中的class相结合,应用到所有声明了该class的标签中。类选择器必须要以 “.”来开头。
对于
.title{
color:#FF000;
font-size:24px;
}
class selector可以分成独立和相关两种方式,独立的class selector是直接以.开头的,表示所有具有属性class的节点都是该CSS规则修饰的目标;相关的class selector常常跟Tag selector一起来修饰,表示指定的Tag 节点里面且具有对应的class的节点才是该CSS规则修饰的目标,如DIV.testClass {}
三.ID selector
ID选择器会将其syle应用在HTML中该ID的tag上。
对于
#sidebar{
float:left;
margin-left:30px;
}
一个有意思的问题是如果在一个HTML中,有两个以上的tag用了同一个ID会怎么样呢?虽然并不是合法的HTML,但是大部分的游览器会忽略这个问题。这个时候ID选择器就像类选择器一样,只要哪个tag的使用了该ID,就会应用该style.
四.Descendent selector
这种选择器的的意思就是根据DOM树的祖先、父子关系来选择具体的元素。
如:
将对<h1> This is homepage of <strong>liwenbing</strong></h1>中的strong的内容进行标红。
同样这种方式是可以组合前面的任何三种选择器:
h1 .intro a{
color:yellow;
}
将对<h1> This is homepage of <strong >liwenbing </strong> who is <span class=”intro”><a href=”#”>lovely boy</a></span></h1>中的lovely boy标黄。
注意tag和类之间是否有空格是非常重要的。
有空格表示是应用该类的元素在tag之中,就像上面的例子;没有空格,则表示tag和class都标明的是同一个元素。
h1.intro a{ //注意h1和.intro之间没有空格
color:blue;
}
对<h1 class=”intro”>This is homepage of <a href=”#” >liwenbing </a></h1>中的liwenbing是有效的。
再举一个和ID selector结合的例子:
#sidebar h2{
font-size:1.2em;
}
上述style将对sidebar元素下面的所有h2进行应用。
五.Group selector
组选择器顾名思义就是对于一组selector应用同一中style,以逗号”,”隔开;组中的元素都可以是前面四中的任何一种。
h1,
p .intro,
#sidebar .title{
color:#6F6F6F;
}
六.伪选择
伪选择器可以进一步地定义用户和页面的行为。最常用的就是对link的定义了;
a:hover{
text-decoration:none;
}
a:visited{
color:blue;
}
当然关于link的除了上述两种,还有a:link,a:active;
其他还有很多的伪选择,例如现在在用的focus.下面这个CSS可以让input 有safari中的高亮效果(不过IE并不支持)。
input:focus{
border-color: #feca70;
}
其他伪选择器还有:before,:after,:firs-child.
Overview of CSS 2.1 selector syntax
Selector type
Pattern
Description
Universal |
* |
Matches any element. |
Type |
E |
Matches any E element. |
Class |
.info |
Matches any element whose class attribute contains the value info . |
ID |
#footer |
Matches any element with an id equal to footer . |
Descendant |
E F |
Matches any F element that is a descendant of an E element. |
Child |
E > F |
Matches any F element that is a child of an E element. |
Adjacent |
E + F |
Matches any F element immediately preceded by a sibling element E.
(E元素和F元素同属于一个parent并且E元素在F元素之前)
|
Attribute |
E[att] |
Matches any E element that has an att attribute, regardless of its value. |
Attribute |
E[att=val] |
Matches any E element whose att attribute value is exactly equal to val . |
Attribute |
E[att~=val] |
Matches any E element whose att attribute value is a list of space-separated values, one of which is exactly equal to val . |
Attribute |
E[att|=val] |
Matches any E element whose att attribute has a hyphen-separated list of values beginning with val . |
The :first-child pseudo-class |
E:first-child |
Matches element E when E is the first child of its parent. |
The link pseudo-classes |
E:link E:visited |
Matches not yet visited (:link) or already visited (:visited) links. |
The dynamic pseudo-classes |
E:active E:hover E:focus |
Matches E during certain user actions. |
The :language pseudo-class |
E:lang(c) |
Matches elements of type E that are in language c. |
The :first-line pseudo-element |
E:first-line |
Matches the contents of the first formatted line of element E. |
The :first-letter pseudo-element |
E:first-letter |
Matches the first letter of element E. |
The :before and :after pseudo-elements |
E:before E:after |
Used to insert generated content before or after an element’s content. |
分享到:
相关推荐
selenium css selector 定位详解
CSS Selector 生成器
css-selector-tokenizer, 解析和 stringifies CSS选择器 CSS模块:CSS选择器标记器解析和 stringifies CSS选择器。import Tokenizer from "css-selector-tokenizer";let input = "a#content.act
$ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) . use ( selectorNamespace ...
有很多的新手朋友们可能都不知道CSS selector:div.title p代表的是什么意思, 其实就是满足三个条件的元素会被css渲染,不会的朋友可以参考下
CssSelector组件CssSelector组件将CSS选择器转换为XPath表达式。 资源文档贡献报告问题,并在Symfony主存储库中发送拉取请求CssSelector组件CssSelector组件将CSS选择器转换为XPath表达式。 资源文档贡献报告问题,...
npm install postcss-selector-parser 快速开始 const parser = require ( 'postcss-selector-parser' ) ; const transform = selectors => { selectors . walk ( selector => { // do something with the ...
grunt-css-selector-limit Grunt插件,用于检测集合中的任何CSS文件是否具有比IE的4095限制更多的选择器。包装。入门这个插件需要~0.4.2 如果您以前从未使用过 ,请务必查看《指南》,因为它说明了如何创建以及安装...
要使用CSS Selector Helper for Chrome:trade_mark:,请按照以下步骤操作(在视频中也是如此):1)将扩展程序安装到chrome浏览器中。 2)检查页面上的元素,或在开发工具的“元素”页面上选择一个元素。 3)导航到...
很好的WebDriver 元素选择参考,对比展示了使用Xpath Css 等方法选取页面元素 对自动化测试人员很实用
扩展开发工具和上下文菜单,添加一个显示DOM元素的CSS路径的边栏。 找到页面上任何元素的唯一选择器。 它会找到一个最佳的选择器,这对选定的元素是唯一的。用鼠标右键单击元素并选择复制Css选择器菜单项到缓冲区,...
kquery是一款基于javascript完整实现css3选择器引擎. 兼容所有主流浏览器ie6 /chrome/firefox/opera/safari, 压缩和gzip之后仅8kb大小。智能编译引擎优化去除不必要的逻辑, 查询速度远胜于Szizzle, nwmatcher, ...
快速,轻松,强大CSS选择器生成。 与通过HTML进行挖掘相比,此扩展使在网页上找到合适CSS选择器更加快捷,容易。 1)将此扩展程序安装到chrome浏览器。 2)检查页面上的元素,或在Chrome浏览器开发工具的“元素”...
用CSS Selector Tester快速测试你的CSS选择器!在选择器文本字段中创建或复制选择器,匹配的HTML元素将突出显示并计数。确保你的CSS选择符与你打算的元素匹配! 1.3.3 - 小错误修复,固定图标。 1.3.2 - 小错误修复...
前端开源库-css-selector-extractCSS选择器提取,从CSS代码中提取特定的CSS选择器
use Symfony\Component\CssSelector\CssSelector; use Symfony\Component\CssSelector\CssSelectorConverter; use Symfony\Component\CssSelector\Exception\ExceptionInterface; use TijsVerkoyen\...
CssSelector组件CssSelector组件将CSS选择器转换为XPath表达式。资源资源并在学分该组件是Python cssselect库的端口,该库以BSD许可证分发。
基于Python pyqt5的HTTP测试工具源代码,可使用HTTP GET、POST、PATCH、DELETE方法测试网站,可使用正则表达式、XPATH、CSS selector匹配文本
为鼠标悬停元素创建唯一CSS选择器的JavaScript对象。 为鼠标悬停元素创建唯一CSS选择器的JavaScript对象。 支持语言:English
从Chrome Devtools元素面板生成CSS选择器 易于使用的Devtools侧栏,可帮助查找唯一CSS选择器。 -在“ Devtools元素”面板中更改选择时,会连续生成唯一CSS选择器。-高度可配置。 可以轻松地以交互方式更改设置,并...