web前端开发的点点滴滴---4.CSS选择器

来源：互联网发布：cf淘宝特卖编辑：程序博客网时间：2024/04/28 13:21

CSS选择器

CSS选择器是CSS中最重要的部分，在外联样式和内联样式中，只有选择器写正确了才能对想要的html元素的样式赋值。CSS选择器有7种常用类型，分别为标签选择器、ID选择器、类选择器、属性选择器、伪类选择器、后代选择器、和选择器分组。选择器之间可以相互组合从而选择拥有复杂层次的html元素。

标签选择器

选择特定标签，如下：

外链样式或内联样式:

div { /*选择所有div元素*/}span { /*选择所有span元素*/color:blue;}div span { /*选择所有在div里面的span元素*/color:red}

html代码:

<div><!-- 这个div里的span标签会被"span"和"div span"选择器选择到，所以他是红色的  -->  <span>red</span></div><div><!-- 这个div里的span标签会被"span"和"div span"选择器选择到，所以他是红色的  -->  <span>red</span>  <span><span></span></span></div><span>blue</span><!-- 这个span标签会被"span"选择器选择到，但不会被"div span"选择到，所以他是蓝色的  -->

ID选择器

选择特定id属性的元素，如下：

外链样式或内联样式:

#text  { /*选择id为text的元素*/  color:red;}

html代码:

<div id="titlle">标题</div><div id="text">内容</div> <!--"#text"选择器会选到这个div元素-->

类选择器

选择特定class属性的元素与id选择器类似但是一个元素可以同时设置多个类，如下：

外链样式或内联样式:

.red  { /*选择class为red的元素*/  color:red;}

.blue { /*选择class为blue的元素*/  color:blue;}

html代码：

<div>重要的事<span class="blue">说</span><!-- 这个里是蓝色 --><span class="red">3遍</span><!-- 这个里是红色 --></div>

属性选择器

选择拥有特定属性的元素

外链样式或内联样式:

[index] {/*选择拥有index属性的元素*/ background: red;}[index=0] { /* 选择index属性为0的元素*/ background:blue;}[href*=javascript] { /*选择href属性包含javascript的元素*/ background:orange;}/*"[id=aa]"的效果和"#aa"一样， [class=aa]的效果与.aa一样（如果class只有aa一个值的话）*//*其他选属性择器请参考 http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp */

html代码：

<div index="0" >我是0</div>  <!-- 此元素被[index=0]选中，为蓝色--><div index="1" >我是1</div> <!-- 此元素被[index]选中，为红色--><a href="javascript:" >A标签javascript</a>  <!-- 此元素为橘黄--><a href="http://xxx.xxx.xxx" >A标签http</a>

伪类选择器

选择某些特殊元素，如第一节点元素(first-child)，最后一个节点元素（last-child），鼠标移过时的元素(hover)，鼠标按下还未释放时的元素(active)，拥有焦点的元素(:focus)。

外链样式或内联样式:

span:first-child {  /* 这是选择器组合，表示选择既符合"span"标签选择器又符合"first-child"伪类选择器的元素(div也符合:first-child标签，所有要限定为span元素才能看出效果)*/ background: red;}span:last-child { background:blue;}a:hover {  /* 选择鼠标覆盖着的a标签（不单独选择a的话所有元素都会变色，看不出效果）*/ color:red} a:active {   /* 选择激活状态的a标签*/ color:orange;}/*其他伪类选择器参考 http://www.w3school.com.cn/cssref/css_selectors.asp */

html代码：

<div> <span>第一个元素span</span>  <!--红色--> <a href="javascript:">hover,active伪类</a> <!-- 鼠标移过时为红色，按下时为橘黄--> <span>最后一个元素span</span><!--蓝色--></div>

选择器组合

通过多种选择器对所选元素进行过滤。

外链样式或内联样式:

a#index { /*选择a标签并且id等于index*/ color: blue;}a#help {/*选择a标签并且id等于help*/ color:orange;}div.title {/*选择div并且含有title类*/ color:red}div.text {/*选择div并且含有text类*/ color:grey}/*同时将"div"、".code"、".js"、"[name=aa]"、"[index=0]"、":hover"、"#code" 组合在一起使用*/div.code.js[name=aa][index=0]:hover#code { /*选择器可以象这样任意组合，可以根据需要自己组合使用。！！！要注意不能有空格，后面后代选择器会讲到。*/}

html代码：

<a id="index">我是index</a> <!-- 蓝色 --><a id="help">我是help</a> <!-- 橘黄 --><a id="title">我是title</a> <!-- 红色 --><a id="text">我是text</a> <!-- 灰色 -->

后代选择器

通过限定祖先元素来选择，通过空格来分割祖先元素和后代元素，可以通过“>”来限定选择子元素。

外链样式或内联样式:

article .title  {  /* ".article" 为祖先元素， ".title"为后代元素，之间用空格隔开 */ color:red;}.article .title i { /* 选择".article"下的".title"下的em*/ font-size:smaller;}body > div { /* 通过 ">" 来限制选择子节点元素，这里选择body的第一个子节点元素并且是div */ border: 1px solid red;}

html代码：

<body> <div> <!-- 这个div会被加上红色边框 -->  <div class="title">我是网页<i>title</i></div><!-- 黑色，title一样大 -->  <div class="article">    <div class="title">我是文章<i>title</i></div> <!-- 红色，title较小 -->  </div> </div></body>

选择器分组

可以用逗号分割选择多个元素，为多个元素设置同一样式时十分有用

外链样式或内联样式:

strong,em,i,.title,.bold,.label,.tag { font: inherit; font-weight:bold;}.name em,.addr em {color:red}

html代码：

<em>我是粗体</em><i>我也是粗体</i><div class="name"> 广西<em>桂林</em> <!--桂林是红色的--></div>

更多选择器可以参考w3cschool: http://www.w3school.com.cn/cssref/css_selectors.asp

0 0