前端 CSS的选择器 基本选择器

 

 

基本选择器包括：

  • 标签选择器
  • 类选择器
  • ID选择器
  • 通用选择器

 

标签选择器

就是通过标签名来选择元素：

选中p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        /* 标签选择器 */
        p{
            color: red;
        }

    </style>
</head>
<body>
    <div>
        <p>我是一个段落</p>
    </div>
</body>
</html>

 

 

将所有的p标签设置字体颜色为红色

标签选择器可以选中所有的标签元素，例如div,ul,li,p等，不管标签藏的多深，都可以选中，选中的是所有,而不是某一个

 

ID选择器

id是在每个标签应用是唯一的

同一个页面id不能重复

id命名规范 要以字母开头 可以有数字、下划线、-

大小写严格区分 aa和AA

 

 

通过元素的ID值选择元素：

用#选中id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">

        #s1{
            color: red;
        }

    </style>
</head>
<body>
    <div>
        <span id="s1">123</span>
    </div>
</body>
</html>

 将id值为s1的元素字体颜色设置为红色。

CSS使用的id 他的大小写字母是严格区分的，id是唯一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">

        #s1{
            color: red;
        }
        
        #s2{
            font-size:30px;
        }

    </style>
</head>
<body>
    <div>
        <span id="s1">123</span>
        <span id="s2">helo</span>
    </div>
</body>
</html>

 

类选择器

 

通用选择器

使用*选择所有元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        *{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>第一个段落</p>
        <span>span</span>
    </div>
    <div>
        <a>a标签</a>
    </div>

</body>
</html>

 

 

posted @ 2019-05-01 01:43  minger_lcm  阅读(285)  评论(0)  编辑  收藏  举报