CSS学习笔记——CSS三大基本选择器

CSS三大基本选择器

目录

  • 标签选择器
  • id选择器
  • 类选择器

标签选择器

p{
    color:red;
    }
  • 什么是标签选择器?
    • 根据指定标签名称,在当前界面中找到所有该名称的标签,并设置属性
  • 注意点
    • 标签选择器选中的是当前界面所有同名标签,不能单独选中
    • 只要是HTML中的标签都可以作为标签选择器

id选择器

#id{
    color:red;
    }
  • 什么是id选择器?
    • 根据指定标签的id,在当前界面中找到该id的标签,并设置属性
  • 注意点
    • 每个HTML标签都有id属性
    • 同一个界面中id是唯一的,不能重复
    • 编写id选择器必须要在id前面加上一个#
    • id的名称有一定的规范,只能由字母数字和下划线组成
    • id的名称不能够以数字开头
    • id的名称不能与HTML标签同名
    • 如果仅仅是为了设置样式,我们不会使用id,因为前段开发中id是留给js使用的

类选择器

.class{
    color:red;
    }
  • 什么是类选择器?
    • 根据指定标签的类,在当前界面中找到该类的标签,并设置属性
  • 注意点
    • 每个HTML标签都有class属性
    • 同一个界面中class属性是可以重复
    • 编写class选择器必须要在class名称前面加上一个.
    • class的名称有一定的规范,只能由字母数字和下划线组成
    • class的名称不能够以数字开头
    • class的名称不能与HTML标签同名
    • class就是专门给某一类标签设置样式的
    • 一个标签可以同时绑定多个class属性
      • Test paragraph

        ,这样就绑定了三个类属性
  • 类选择器实践,通过对不同类的组合来实现不同的效果

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器title>
    <style>
        .red{
            color: #FF0000;
        }
        .underline{
            text-decoration: underline;
        }
        .bigsize{
            font-size: 30px;;
        }
    style>
head>
<body>
<p class="bigsize red">第一段文字p>
<p class="underline bigsize">第二段文字p>
<p class="red underline">第三段文字p>
body>
html>

你可能感兴趣的:(HTML/CSS)