CSS-3-三种基本选择器

CSS -> 基本选择器

作用:选择页面上的某一个或者某一类元素

1. 基本选择器
1.1 标签选择器
  • 选择一类标签

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*标签选择器:会选择到页面上所有的这个标签的元素*/
        h1 {
            color: blue;
            background: hotpink;
            border-radius: 20px;
        }
        p {
            font-size: 80px;
        }
    style>
head>
<body>
<h1>Singerh1>
<h1>Singerh1>
<p>Charlie Pathp>
body>
html>
1.2 类选择器
  • class
  • 选择所有class 属性一致的标签,可以复用,可以跨标签

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*类选择器的格式: .class的名称{}
        好处:可以多个标签归类,是同一个class,可以复用
        */
        .one{
            color: hotpink;
        }
        .two{
            color: aqua;
        }
        .three{
            color: coral;
        }
    style>
head>
<body>
<h1 class="one">ONEh1>
<h1 class="two">TWOh1>
<h1 class="three">THREEh1>
<h1 class="three">THREE2h1>

<p class="three">P标签p>
body>
html>
1.3 id选择器
  • id名称必须全局唯一!不可重用
  • id名称不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        /*id选择器:id必须保证全局唯一
        #id名称{}
        优先级:不遵循就近原则!
            id选择器 > class选择器 > 标签选择器
        */
        #ano{
            color: deeppink;
        }
        .babe{
            color: blue;
        }
        h1{
            color: #000;
        }
    style>
head>
<body>
<h1 id="ano" class="babe">123h1>
<h1 class="babe">456h1>
<h1 class="babe">789h1> 
<h1>789h1>
<h1>789h1>

body>
html>

CSS-3-三种基本选择器_第1张图片

优先级:id选择器 > class选择器 > 标签选择器

你可能感兴趣的:(#,CSS,css3)