CSS中常用的七种选择器

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素选择器title>
        <style>
            div{
                color: blue;
                font-size: 25px;
            }
        style>
    head>
    <body>
        <div>昨天是个好日子div>
        <div>今天是个好日子div>
        <div>明天是个好日子div>
    body>
html>
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ID选择器title>
        <style>
            #div1{
                color: red;
            }
            #div2{
                color: gold;
            }
            #div3{
                color: greenyellow;
            }
        style>
    head>
    <body>
        <div id="div1">昨天是个好日子div>
        <div id="div2">今天是个好日子div>
        <div id="div3">明天是个好日子div>
    body>
html>
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>类选择器title>
        <style>
            .song{
                color: gold;
                font-size: 30px;
            }
        style>
    head>
    <body>
        <div class="song">青花瓷div>
        <div class="song">东风破div>
        <div class="song">烟花易冷div>
    body>
html>

 

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器title>
        <style>
            a[href][title='a']{
                color: yellow;
            }
            a[title='b']{
                color: darkblue;
            }
            
        style>
    head>
    <body>
        <a href="#" title="a">张三a>
        <a href="#" title="b">李四a>
    body>
html>
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>后代选择器title>
        <style>
            p em{
                color: yellow;
            }
        style>
    head>
    <body>
        <p>
            <em>我是儿子斜体em>
            <strong>
                <em>我是孙子斜体em>
            strong>
        p>
    body>
html>

 

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子元素选择器title>
        <style>
            p>em{
                color: yellow;
            }
        style>
    head>
    <body>
        <p>
            <em>我是儿子斜体em>
            <strong>
                <em>我是孙子斜体em>
            strong>
        p>
    body>
html>
DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>伪类选择器title>
        <style>
            a:link{color: blue;} /*未点击*/
            a:visited{color: red;} /*已点击*/
            a:hover{color: yellow;} /*鼠标放在链接上但未点击*/
            a:active{color: green;} /*鼠标点击但未松开*/
        style>
    head>
    <body>
        <a href="#">我是链接a>
    body>
html>

 

你可能感兴趣的:(CSS中常用的七种选择器)