当前位置:Gxlcms > html代码 > Kidney自得其乐版CSS教程Chapter1Selector_html/css_WEB-ITnose

Kidney自得其乐版CSS教程Chapter1Selector_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:19人阅读

Chapter 1 Selector 选择器

Version

Update

Note

1.0

2016-5-28

首次添加。欢迎在评论中指出错误,一经核实,立即修订,且注明贡献者。

图例:CSS3以前版本 CSS3中浏览器普遍支持的属性 CSS3中未被普遍支持的属性

1、元素选择器

1.1 *

  通配符,表示所有元素

1.2 element

2、class和id

2.1 .className

2.2 #id

  在单个文档中指定唯一的元素。

  id可用于锚链接。例如:

  click me

  

  点击click me,页面会跳转到锚链接的位置,并且文档的url后添加了#hi

  file:///C:/Users/kidney/Desktop/demo.html#hi

  此时div成为了目标元素,可以被div:target伪类选中。

3、关系选择器

3.1 E F

  选择E后代中所有的F

3.2 E>F

  选择E直接子代中所有的F

3.3 E~F

  选择E兄弟元素中所有的F

3.4 E+F

  选择紧跟E后面的兄弟元素F

4、属性选择器

4.1 selector[attrName]、selector[attrName = "value "]

  这是基本格式。attrName可以是自定义属性。

4.2 ~=

  选择属性值中包含指定value的元素,value指向一个完整的单词。~=表示"含有"。

4.3 *=

  选择属性值中包含指定value的字符串的元素。

  

  div[*= "a"] //有效

  div[*= "ef"] //有效

4.4 ^=

  选择属性值为以指定value开头字符串的元素。^=表示"以…开头"。

  注意:只针对第一个属性值。例如:

  

  div[name ^= "ab"] //有效

  div[name ^= "de"] //无效

  下同。

4.5 $=

  选择属性值为以指定value结尾字符串的元素。$=表示"以…结尾"。

4.6 |=

  选择属性值为以指定value开头且用-分隔的字符串的元素。

  

  div[name |= "ab"] //有效

  div[name |= "a"] //无效

  div[name |= "de"] //无效

5、伪类选择器

5.1 子元素序列

E:first-child E:last-child E:nth-child(n) E:nth-last-child(n) E:only-child

E:first-of-type E:last-of-type E:nth-of-type(n) E:nth-last-of-type(n) E:only-of-type

nth-child(n)中的n可以是正整数、关键字even(偶)和odd(奇)和含n表达式如2n、2n+1、3n-2等。n是以1、2、3 … 的方式递增的,如果计算出的值小于等于0,会被自动忽略。nth-last-child(n)只是从子元素序列倒着数,别无二致。

  这里所谓子元素,仅仅是要求E必须具备父元素,从用法来看它们更像是兄弟元素的选择器。-child是这样解析的:首先在同级元素中找到第n个元素,然后看该元素是否与E相匹配。匹配,则选择成功,不匹配,则丢弃。-type解析的方式刚好相反,首先在同级元素中找到所有匹配E的元素,然后再在其中选择第n个。

  :only-child的解析规则是如果E是父元素唯一的子元素,则匹配成功;:only-of-type的解析规则是E是父元素唯一的该类(element type)子元素,则匹配成功。

  

  

  

  

  p:only-child //无效

  p:only-of-type //有效

5.2 无后元素

  :empty 选择没有后代(包括文本节点、 占位符以及空格)的空元素。

  

  

  p:empty //无效,跨行表示有空格,空格也属于文本节点

5.3 超链接爱恨四君子

  :link :visited :hover :active

分别代表a元素访问前、已访问、鼠标悬停和被点击时的状态。必须按此顺序设置,提取首字母,可简记为love&hate。

  :hover被广泛运用在任何元素的悬停事件上。

5.4 表单状态

  :focus 表示文本框获得输入光标事件。

  :checked 表示单选按钮和复选框的选中事件。

  :enabled 表示可用状态的表单元素。

  :disabled 表示禁用状态的表单元素。

5.5 排除

  E:not(S) 表示在E元素集中排除S选择器所匹配的元素后剩余的元素。

6、伪对象选择器(又称伪元素)

6.1 E::before E::after

CSS3中用双冒号以与伪类相区别,但也支持用单冒号。

  before和after用于在E的内容前和内容后生成新的内容。

  它们的用法早已超越了仅仅是在首尾添加文本内容,它们可以用来生成几乎任何新的html结构。

6.2 E::first-letter E::first-line

它们只适用于块级元素。

  first-letter常用于设置传统印刷媒体中文本首字下沉效果。

6.3 E::selection

  用于设置文本被选择时的样式。

6.4 E::input-placeholder E::placeholder

  用于设置表单中占位文字的样式。需要加浏览器前缀。

  只有火狐用placeholder,其它浏览器都用input-placeholder

7、选择器的层级

CCS全称是层叠样式表,其"层叠"就体现在选择器的优先级上,优先级高的覆盖优先级低的。优先级的高低依据的是"确切性、特殊性"(specification),具体遵循以下三个程序:

  一、声明的来源

  用户的重要声明>开发者的声明>用户的正常声明>浏览器的默认声明

  二、在开发者的声明中通过累计权重值判断优先级

类型(从高到低)

权重

说明

重要声明

无限大

!important

内联声明

1000

style

id选择器

100

#id

class、属性选择和伪类

10

元素和伪对象

1

通配符

0

继承

无比0还小

  三、如果累计权重值一样,则按先后顺序确定优先级

  1、内部样式表(