2.2-1 标签选择器和id选择器

最新推荐文章于 2023-04-18 09:46:31 发布

洋芋不姓杨

最新推荐文章于 2023-04-18 09:46:31 发布

阅读量840

点赞数

分类专栏： css 文章标签：前端 html css

本文链接：https://blog.csdn.net/youaigusheng/article/details/125539770

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

2.2-1 标签选择器和id选择器

标签选择器定义

(1)标签选择器也称元素选择器，类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签（无论这个标签所处位置的深浅）；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      span{
        color:red;
    }
    b{
        color:blue;
    }
        </style>
          //选择所有的span和b标签
</head>
<body>
    <p>我们一定<span>不负韶华，只争朝夕</span></p>
  <ul>
      <li>小明</li>
      <li>小红</li>
      <li><span>小强</span></li>
  </ul>
</body>
</html>

1.1标签选择器的常见作用

(1)标签选择器"覆盖面"非常大，所以通常用于标签的初始化；
(2)标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/css.css">
   
          //选择所有的span和b标签
</head>
<body>
    <p>我们一定<span>不负韶华，只争朝夕</span></p>
  <ul>
      <li>小明</li>
      <li>小红</li>
      <li><span>小强</span></li>
  </ul>
</body>
</html>
css.css:
ul{
    list-style: none;
/*去掉无序列表的小圆点*/
}
a{
    text-decoration:none;
color:red;
    /*去掉超级链接的下划线*/
}

2、ID属性

1、标签可以有id属性，是这个标签的唯一标识；
<p id="para1">我是一个段落</p>
2、id的名称只能由字母、数字、下划线、短横构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母；
3、同一页面不能有相同的id；

区别1：只能在文档中使用一次

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别 2：不能使用 ID 词列表

不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

区别 3：ID 能包含更多含义

类似于类，可以独立于元素来选择 ID。

区分大小写

请注意，类选择器和 ID 选择器可能是区分大小写的。

3、id选择器

css选择器可以使用井号#前缀，选择指定id的标签
#para1{//选择id为para1的选择器
color:red;
}
例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/css.css">
  <style>
      #para1{
          color:red;
      }
      
      #para2{
          color:purple;
      }

  </style> 
</head>
<body>
   <p id="para1">我是段落</p>
   <p id="para2">我是段落</p>
   <p id="para3">我是段落</p>
   <p id="para4">我是段落</p>
  </ul>
</body>
</html>

4、class类名

1、class属性表示“类名”；
<p class="warning spec">我是段落</p>
        同时属于两个类
2、类名的命名规范和id的命名规范相同；
3、使用.前缀选择指定class的标签；
.warning{
color:blue;
}
.spec{
    font-style:italic;
}
4、多个标签可以为相同类名；
!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
   <p class="warning">我是段落</p>
   <p class="warning">我是段落</p>
   <ul>
       <li>我是列表</li>
       <li class="warning">我是列表</li>
       <li>我是列表</li>
       <li class="warning">我是列表</li>
   </ul>
</body>
</html>
5、同一个标签可以同时属于多个类，类名用空格隔开；
html:
  <p class="warning spec">我是段落</p>
//warning spec同时属于两个类

.warning{
    color:red;
}
.spec{
    font-style: italic;
}

5、原子类

1、在做网页项目前，可以将所有的常用自豪、文字颜色、行高、外边距、内边距等都设置为单独的类；
2、HTML标签就可以“则需选择”它的类名了，这样可以非常快速的添加一些常用样式；
 <style>
     .fs18{
         font-size: 18px;}
  </style> 
</head>
<body>
   <p class="warning spec">我是段落</p>
   <p class="fs18">我是段落</p>
    <p class="fs18 color-green">
    </p>

6、复合选择器

6.1类型

选择器名称	示例			示例的意义
后代选择器	.box .spec 选择类名为box的标签内部的类名为spec的标签
交集选择器	li.spec	选择既是li标签，也属于spec类的标签
并集选择器	ul,ol	选择所有ul和ol标签

6.2后代选择器

1、css选择器中，使用空格表示“后代”；
.box p{
//选择类名为box的标签后代的p标签
color:red;
}
<div class="box">
<p>我是盒子中的段落</p>
<p>我是盒子中的段落</p>
    //上面两个p标签将被选择
</div>
<p>我是段落</p>
<p>我是段落</p>

2、“后代”不一定是“儿子”；
.box{
color:red;
}
<div class="box">
<ul>
    <li><p>我是盒子中的段落</p></li>
<li><p>我是盒子中的段落</p></li>
    </ul>
</div>
<p>我是段落</p>
<p>我是段落</p>

3、后代选择器可以有很多空格，隔开好几代；
.box ul li .spec em{
color:red;
}

6.3并集选择器

<!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.0">
    <title>Document</title>
    <style>
    
      ul,ol{
        font-style: italic;
      }

    </style>
</head>
<body>  
    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
     </ol>
     
     <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
     </ul>
</body>
</html>