CSS中的三种基础选择器，

来源：互联网发布：数据的分析编辑：程序博客网时间：2024/06/09 16:24

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不会改变。

0 0