CSSセレクターとは何ですか? CSSセレクターの使い方のまとめ-CSSチュートリアル-php.cn

CSSセレクターとは何ですか? CSSセレクターの使い方のまとめ

不言

リリース： 2018-08-18 14:40:02

オリジナル

2026 人が閲覧しました

この記事では、CSS セレクターとは何ですか? CSS セレクターの使用についての概要は、必要な友人が参考にできることを願っています。

1. セレクター (デバイス) は基本構文
Selector｛属性 1: 属性値 1 を使用します。属性 2: 属性値 2
属性 3: 属性値 3; …..: …….;
2. タグセレクター (HTML タグをセレクターとして直接使用)
Second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>标记选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
</head>
<body>
    <p> 标记选择器(直接使用html标签做选择器)</p>
</body>
</html>

ログイン後にコピー

Second.css

p{
    font-size:34px;   
    text-align:left;    
    text-transform:uppercase;    
    font-family:黑体,宋体;    
    text-indent:3em;    
    text-decoration:line-through;    
    font-weight:bolder;    
    letter-spacing:0.5em;    
    line-height:3px;    
    margin:34px;    
    padding:23px;
    }

ログイン後にコピー

3. クラスセレクター (各タグにクラス名を設定、CSS はクラス名のタグ設定スタイルを渡すことができます)異なるタグクラス名は同じにすることができ、同じタグは同じスタイルを共有できます) - CSS でタグ名.クラス名または .クラス名を使用して

Second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>类选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
</head>
<body>
    <p  class="text"> 类选择器(为每一个标签设置一个类名，CSS可通过类名为标签设置样式，不同标签类名可以相同，
    相同可以共用同一个样式)---CSS中用标签名.类名或者.类名表示    </p>
</body>
</html>

ログイン後にコピー

Second.css

.text{
    font-variant:small-caps;/*小型大写字母*/
    font-family:宋体,黑体;    
    font-style:italic;    
    text-transform:lowercase;    
    font-size:35px;    
    text-indent:3em;    
    text-decoration:overline;    
    font-weight:bold;    
    letter-spacing: 1px;    
    line-height:3em;    
    font-variant:small-caps;    
    text-align:right;
    }

ログイン後にコピー

4.ID を表します選択 (HTML タグごとに一意の ID を設定します。CSS は ID を通じてタグのスタイルを設定できます)

—-#id 値 { } は、

Second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ID选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1"> ID选择器(为每一个HTML标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)
    ----CSS中用#id值{ }来表示    </p>
    </body>
    </html>

ログイン後にコピー

Second.css

.text{
    font-variant:small-caps;/*小型大写字母*/
    font-family:宋体,黑体;    
    font-style:italic;    
    text-transform:lowercase;    
    font-size:35px;    
    text-indent:3em;    
    text-decoration:overline;
    }
#textp1{
    font-weight:bold;    
    letter-spacing: 1px;    
    line-height:3em;    
    font-variant:small-caps;    
    text-align:right;
    }

ログイン後にコピー

5 を表すために CSS で使用されます。セレクターを含む (子孫セレクター: 世代間、タグ間をまたぐことができます): 1 つのタグに別のタグを含めます

Second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>包含选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1">  <a href="#" class="link">ID选择器</a>
        (为每一个html标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)
     ----CSS中用#id值{ }来表示    </p>
     </body>
     </html>

ログイン後にコピー

Second.css

p a{
    
    text-decoration:none;    
    font-size:25px;    
    background-color:pink;
    }
.text{
    font-size:21px;    
    font-style:normal;    
    text-transform:lowercase;    
    text-indent:3em;    
    font-weight:bold;    
    letter-spacing:0.7em;    
    line-height:27px;
    }

ログイン後にコピー

6. サブセレクター (IE ブラウザーはサポートしていません): 他のタグは含めることができませんCSS では、ラベル 1 > タグ 2 (サブタグ) が

Second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>子选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1"> 
             <a href="#" class="link">子选择器</a>
            （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
    </p>
    </body>
    </html>

ログイン後にコピー

Second.css

p>a{
    text-decoration:none;    
    font-family:黑体，宋体;
    }
p{    
font-size: 23px;
}

ログイン後にコピー

7 を表すために使用されます。タグ) はテーブルの列属性を設定するためによく使用されます。CSS はタグ 1+… で表されます。ユニオンセレクター: 複数のタグのスタイルをまとめて設定します。コンマで開きます

Second.css

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>相邻选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" > 
            子选择器:
            （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
    </p>

    <p class="text1">
        相邻选择器(CSS样式作用在最后一个标签)常用设置表格的列属性--CSS用标签1+....标签n表示    </p>
        </body>
        </html>

ログイン後にコピー

Second.css

.text+.text1{
    color:pink;    
    background-color:gray;    
    font-size:34px;
    }

ログイン後にコピー

9. 疑似クラス (ハイパーリンクの状態を記述するためによく使用される、リンク (未訪問の状態); 訪問済み (訪問済みの状態) ; hover (マウス通過状態); active (クリック状態) CSS はタグ名: state を使用して

Second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>并集选择器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" > 
            子选择器:
            （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示 
    </p>

    <p class="text1">
        并集选择器:多个标签一起设置样式，用逗号隔开    </p>
        </body>
        </html>

ログイン後にコピー

Second.css

.text,.text1{
    color:pink;
    background-color:gray;    
    font-size:34px;}

ログイン後にコピー

10. CSS で使用される: 疑似クラス表現

一般的に使用されるものは (first-letter [テキストの最初の文字に作用する]、first-line [テキストの 1 行目に作用する])

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>伪类</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <a href="" class="a1">伪类</a>
    </body>
    </html>

ログイン後にコピー

Second.css

a:link {
    color:blue;    
    font-size:53px;    
    text-decoration: none;
    }
a:visited {
    color:red;    
    font-size:193px;
    }
a:hover  {
    color:green;    
    font-size:73px;
    }
a:active  {
    color:gray;    
    font-size:183px;
    }

ログイン後にコピー

11 スタイルの優先度: インラインセレクター>IDセレクター>クラスセレクター(擬似クラス、属性)>タグセレクター

!重要;を使用して優先度を上げることができます