您的位置：首页 > Web前端 > CSS

CSS中的三种基础选择器，

2016-01-13 16:00 519 查看
Html中有三种方法可以使用CSS，而在css中，有三种基础的选择器

1、元素选择器

    也叫标签选择器，即在CSS中利用标签名称来定义其外观

2、类选择器，是用点.符号开头，后面跟上一个自定义的名称，在使用时候，以HTML标签的class属性来标记

3、ID选择器，以符号#开头，后面跟上一个自定义的名称，在使用时以HTML标签的id属性来标记。

    以下是几种选择器的使用实例

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="style.css" rel="stylesheet" type="text/css">
<!--第一种使用CSS方法，外部样式表，前提是在同一目录下-->
<title>CSS语法练习2016年1月13日</title>
<style type="text/css">
body {background-color:white}   <span style="font-family: Arial, Helvetica, sans-serif;"><span style="color:#ff0000;"><!--1、利用body标签定义背景颜色为白色--></span></span>
.news {color:red}              <span style="color:#ff0000;"> <span style="font-family: Arial, Helvetica, sans-serif;"><!--2、利用类选择器，自定义的名称为news--></span></span>
#p1 {color:blue}                <span style="font-family: Arial, Helvetica, sans-serif; color: rgb(255, 0, 0);"><!--3、利用ID选择器，自定义的名称为p1--></span>
</style><!--第二种使用css方法，利用内部样式表style标签-->
</head>
<body style="background-color:black">
<h1 class=nwes>新闻1</p>
<p class="news">新闻2</p>
<p id="p1">另一个段落</p>
<p style="color:red">这是第三种应用CSS样式的方法</p><!--这是第三种应用CSS样式方法，即行内样式表-->
</body>
</html>

复合选择器

除了单独使用这些选择器之外，CSS还可以使用复合选择器，即明确定位到哪一个标签，如在上面代码中，news前面加上P.news，即直接定位到标签P，而p1标签里面的新闻1不会改变。

    
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航