* | E | .class |
#id | EF | E>F |
E+F | E[attribute] | E[attribute=value] |
E[attribute~=value] | E[attribute | = value] | :first-child |
E[attribute^=value] | E[attribute$=value] | E[attribute*=value] |
:lang() | :before | :after |
:first-letter | ::before | ::after |
::first-letter | :first-line | ::first-line |
E~F | :root | :last-child |
:only-child | :nth-child() | :nth-last-child() |
:first-of-type | :last-of-type | :only-of-type |
:nth-of-type() | :nth-last-of-tyle() | :empty |
:not() | :target | :enable |
:disabled | :checked |
为了更好的说明问题,先创建一个简单的DOM结构,如下:
<div class="demo">
<ul class="clearfix">
<li id="first" class="first">1</li>
<li class="active important">2</li>
<li class="important items">3</li>
<li class="important">4</li>
<li class="items">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li id="last" class="last">10</li>
</ul>
</div>
一、通配符选择器(*)
通配符选择器是用来选择所有元素,,也可以选择某个元素下的所有元素。如:
*{ marigin: 0; padding: 0; }
上面代码大家在reset样式文件中看到的肯定不少,他所表示的是,所有元素的margin和padding都设置为0,另外一种就是选择某个元素下的所有元素:
代码如下:
二、元素选择器(E)
元素选择器,是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素,如html,body,p,div等等,比如我们这个demo:中元素包括了div,ul,li等。
类选择器是以一独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,换句话说需要保证类名在html标记中存在,这样才能选择类,如:
<li class="active important items">2</li>
共中“active,important, items”就是我们以类给li加上一个类名,以便类选择器能正常工作,从而更好的将类选择器的样式与元素相关联。
.important {font-weight: bold; color: yellow;}
上面代码表示是给有important类名的元素加上一个“字体为粗体,颜色为黄色”的样式;
.important {font-weight: bold;}
.active {color: green;background: lime;}
.items {color: #fff;background: #000;}
.important.items {background:#ccc;}
.first.last {color: blue;}
正如上面的代码所示,".important.items"这个选择器只对元素中同时包含了"important"和"items"两个类才能起作用. 所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持。
五、后代选择器(E F)
后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素,比如说:E F,前面E为祖先元素,F为后代元素,所表达的意思就是选择了E元素的所有后代F元素,请注意他们之间需要一个空格隔开。这里F不管是E元素的子元素或者是孙元素或者是更深层次的关系,都将被选中,换句话说,不论F在E中有多少层关系,都将被选中:
.demo li {color: blue;}
上面表示的是,选中div.demo中所有的li元素
六、子元素选择器(E>F)
子元素选择器只能选择某元素的子元素,其中E为父元素,而F为子元素,其中E>F所表示的是选择了E元素下的所有子元素F。这和后代选择器(E F)不一样,在后代选择器中F是E的后代元素,而子元素选择器E > F,其中F仅仅是E的子元素而以。
ul > li {background: green;color: yellow;}
上在代码表示选择ul下的所有子元素li。如:
IE6不支持子元素选择器。
七、相邻兄弟元素选择器(E + F)
相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。
上面代码表示选择li的相邻元素li,我们这里一共有十个li,那么上面的代码选择了从第2个li到 10 个li,一共九个
IE6不支持这个选择器
八、通用兄弟选择器(E 〜 F)
通用兄弟元素选择器是CSS3新增加一种选择器,这种选择器将选择某元素后面的所有兄弟元素,他们也和相邻兄弟元素类似,需要在同一个父元素之中,换句话说,E和F元素是属于同一父元素之内,并且F元素在E元素之后,那么E ~ F 选择器将选择中所有E元素后面的F元素。比如下面的代码:
上面的代码所表示的是,选择中了li.active 元素后面的所有兄弟元素li
九、群组选择器(selector1,selector2,...,selectorN)
群组选择器是将具有相同样式的元素分组在一起,每个选择器之间使用逗号“,”隔开,如上面所示selector1,selector2,...,selectorN。这个逗号告诉浏览器,规则中包含多个不同的选择器,如果不有这个逗号,那么所表达的意就完全不同了,省去逗号就成了我们前面所说的后代选择器,这一点大家在使用中千万要小心加小心。我们来看一个简单的例子:
因为li.first和li.last具有相同的样式效果,所以我们把他们写到一个组里来.
相关推荐
CSS的基本选择器.pdf 学习资料 复习资料 教学资源
CSS基本选择器实用PPT课件.pptx
基本涵盖了CSS 2和CSS 3的所有规定。
CSS基本选择器实用PPT学习教案.pptx
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器;第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器,这一部分也是最难理解和掌握的部分,今天我们先来看第一部分——...
CSS基本选择器实用学习教案.pptx
java教程超全面javaweb教程28天day2-_05_css的基本选择器
css3基本选择器、font中字体的设置属性、text系列的设置属性、颜色表示方法、盒子的基本结构以及模型
介绍CSS选择器,包含基本选择器,复合选择器,属性选择器,关系选择器,伪类选择器和伪元素选择器,首先以鱼骨图展示方便记忆
java教程超全面javaweb教程28天day2-_06_css的基本选择器的优先级
CSS基本选择器资料实用PPT学习教案.pptx
上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器
css选择器的一些基本使用和用法
基本样式和选择器(权重优先级)以及复合选择器
一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 选择指定ID属性值为“id”的任意类型的元素 .class 类选择器 选择...
今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定。 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class...
去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。...一、基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info cl
前两天看文档看到选择器那块儿的时候,前面4个基本都能理解:.class,#id,element,element, element,但后面两个::after和::before(文档中说,分别表示在view 组件的后面和前面插入内容),表示有点没有理解。...