CSS选择器
id选择器(#id)
使用ID选择器之前需要先在html文档中的元素添加id名称,这样在样式选择器中才能找到相对应的元素,不同的是id选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id)。
类选择器(.className)
类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在,这样才能选择类。
元素选择器(E)
元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等。
群组选择器(selector1,selector2,...,selectorN)
群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开,如上面所示selector1,selector2,...,selectorN。这个逗号告诉浏览器,规则中包含多个不同的选择器,如果不有这个逗号,那么所表达的意就完全不同了,省去逗号就成了我们前面所说的后代选择器。
通用兄弟选择器(E 〜 F)
通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。
相邻兄弟元素选择器(E + F)
相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。
子元素选择器(E>F)
子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E > F,其中F仅仅是E的子元素而以。
后代选择器(E F)
后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中:
通配符选择器(*)
通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。
伪类选择器
这里只是列举了几个比较常用的伪类,要知道怎么用的话,可以去查查资料。
:link:未访问的链接;
:visited:已访问的链接,不建议使用;
:hover:鼠标移动到容器,不仅限于链接,可用于页面中的任何元素;
:active:被激活时的状态,不仅限于链接,可用于任何具有tabindex属性的元素;
:focus:获得焦点时状态,不仅限于链接,可用于任何具有tabindex属性的无线:
:enabled:已启用的界面元素:
:disabled:已禁用的界面元素:
:target:该选择器定位当前活动页面内定位点的目标元素:
E:first-child 匹配父元素中的第一个子元素E,例如ul li:first-child{color:red}
E:last-child 匹配父元素中的最后一个子元素E,例如ol li:first-child{color:red}
E:nth-child(n) 先对父元素中的所有的元素排序,并选中第n个,然后再将E元素和选中的第n个元素类型进行比对,相同则成功作用给样式,否则,就不会产生任何的变化。
E:nth-of-type(n) 对父元素中指定的子元素进行排序选择,先匹配和E元素相同类型的元素,之后再去匹配第n个。
伪元素选择器
生成的元素是属于父元素的子元素,并且是行内元素,但是在文档树中却是找不到的,所以称之为伪元素。伪元素使用双冒号 :: 定义,但单冒号 : 也能被识别,因为单冒号是css2中原来使用的语法格式。这里也只是列举了几个常用的。
::first-line:匹配文本首行;
::first-letter:匹配文本首字母;
::before 与 ::after :使用 contnet 属性生成额外的内容并插入在标记中:这里的content是必须要有的属性。
::selection:匹配突出显示的文本:
属性选择器
E[attr]:该选择器定位具有属性attr的任何元素E:
E[attr=val]:该选择器定位具有属性attr且属性值为val的任何元素E:
E[attr|=avl]:该选择器定位具有属性attr且属性值为val或以val-开始的任何元素E:
E[attr~=val]:该选择器定位具有属性attr且属性值为完整单词 val 的任何元素E:
E[attr^=val]:该选择器定位具有属性attr且属性值以val开头的任何元素E:
E[attr$=val]:该选择器与E[attr^=val]正好相反,定位具有属性attr且属性值以val结尾的任何元素E:
E[attr*=val]:该选择器与E[attr~=val]相似,但更进一步,定位具有属性attr且属性值任意位置包含val的元素E,val可以是一个完整的单词,也可以是一个单词中的一部分:
权重的计算规则如下:
- 属性后面使用!important,权重最大,会覆盖页面内任何位置定义的元素样式。
- 第一等:代表行内样式(内嵌样式), 如: style=””,权值为1000。
- 第二等:代表ID选择器,如:#content,权值为0100。
- 第三等:代表类选择器,伪类选择器和属性选择器,如.content,权值为0010。
- 第四等:标签选择器和伪元素选择器,如div p,权值为0001。
- 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
- 继承的样式没有权值。
CSS样式的引入有三种方式,行内样式(内嵌样式),内部样式(内联样式),外部样式(外联样式)。
- 其权重为 行内样式>内联样式>外联样式 行内样式:
<div style=''></div>
内联样式:<head><style>#id{...}<style></head>
外联样式:<link href="css文件路径" rel="stylesheet">