css選擇器

時間 2019-11-20

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

選擇器的做用就是選擇一些內容指定格式.css

標籤選擇器

<!DOCTYPE html>
<html>
<head>
    <!-- 標籤選擇器 -->
    <style type="text/css">
        p {color: blue; text-decoration: underline;}
    </style>
    <meta charset="UTF-8">
    <title>Sample document</title>
</head>
<body>
<p>
    <strong>C</strong>ascading  <!-- strong是加粗-->
    <strong>S</strong>tyle
    <strong>S</strong>heets
</p>
</body>
</html>

把p標籤的內容設置成藍色加下畫線.html

id選擇器

id是整個文檔唯一的.下面代碼定義2個id選擇器.ui

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #div1 {
            width: 200px;
            height: 200px;
            border: solid 2px blue;
            float: left;
            margin: 4px;
            background-color: green;
        }
        #div2 {
            width: 200px;
            height: 200px;
            border: solid 2px blue;
            float: left;
            margin: 4px;
            background-color: red;
        }
    </style>
    <meta charset="UTF-8">
    <title>Sample document</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

類選擇器

<!DOCTYPE html>
<html>
<head>
    <!-- id-->
    <style type="text/css">
        .red {
            width: 200px;
            height: 200px;
            border: solid 2px blue;
            float: left;
            margin: 4px;
            background-color: green
        }
        .green {
            width: 200px;
            height: 200px;
            border: solid 2px blue;
            float: left;
            margin: 4px;
            background-color: red
        }
    </style>
    <meta charset="UTF-8">
    <title>Sample document</title>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
</body>
</html>

僞類選擇器

<html>
<head>
    <style type="text/css">
        a:link {color: #FF0000}    /*搜索引擎中常常有這種狀況,訪問過的連接和沒有訪問過的連接顏色不同,*/
        a:visited {color: #00FF00} /*link爲沒有訪問過的顏色,visited爲訪問過的顏色*/
        a:hover {color: #FF00FF}   /*鼠標指向超連接的顏色*/
        a:active {color: #0000FF}  /*鼠標點擊超連接的顏色*/
    </style>
</head>
<body>
<a href="./c00.html">This is a link</a> <!-- 連接前面不要加http-->
</body>
</html>

子選擇器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        div>p{
            background-color:yellow;
        }
    </style>
</head>
<body>
<div>
    <p>子元素選擇器</p>  <!-- p是div的直接子元素,子選擇器纔有效-->
    <span><p>後代選擇器</p></span>
</div>
</body>
</html>

相鄰選擇器

<!DOCTYPE HTML>
<html>
<head>
    <style type="text/css">
        li + li {font-weight:bold;}
    </style>
</head>
<body>
<div>
    <ul>
        <li>List item 1</li> <!-- 第1個前面沒有和它相同的元素,因此第1個沒有粗體 -->
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
</div>
</body>

屬性選擇器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">/*爲帶有 title 屬性的全部元素設置樣式*/
        [title]
        {
            color:red;
        }
    </style>
</head>
<body>
<h1>能夠應用樣式：</h1>
<h2 title="Hello world">Hello world</h2> <!-- title的做用是指向tile的內容時會顯示tile裏的內容 -->
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<h1>沒法應用樣式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。