CSS学习之选择器

html是盖房子，css是将房子装扮的更漂亮一些！CSS（Cascading Style Sheets），值层叠样式表。

语法

选择器 { 属性 : 属性值 ; }

比如， p{color:red;}

css选择器，用于选择需要添加样式的元素，可以分为标签选择器、class选择器、id选择器、属性选择器、伪类、伪元素选择器、组合选择器等等（本文主要说这几个选择器）。

标签选择器

p{color:#f00;}

h1{font-size:20px;}

标签选择器即是html的元素标签直接作为css选择器使用，就像上面的p和h1

class选择器

<style type="text/css">

.tex{color:#000;}

</style>

<div class="tex">

  <p>这是第一段文字</p>

  <p>这是第二段文字</p>

  <p>这是第三段文字</p>

</div>

class选择器为具有特定的一类的元素指定样式。在class名前用“.”来作为类选择器的标识。

id选择器

class选择器为标有特定id的HTML元素指定特定的样式。在class名前用“#”来作为类选择器的标识。id具有唯一性。

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

<input type="text" disabled />

如果要为 input 加一个蓝色边框，可以写这样的css

[disabled]{border:1px solid #00f;}    选择带有 disabled 属性的所有元素  [属性值]

也可以这样写

[type=text]{border:1px solid #00f;}   用完整的属性和属性值来选择需要改变的元素  [属性=属性值]

如果元素中的类名是个列表，可以使用属性选择器选择其中的一个，

<p class="one two">第一段</p>

<p class="two">第二段</p>

[class~=one]{color:#f00;}            [属性~=属性值]   属性值中包含“one”单词的所有元素

还有以下几种属性用法

<a class="en" href="http://www.cnblogs.com">博客园</a>

<a class="en-h" href="www.w3cschool.cn">W3Cschool</a>

<a class="en bai" href="http://www.baidu.com">baidu</a>
<a href="http://www.cnblogs.com/yunmengshu">我的博客</a>

[class|=en]{color:#ccc;}    [属性|=属性值]  属性值中以en开头的所有元素，en后面必须跟“-”中划线或者不跟任何的字符，不然无法找到，例子中的只有前面两个a标签的文本变为灰色

[href^=http]{color:#f00;}   [属性^=属性值]  属性值中以http开头的所有元素，只要是以http开头的就可以，例子中第一个和第三个变为红色

[href$=com]{color:#f00;}    [属性$=属性值]  属性值中以com结尾的所有元素

[href*="www.cnblogs.com"]{color:#f00;}    [属性*=属性值]   属性值中包含“www.cnblogs.com”的所有元素

伪类

a:link 超链接默认样式，未被访问

a:visited 被访问过的超链接样式，visited 和 link 只能用于<a>标签

:hover 鼠标滑过时显示的样式

:active 鼠标点击时显示样式，active 和 hover 不止用于<a>标签，还可以用于其他元素

如果要设置<a>标签的四个时间的样式，顺序一定要是 link 、visited 、hover 、active

还有两种伪类非常的相像，需要配合记忆，那就是 :nth-child 和 :nth-of-type()

<body>

<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

  <li>6</li>

  <li>7</li>

  <li>8</li>

</ul>

<p>这是一段话</p>

</body>

/*

 li:first-child{color:red;}            li 的父元素中第一个子元素存在且必须为 li 元素, ul 的第一个子元素 li 才会变成红色    
 li：last-child{color:red;}            li 的父元素中最后一个子元素必须为li 元素才可以

 li:nth-child(2n+1){color:#00f;}       “2n+1”可以换位其他的运算式，“2n”、"3n"、"3n+1"等等都可以，还可以写奇（odd）偶（even）

 li:nth-last-child(even){background-color:#ccc;}    倒序

 ul:only-child{border:1px solid #00f;}              ul 的父元素中只有一个子元素，且为 ul 元素时，才会出现边框，如上面的HTML是不会出现边框的，因为body的子元素有两个：ul 和 p

*/

 li:first-of-type{color:#f00;}               li 的父元素中第一个为 li 的子元素
 li:last-of-type{color:#f00;}                li 的父元素中最后一个为 li的子元素

 li:nth-of-type(even){color:#f00;}

 li:nth-last-of-type(odd){color:#00f;}

 ul:only-of-type{border:1px solid #00f;}     ul 的父元素中可以有多个元素，但是只有一个 ul 元素的时候才可以显示边框，如上面的html中时会显示边框的

一定要区别 -child 和 -of-type 的不同

还有其他的伪类

:root 选择根元素，即html

:not() 选择除（）中元素之外的所有元素

:empty 选择空元素的元素

:enabled 启用

:disabled 禁用

还有其他的就不一一说了

伪元素

::first-letter 设置文本的第一个字的样式

::first-line 设置文本的第一行的样式

::before 在元素前插入内容如，p::before{content:"新段落";}

::after 在元素后插入内容和before一样

::selection web页面上选中文本后的样式

组合选择器

<div>

  <h1>head</h1>

  <p>我是第一个段落</p>

  <p>我是第二个<span>段落</span></p>

  <p>我是第三个段落</p>

</civ>

后代选择器以空格分隔，如

div p{color:red;}    div 是 p 的父元素

子元素选择器以“>”分隔，如

div>p{color:red;}    p 必须是 div 的直接子元素，不可以是孙元素,即不可以是 div>span ，这样写是无法显示 span 的样式的

相邻兄弟选择器以“+”分隔，

h1+p{color:red;}     选中 h1 后面相邻元素，且必须为 p 元素

如果要选择 h1 后面的所有 p 元素，该怎么办呢？用相邻兄弟选择器“~”

h1~p{color:red;}    选中 h1 后面所有的 p 元素

h1 和 p 元素的样式设置一样的情况下，可以合并起来一起写，选择器之间用“,”逗号隔开

h1{color:#f00;}

p{color:#f00;}

/* 可以合并选择器 */

h1,p{color:#f00;}

秒客网