CSS选择器大全(CSS2)

转载 2015年11月20日 09:51:11

CSS选择器(CSS2)

规则结构

  每个规则都有两个基本部分:选择器和声明块。声明块由一个或多个声明组成,每个声明则是一个属性—值对。每个样式表由一系列规则组成。

h1{
color: red;
background: yellow;
}

 

选择器分类

【0】通配选择器
  星号*代表通配选择器,可以与任何元素匹配

*{color: red;}

 

【1】元素选择器

  文档的元素是最基本的选择器

html{color: black;}
p{color: gray;}
h2{color: silver;}    

 

【2】类选择器(一组元素)

.div{color: red;}

  【2.1】多类选择器

.div1.div2{color: red;}

  【2.2】结合元素的类选择器

p.div{color: red;}

 

【3】ID选择器(一个元素)

#test{color: red;}

  [注意]在实际中,浏览器并不会检查ID的唯一性,设置多个ID,可以为这些具有相同ID的元素应用相同样式,但在编写DOM脚本时只能识别该id的第一个元素。 

 

【4】属性选择器(IE6-不支持)
  根据元素的属性及属性值来选择元素

  【4.1】简单属性选择器

复制代码
h1[class]{color: red;}
img[alt]{color: red;}
a[href][title]{color: red;}
#div[class]{color: red;}
.box[id]{color: red;}
[class]{color: red;}
复制代码

  【4.2】具体属性选择器

[class="test box"]{color: red;}

  [注意]class里面的值以及顺序必须完全相同,并且不可多空格或者少空格

[id="tox"]{color: red;}    

  [注意]ID选择器和指定id属性的属性选择器并不是一回事,主要在于优先级不同。

a[href="http://www.baidu.com"][title="baidu"] {color: red;}    

  【4.3】部分属性选择器

[class ~="b"] 选择class属性值在用空格分隔的词列表中包含词语"b"的所有元素    
[class ^="b"] 选择class属性值以"b"开头的所有元素
[class $="b"] 选择class属性值以"b"结尾的所有元素
[class *="b"] 选择class属性值包含"b"的所有元素    
[class |="b"] 选择class属性值等于b或以b-开头的所有元素

 

【5】分组选择器

  将要分组的选择器放在规则左边,并用逗号隔开

h1,p{color: red;}

 

【6】后代选择器

ul li{color: red;}
div p, ul li{color: red;}

  【6.1】子元素选择器(IE6-不支持)

ul > li{color: red;}

 

【7】相邻兄弟元素选择器(IE6-不支持)

div + p{color: red;}    

  [注意]两个元素之间的文本内容不会影响相邻兄弟结合符起作用

 

【8】伪类选择器
  伪类顺序:link-visited-focus-hover-active
  【8.1】静态伪类(只应用于超链接)

:link    未访问
:visited    已访问
a:link{color: red;}
a:visited{color: green;}

  【8.2】动态伪类(可应用于任何元素)

:focus    拥有焦点(IE7-不支持)
:hover    鼠标停留(IE6-不支持给<a>以外的其他元素设置伪类)
:active    正被点击(IE7-不支持给<a>以外的其他元素设置伪类)

  【8.3】:first-child(属于静态伪类)(IE6-不支持)

p:first-child    代表的并不是<p>的第一个子元素,而是<p>元素是某元素的第一个子元素
p > i:first-child    匹配所有<p>元素中的第一个<i>元素
p:first-child i 匹配所有作为第一个子元素的<p>元素中的所有<i>元素

  【8.4】:lang 相当于|=属性选择器(windows->IE7-不支持)

p:lang(en) 匹配语言为"en"的<p>

  【8.5】伪类的结合

a:visited:hover:first-child{color: black;}

  [注意]顺序无关

 

【9】伪元素选择器
  【9.1】:first-letter 设置首字母样式(只能用于块级元素)(IE6-不支持)

p:first-letter{color: red;}    

  【9.2】:first-line 设置首行样式(只能用于块级元素)(IE6-不支持)

p:first-line{color: red;}    

  【9.3】:before 在元素内容前面插入内容(IE7-不支持)

p:before{content:"text"}

  【9.4】:after 在元素内容后面插入内容(IE7-不支持)

p:after{content:"text"}

  [注意]所有伪元素都必须放在出现该伪元素的选择器的最后面。因此,如果写成 p:before em 就是不合法的

 

好的代码像粥一样,都是用时间熬出来的

相关文章推荐

css3选择器简介大全

CSS3分类一、基本选择器 二、层次选择器三、伪类选择器(伪类选择器语法书写时和其他的CSS选择器写法有所区别,都以冒号(:)开头;)1、动态伪类选择器 2、目标伪类选择器 3、语言伪类选择器 语法...

CSS选择器大全

选择器在CSS中的重要性毋庸置疑。自从CSS1开始,选择器就已经存在,下面先把CSS1的选择器列出来,然后再列出CSS2.1基于CSS1新增或加强的,最后是CSS3中的选择器。這样也可以有种层次感,便...

css选择器大全

选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素。 1 #id #firs...

CSS选择器大全

通配符选择器   通配符选择器可代表给所有的标签添加样式   *{   margin:0px;   Padding:0px;   }   class选择器  ...

CSS选择器2

后代选择器,子元素选择器,并选择器,通配符选择器,兄弟选择器,伪类、伪元素选择器

WEB前端 | HTML基础——(2)CSS标签、边框、内外边距及选择器

一、组合标签 组合标签 有序列表1 有序列表2 有序列表3 有序列表4 无序列表 无序列表 ...

基于Beautiful Soup 4.2.0文档的学习记录(2)——CSS选择器

注:配合chrome浏览器检查元素功能效果更佳 Beautiful Soup支持大部分的CSS选择器,在 Tag 或 BeautifulSoup 对象的 .select() 方法中传入字符串参数,即可...

css2的几种特殊选择器

以下均支持IE6以上版本的浏览器1、属性选择器 为带有 title 属性的所有元素设置样式: [title]{color:red;} 为 title=”qjyue77” 的所有元素设置样式: [tit...

CSS2/3选择器详细总结

CSS2/3选择器详细总结 CSS选择器笔记 阮一峰 整理 参考网址:456 Berea Street 一、基本选择器 序号 选择器 ...

CSS笔记2-样式选择器

css样式选择分为:标签选择器,类选择器 和 id选择器,子选择器,包含选择器,通用选择器,伪类选择符,分组选择符 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的、、、、。例...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)