CSS选择器

原创 15038098692 随笔 随笔 56阅读 24 天前 举报

一.把CSS选择器分开成三部分,
第一部分是我们常用的部分,我把他叫做基本选择器;
第二部分我把他称作是属性选择器,
第三部分我把他称作伪类选择器。

一.CSS3 选择器——基本选择器、
一、通配符选择器(*)
通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。
二、元素选择器(E)
元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等,比如我们这个demo:中元素包括了div,ul,li等。
三、类选择器(.className)
类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在,这样才能选择类,
四、id选择器(#ID)
ID选择器和上面说的类选择器是很相似的,在使用ID选择器之前也需要先在html文档中加注ID名称,这样在样式选择器中才能找到相对应的元素,不同的是ID选择器是一个页面中唯一的值,我们在类使用时是在相对应的类名前加上一个“.”号(.className)而id选择器是在名称前使用"#"如(#id),
五、后代选择器(E F)
后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中:
.demo li {color: blue;}
六、子元素选择器(E>F)
子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E > F,其中F仅仅是E的子元素而以。
ul > li {background: green;color: yellow;}

七、相邻兄弟元素选择器(E + F)
相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。
八、通用兄弟选择器(E 〜 F)
通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。比如下面的代码:
九、群组选择器(selector1,selector2,...,selectorN)
群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开,如上面所示selector1,selector2,...,selectorN。这个逗号告诉浏览器,规则中包含多个不同的选择器,如果不有这个逗号,那么所表达的意就完全不同了,省去逗号就成了我们前面所说的后代选择器,这一点大家在使用中千万要小心加小心。

二.CSS3 选择器——属性选择器

  1. E[attr]:只使用属性名,但没有确定任何属性值;
  2. E[attr="value"]:指定属性名,并指定了该属性的属性值;
  3. E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写;
  4. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
  5. E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
  6. E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
  7. E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn)

三.CSS3 选择器——伪类选择器
1.、动态伪类
· :hover用于当用户把鼠标移动到元素上面时的效果;
· :active用于用户点击元素那一下的效果(正发生在点的那一下,松开鼠标左键此动作也就完成了)
· :focus用于元素成为焦点,这个经常用在表单元素上。
2、UI元素状态伪类
我们把":enabled",":disabled",":checked"伪类称为UI元素状态伪类,这些主要是针对于HTML中的Form元素操作,最常见的比如我们"type="text"有enable和disabled两种状态,前者为可写状态后者为不可状态;另外"type="radio"和"type="checkbox""有"checked"和"unchecked"两种状态。来看两个实例,比如说你想将"disabled"的文本框与别的文本框区别出来,你就可以这样应用
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
3、CSS3的:nth选择器
这节内容才是关键,也是CSS3选择器最新部分,有人也称这种选择器为CSS3结构类,下面我们通过实际的应用来具体了解他们的使用和区别,首先列出他具有的选择方法:

1.:first-child选择某个元素的第一个子元素;
2:last-child选择某个元素的最后一个子元素;
3.:nth-child()选择某个元素的一个或多个特定的子元素;
4.:nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
5.:nth-of-type()选择指定的元素;
6.:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
7.:first-of-type选择一个上级元素下的第一个同类子元素;
8.:last-of-type选择一个上级元素的最后一个同类子元素;
9.:only-child选择的元素是它的父元素的唯一一个了元素;
10.:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
11.:empty选择的元素里面没有任何内容。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复