CSS选择器总结（代码实例+执行效果图）
2015-11-22 16:05
756 查看
一、标签选择器
我们一般声明或定义样式要用到如下格式的代码：
选择器{
CSS样式代码；
}
在'{'之前的就是CSS选择器，选择器确定了'{ }'中样式的作用对象，如下代码，“h1”就是选择器。确定了大括号内的样式作用对象就是h1标签，这也是一种最直接的选择器——标签选择器。
执行效果：
二、类选择器
我们除了可以选择文档标签作为选择器，也可以独立于文档元素来指定样式，这就需要用到——类选择器。
类选择器的语法是：
.类选器名称{
css样式代码;
}
执行效果：
三、ID选择器
与类选择器相似的还有——ID选择器。
ID选择器语法与类选择器稍有不同：
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）
#ID选择器名称{
CSS样式代码；
}
执行效果：
类选择器与ID选择器区别：
1、与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而类选择器可以使用多次。
下面这段代码就是正确的（类选择器使用了多次）：
执行效果：
下面这段代码就是错误的（ID选择器使用了多次）：
其实ID选择器可以使用无限次，但是一般都只会用一次 因为JS 经常利用ID来拿对象 如果一个页面出现了太多一样的ID 那么JS就不能用这个ID来拿对象了
2、我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的。
下面这段代码就是正确的（用类选择器为某个元素设置多个样式）：
执行效果：
下面这段代码就是错误的（用ID选择器为某个元素设置多个样式）：
四、子选择器
子选择器是一种很有用的选择器，多用于有标签嵌套的设置样式情况。
子选择器的语法：
.子选择器的名称>标签或其他选择器{ /*类选择器方式定义*/
CSS样式代码；
}
执行效果：
五、包含选择器
子选择器的样式作用对象是设置处后的第一代子元素，而与之对应，包含选择器的样式作用对象是设置出后的所有子代元素。
包含选择器的语法：
#包含选择器的名称>标签或其他选择器{ /*ID选择器方式定义*/
CSS样式代码；
}
执行效果：
六、通用选择器
一种强大的选择器，样式作用对象为所有标签元素。
通用选择器语法：
* {
CSS样式代码；
}
执行效果：
七、伪类选择器
当我们需要设置鼠标滑过的样式时，就会用到伪类选择器。
伪类选择器语法：
标签:hover{
CSS样式;
}
到目前为止，并不是所有浏览器都兼容伪类选择器，但所有浏览器都可以兼容a:hover{}，是最常用的组合；
执行效果：
鼠标滑过前：
鼠标滑过后：
我们一般声明或定义样式要用到如下格式的代码：
选择器{
CSS样式代码；
}
在'{'之前的就是CSS选择器，选择器确定了'{ }'中样式的作用对象，如下代码，“h1”就是选择器。确定了大括号内的样式作用对象就是h1标签，这也是一种最直接的选择器——标签选择器。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>标签选择器</title>
<style type="text/css">
h1{ /*此处h1就为选择器*/
font-size:25px; /*文字大小定为25px*/
color:red; /*文字颜色定为红色*/
border:1px solid green; /*设定文字边框绿色1px*/
}
</style>
</head>
<body>
<h1>标签选择器</h1>
</body>
</html>执行效果：
二、类选择器
我们除了可以选择文档标签作为选择器，也可以独立于文档元素来指定样式，这就需要用到——类选择器。
类选择器的语法是：
.类选器名称{
css样式代码;
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>类选择器</title>
<style type="text/css">
.set{ /*set为类选择器*/
color:green; /*设置颜色为绿色*/
}
</style>
</head>
<body>
<h1>类选择器</h1>
<p><span class="set">类选择器</span>在css样式编码中是最常用到的。类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。</p>
</body>
</html>执行效果：
三、ID选择器
与类选择器相似的还有——ID选择器。
ID选择器语法与类选择器稍有不同：
1、为标签设置id="ID名称"，而不是class="类名称"。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）
#ID选择器名称{
CSS样式代码；
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ID选择器</title>
<style type="text/css">
#set{ /*ID选择器*/
font-weight:900; /*设置字体为粗体*/
}
</style>
</head>
<body>
<p>使用 <span id="set">bold </span>关键字可以将文本设置为粗体。关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。</p>
</body>
</html>执行效果：
类选择器与ID选择器区别：
1、与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而类选择器可以使用多次。
下面这段代码就是正确的（类选择器使用了多次）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>类选择器与ID选择器区别</title>
<style type="text/css">
.name{ /*鼠标划过p标签时内容样式*/
color:red;
font-size:20px;
}
</style>
</head>
<body>
<h1>html</h1>
<p>万维网上的一个超媒体文档称之为一个页面<span class="name">（外语：page）</span>。作为一个组织或者个人在万维网上放置开始点的页面称为主页<span class="name">（外语：Homepage</span>）或首页，主页中通常包括有指向其他相关页面或其他节点的指针<span class="name">（超级链接</span>），所谓超级链接，就是一种统一资源定位器<span class="name">（Uniform Resource Locator，外语缩写：URL）</span>指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。</p></span>
</body>
</html>执行效果：
下面这段代码就是错误的（ID选择器使用了多次）：
<h1>html</h1> <p>万维网上的一个超媒体文档称之为一个页面<span id="ID">（外语：page）</span>。作为一个组织或者个人在万维网上放置开始点的页面称为主页<span id="ID">（外语：Homepage</span>）或首页，主页中通常包括有指向其他相关页面或其他节点的指针<span id="ID">（超级链接</span>），所谓超级链接，就是一种统一资源定位器<span id="ID">（Uniform Resource Locator，外语缩写：URL）</span>指针，通过激活（点击）它，可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。</p>
其实ID选择器可以使用无限次，但是一般都只会用一次 因为JS 经常利用ID来拿对象 如果一个页面出现了太多一样的ID 那么JS就不能用这个ID来拿对象了
2、我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的。
下面这段代码就是正确的（用类选择器为某个元素设置多个样式）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>类和ID选择器的区别</title>
<style type="text/css">
.first{
color:red;
}
.second{
font-size:20px;
}
#first{
color:red;
}
#second{
font-size:20px;
}
</style>
</head>
<body>
<p>在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为<span class="first second">“网页创建和其它可在网页浏览器中看到的信息”</span>设计的一种标记语言。</p>
</body>
</html>执行效果：
下面这段代码就是错误的（用ID选择器为某个元素设置多个样式）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>类和ID选择器的区别</title>
<style type="text/css">
.first{
color:red;
}
.second{
font-size:20px;
}
#first{
color:red;
}
#second{
font-size:20px;
}
</style>
</head>
<body>
<p>在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。超级文本标记语言（英文缩写：HTML）是为<span id="first second">“网页创建和其它可在网页浏览器中看到的信息”</span设计的一种标记语言。</p>
</body>
</html>四、子选择器
子选择器是一种很有用的选择器，多用于有标签嵌套的设置样式情况。
子选择器的语法：
.子选择器的名称>标签或其他选择器{ /*类选择器方式定义*/
CSS样式代码；
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.child>li{ /*子选择器，只会对第一代子元素生效*/
border:1px solid red;/*添加边框样式粗细为1px，颜色为红色的实线*/
}
</style>
</head>
<body>
<h1>子选择器</h1>
<ul class="child">
<li>子列表1 <!--第一代子元素-->
<ul>
<li>one</li> <!--第二代子元素-->
<li>two</li>
<li>three</li>
</ul>
</li>
<li>子列表2 <!--第一代子元素-->
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</li>
</ul>
</body>
</html>执行效果：
五、包含选择器
子选择器的样式作用对象是设置处后的第一代子元素，而与之对应，包含选择器的样式作用对象是设置出后的所有子代元素。
包含选择器的语法：
#包含选择器的名称>标签或其他选择器{ /*ID选择器方式定义*/
CSS样式代码；
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>包含(后代)选择符</title>
<style type="text/css">
.include li{ /*包含选择器，对所有子元素生效*/
border:1px solid red;/*添加边框样式粗细为1px，颜色为红色的实线*/
}
</style>
</head>
<body>
<h1>包含选择器</h1>
<ul class="include">
<li>子列表1 <!--第一代子元素-->
<ul>
<li>one</li> <!--第二代子元素-->
<li>two</li>
</ul>
</li>
<li>子列表2 <!--第一代子元素-->
<ul>
<li>first</li>
<li>second</li>
</ul>
</li>
</ul>
</body>
</html>执行效果：
六、通用选择器
一种强大的选择器，样式作用对象为所有标签元素。
通用选择器语法：
* {
CSS样式代码；
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>通用选择器</title>
<style type="text/css">
* {
color:red;
}
</style>
</head>
<body>
<body>
<h1>通用选择器</h1>
<p>paragragh1</p>
<p>paragragh2</p>
</body>
</body>
</html>执行效果：
七、伪类选择器
当我们需要设置鼠标滑过的样式时，就会用到伪类选择器。
伪类选择器语法：
标签:hover{
CSS样式;
}
到目前为止，并不是所有浏览器都兼容伪类选择器，但所有浏览器都可以兼容a:hover{}，是最常用的组合；
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>伪类选择符</title>
<style type="text/css">
p:hover{ /*鼠标划过p标签时内容样式*/
color:red;
font-size:20px;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p> 到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了,也是最常用的组合了。</p>
</body>
</html>执行效果：
鼠标滑过前：
鼠标滑过后：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web布局连载——两栏固定布局（五）
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 设计更快的网页（三）：字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- 通过Mootools 1.2来操纵HTML DOM元素
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ，必先解决IE的一些细节分析
- CSS文字截取功能实现代码
- 支持IE6 IE7 Firefox 的纯CSS的下拉菜单
- WEB标准网页布局中尽量不要使用的HTML标签