选择器

CSS中有7种选择器：

1、元素选择器

例如：

h1{

font-size:12px;

}

h2,h3,h4{

font-size:23px;

}

<h1>helloworld</h1>

<h2></h2>

...

2、类选择器：

例如：

.important{

 background-color:red;

}

/*只有包含important 和 warning两个类的元素才会被选中*/

.important.warning{

background-color:sliver;

}

<p class="important">hw</p> <!--背景颜色为红色-->

<p class="important warning">hw</p><!--背景颜色为银色-->

3、ID选择器：

例如：

#name{

font-size:1.2em;

}

/*通配将会被忽略*/

*#name{

font-size:1.2em;

}

<input id="name"  type="text" /><!--字体1.2倍当前字体-->

ID选择器和类选择器的区别：

a、ID选择器只能在一个HTML文档中使用一次

b、 ID选择器不能结合使用

4、 属性选择器：

例如：

a[title]{

color:red;

}

<a title="1" href="1.html">1</a><!--颜色变红-->

<a href="2.html">2</a> <!--颜色无变化-->

/*根据多个属性进行选择*/

a[title][href]

/*根据具体值选择*/

a[href="1.html"]{

color:blue;

}

<a href="1.html">A</a><!--会被选中-->

<a href="2.html">B</a><!--不会被选中-->

/*多个属性值具体值匹配选择*/

a[href="1.html"][title="1"]

/*属性值必须完全匹配*/

p[class="important warning"]{

 background-color:red;

}

<p class="important warning">D</p>

/*根据部分值选择*/

/*将只选择class中包含important的标签*/

p[class~="important"]

img[title~="Figure"]{

border:1px solid gray;

}

<img title="Figure 1"  src="1.jpg"/><!--会被选中-->

<img src="2.jpg" /><!--不会被选中-->

/*子串匹配属性选择器*/

[abc^="def"] /*abc属性以def开头的*/

[abc$="def"]/*abc属性以def结尾的*/

[abc*="def"]/*abc属性包含def的*/

[attribute|=value]    /*用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。*/

5、后代选择器：

例如：

h1 em {color:red;}

<h1>This is a <em>important</em> heading</h1> <!--红色-->

<p>This is a <em>important</em> paragraph.</p>

如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

6、子元素选择器：

h1 > strong {color:red;}

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <!--红色-->

<h1>This is <em>really <strong>very</strong></em> important.</h1>

7、相邻兄弟选择器：

例如：

li + li {font-weight:bold;}

<div>

  <ul>

    <li>List item 1</li>

    <li>List item 2</li><!--被选中-->

    <li>List item 3</li> <!--被选中-->

  </ul>

  <ol>

    <li>List item 1</li>

    <li>List item 2</li> <!--被选中-->

    <li>List item 3</li> <!--被选中-->

  </ol>

</div>

<!-- 上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。 -->

伪类选择器：

锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}        /* 未访问的链接 */ a:visited {color: #00FF00}    /* 已访问的链接 */ a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */ a:active {color: #0000FF}    /* 选定的链接 */

亲自试一试

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

来源： http://www.w3school.com.cn/css/css_pseudo_classes.asp

伪元素：

http://www.w3school.com.cn/css/css_pseudo_elements.asp

 

a:visited:hover{color:red}

UI元素状态伪类：

:enabled，:disabled，:checked （IE6-8不支持）

例如：type="text" 对应enabled 和 disabled

type="raido" 和 type="checkbox" 对应 checked 和 unchecked两种状态。

css3的:nth选择器

:fist-child选择某个元素的第一个子元素； :last-child选择某个元素的最后一个子元素； :nth-child()选择某个元素的一个或多个特定的子元素； :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； :nth-of-type()选择指定的元素； :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算； :first-of-type选择一个上级元素下的第一个同类子元素； :last-of-type选择一个上级元素的最后一个同类子元素； :only-child选择的元素是它的父元素的唯一一个了元素； :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素； :empty选择的元素里面没有任何内容。
 

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/iceseal/p/3858832.html