CSS样式设计基础（二）——CSS选择器

浏览数：29 / 时间：2015年06月09日

1.标签选择器

最常用的选择器类型，用来寻找特定类型的元素，如段落、超链接、标题元素等。对于div、span等通用结构元素，不建议使用标签选择器。

<title>CSS选择器</title>
<style type="text/css">
p{ color:red;}
a{ text-decoration:underline;}
h1{ font-weight:bold;}
</style>
</head>
<body>
<p>hello world</p>
<a>hello world</a>
<h1>hello world</h1>
</body>
</html>

2.ID选择器

ID选择器使用“#”前缀标识符进行标识，后面紧跟着指定元素的ID名称。ID元素是惟一的，只能对应于文档的一个具体元素，固定的，不会重复的，如Logo包含框、导航条、主题包含框、版权区域。

<title>CSS选择器</title>
<style type="text/css">
 #error{background-color:red;}
</style>
</head>
<body>
<div id="error">Error</div>
<div>hello world</div>
</body>
</html>

　　技术分享

3.类选择器

类选择器使用“,”（英文点号）进行标识，后面紧跟类名。

注意点：

1、类选择器与ID选择器在同等条件下，ID选择器比类选择器具有更大的优先权

2、标签选择器适合为元素定义全局显示属性，类选择器更适合定义类样式。类选择器定义后会对页面中的同一个元素产生影响。而类选择器具有更大的机动性。

<title>CSS选择器</title>
<style type="text/css">
 .errorbyclass{ background-color:#F63}
  #error{background-color:red;}
</style>
</head>
<body>
<div id="error" class="errorbyclass">Error</div>
</body>
</html>

　　技术分享

4.伪类和伪对象选择器

伪选择器包含伪类选择器和伪对象选择器，以冒号（:）做为前缀，冒号后紧跟伪类或伪对象名称，冒号前后没有空格，否则将解析为包含选择器

6种伪类选择器：

:focus ，定义对象在成为输入焦点时样式

:first-child，定义对象的第一个子对象的样式

:first，定义页面容器第一页使用的样式，仅适用于@page规则

:left，定义页面容器位于装订线左边的所有页面样式，仅适用于@page规则

:right，定义页面容器位于装订线右边的所有页面样式，仅适用于@page规则

:lang，定义对象使用特殊语言内容的样式

4种伪对象选择器

:after,与content属性一起使用，定义在对象后的内容

:before,与content属性一起使用，定义在对象前的内容

:first-letter 定义对象内的第一个字符样式

:first-line 定义对象内第一行的样式

<title>CSS选择器</title>
<style type="text/css">
 a:link{ color:#3F9;}/*代表未访问过的超链接样式*/
 a:visited{ color:#0FF}/*代表访问后的颜色*/
 a:active{ color:#FF6}/*鼠标点击的眼色*/
 a:hover{color:#C3C}/*鼠标经过时的样式*/
</style>
</head>
<body>
  <a href="#">首页</a>
</body>
</html>

5.子选择器

子选择器中前后部分之间用一个大于号隔开，前后两部分选择符在结构上属于父子关系，左侧指定父元素，右侧指定子元素。

注意点：

子选择器只能控制最近的子元素，而包含选择器可以控制所有包含的元素

div>a只能使得数字2变红，而不能使用P下面的首页变红。故：子选择器中所控制的元素只能是“>”符号前面所指定对象的子元素

<title>CSS选择器</title>
<style type="text/css">
div>a{ background-color:red;}
</style>
</head>
<body>
  <div>
   <p>
   <a href="#">首页</a>
   </p>
  <a>2</a>
  </div>
</body>
</html>

　　技术分享

6.相邻选择器

相邻选择器前后部分之间用一个加号（+）隔开，前后两部分选择符在结构上属于同级关系。

<title>CSS选择器</title>
<style type="text/css">
#hello+p{ background-color:red;}
</style>
</head>
<body>
  <div id="hello">
   <p>
   <a href="#">首页</a>
   </p>
  </div>
  <p>哈哈</p>
</body>
</html>

　　技术分享

7.属性选择器

属性选择器使用中括号（[]）进行标识，中括号内包含属性名、属性值或者属性表达式，如h1[title]，选取含title属性的h1标签

<title>CSS选择器</title>
<style type="text/css">
h1[title]{ background-color:red;}
</style>
</head>
<body>
<h1 title="hah">1</h1>
<h1>2</h1>
</body>
</html>

　　技术分享

属性选择器的匹配方式有：

1.匹配属性名

2.匹配属性值

3.前缀匹配 [class^="My"]{...} 匹配 <div class="Mytest"></div>

4.后缀匹配[class$="My"]{...} 匹配<div class="HelloMy"></div>

5.模糊匹配[class*="est"]{...} 匹配<div class="Wahahest"></div>

下面在把鼠标移动到vs字样上面时，则显示小手？的字样。

<title>CSS选择器</title>
<style type="text/css">
div[title]:hover{ cursor:help;}
</style>
</head>
<body>
<div title="Visual Studio">vs</div>
<div>javascript</div>
</body>
</html>

8.通用选择器

最强大的选择器，也是使用比较少的。

*{....}

9.包含选择器

包含选择器中前后两部分以空格隔开，包含选择器根据左侧选择符指定祖先元素，然后在该元素下寻找匹配右侧选择的下级元素

<title>CSS选择器</title>
<style type="text/css">
div a{ background-color:red;}
</style>
</head>
<body>
<div title="Visual Studio">
  <a>1</a>
  <a>2</a>
</div>
</body>
</html>

　技术分享

10.分组选择器　

分组选择器不是选择器的一种类型，而是一种选择器的使用方式。当多个对象定义了相同的样式时，就可以把他们定义成一组。

<title>CSS选择器</title>
<style type="text/css">
h1,h2,h3,h4{ background-color:red;}
</style>
</head>
<body>
 <h1>1</h1>
 <h2>2</h2>
 <h3>3</h3>
 <h4>4</h4>
</body>
</html>

　　技术分享

11.指定选择器

有时候用户会希望控制某种元素在一定范围的样式，这时候可以把元素选择器、class选择器、id选择器结合起来。

<title>CSS选择器</title>
<style type="text/css">
h2#haha{ background-color:red;}
</style>
</head>
<body>
 <h1>1</h1>
 <h2 id="haha">2</h2>
 <h2>3</h3>
 <h4>4</h4>
</body>
</html>

　　技术分享