コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

css3セレクターの説明

高洛峰
リリース： 2017-03-09 18:35:52
オリジナル
1436 人が閲覧しました

css3 属性シンボルセレクター:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3属性选择器</title>
    <style>
        [id*=div]{
            color:red;/*id包含div的*/
        }
        [id^=div]{
            color:#0000ff;/*id首字符为div的*/
        }
        [id$=div]{
            color:green;/*id结束符为div的,数字前加上\*/
        }
    </style>
</head>
<body>
<div id="div">测试文字</div>
<div id="div1">测试文字</div>
<div id="di">测试文字</div>
<div id="mydiv">测试文字</div>
</body>
</html>
ログイン後にコピー

css3 構造擬似クラスセレクター ルート、非、空、ターゲット:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3结构性伪类选择器</title>
    <style>
        /*root选择器指html最外层根元素html*/
        :root{
            background: gray;
        }
        /*如果使用了root，body只对有内容的区域修饰*/
        body{
            background: green;
        }
        /*not排除功能*/
        div *:not(h1){
            color:#fff000;
        }
        /*empty对空的内容修饰*/
        :empty{
            background: royalblue;
        }
        /*target对超链接跳转之后内容修饰*/
        :target{
            background: rebeccapurple;
            color:#fff;
        }
    </style>
</head>
<body>
<div>文字内容
    <h1>标题</h1>
    <p>测试文字</p>
    <div>测试文字2</div>
</div>

<table border="1">
    <tr>
        <td>单元1</td>
        <td>单元2</td>
    </tr>
    <tr>
        <td></td>
        <td>单元2</td>
    </tr>
    <tr>
        <td>单元1</td>
        <td></td>
    </tr>
</table><br/>

<a href="#a1">链接1</a>
<a href="#a2">链接2</a>
<a href="#a3">链接3</a>
<div>
    <div id="a1">
        <h1>链接一</h1>
        <p>内容一</p>
    </div>
    <div id="a2">
        <h1>链接二</h1>
        <p>内容二</p>
    </div>
    <div id="a3">
        <h1>链接三</h1>
        <p>内容三</p>
    </div>
</div>
</body>
</html>
ログイン後にコピー

css3 構造擬似クラスセレクター 最初の行、最初の文字、前、後:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3结构性伪类选择器</title>
    <style>
        /*first-line:第一行*/
        p:first-line{
            color:#ff0000;
        }
        /*first-letter:首字符*/
        p:first-letter{
            color:#0000ff;
        }
        /*before:之前*/
        li:before{
            content: "--";
            color:#ff0000;
        }
        /*after:之后*/
        li:after{
            content: "这是注释";
            color:gray;
            font-size: 10px;
        }
    </style>
</head>
<body>
<p>这是一段测试文字<br/>这是第二段测试文字</p>
<div>
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
    </ul>
</div>
</body>
</html>
ログイン後にコピー

css3構造擬似クラス セレクター first-child、last-child、nth-child()、nth-last-child():

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background: #555;
        }
        /*first-child:第一个子元素*/
        li:first-child{
            background:#0000ff;
        }
        /*last-child:最后一个子元素*/
        li:last-child{
            background: #ff0000;
        }
        /*nth-child():指定的第几个子元素*/
        li:nth-child(3){
            background: #fff000;
        }
        /*nth-last-child():指定的倒数第几个子元素*/
        li:nth-last-child(2){
            background: #999999;
        }
        /*even:指定的偶数*/
        li:nth-child(even){
            color: #00ff00;
        }
        /*odd:指定的奇数*/
        li:nth-last-child(odd){
            color:#fff;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>这是第1列</li>
        <li>这是第2列</li>
        <li>这是第3列</li>
        <li>这是第4列</li>
        <li>这是第5列</li>
    </ul>
</div>
</body>
</html>
ログイン後にコピー

css3 構造擬似クラス セレクター nth-child(n) および -child のみ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*nth-child(n)
        n=αn+β*/
        li:nth-child(4n+1){
            background: #0000ff;
        }
        li:nth-child(4n+2){
            background: #00ff00;
        }
        li:nth-child(4n+3){
            background: #999999;
        }
        li:nth-child(4n){
            background: #ff0000;
        }
        /*only-child:对标签内仅有的一个子元素做修饰*/
        li:only-child{
            background: #000;
            color: #fff;
        }
    </style>
</head>
<body>
<ul>
    <li>这是一段测试文字</li>
</ul>
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>
</body>
</html>
ログイン後にコピー

css3 構造擬似クラス セレクター nth-of-type、nth-last-of-type:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*nth-of-type:同类元素做修饰*/
        h2:nth-of-type(odd){
            background: #fff000;
        }
        /*nth-last-of-type:同类元素倒数做修饰*/
        h2:nth-last-of-type(odd){
            background: #0000ff;
        }
    </style>
</head>
<body>
<div>
    <h2>标题</h2>
    <p>文本内容</p>
    <h2>标题</h2>
    <p>文本内容</p>
    <h2>标题</h2>
    <p>文本内容</p>
    <h2>标题</h2>
    <p>文本内容</p>
</div>
</body>
</html>
ログイン後にコピー

css3 セレクター ホバー、フォーカス、アクティブ、チェック:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type="text"]:hover{
            background: #fff000;
        }
        input[placeholder=""]:focus{
            background: #ff0000;
        }
        input[type="text"]:active{
            background: #0000ff;
        }
        input[type="checkbox"]:checked{
            outline:2px solid #00ff00;
        }
    </style>
</head>
<body>
<input type="text" placeholder="输入内容">
<input type="text" placeholder="">
<input type="checkbox">音乐
<input type="checkbox">听歌
</body>
</html>
ログイン後にコピー

css3 セレクター有効、無効:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*enabled:可输入状态*/
        input[type="text"]:enabled{
            background: #fff000;
        }
        /*disabled:不可输入状态*/
        input[type="text"]:disabled{
            background:gray;
        }

    </style>
</head>
<body>
<script>
    function radio_change() {
        var radio1=document.getElementById("radio1");
        var radio2=document.getElementById("radio2");
        var text=document.getElementById("text");
        if(radio1.checked){
            text.disabled="";
        }else{
            text.value="";
            text.disabled="disabled";
        }
    }
</script>
<input type="radio" id="radio1" name="radio" onchange="radio_change()">可用
<input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用
<input type="text" id="text" disabled>
</body>
</html>
ログイン後にコピー

CSS3 ユニバーサル兄弟要素セレクター:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>通用兄弟元素选择器</title>
    <style>
        /*对div的同级元素p修饰*/
        div~p{
            background: #fff000;
        }
    </style>
</head>
<body>
<div>
    <div>
        <p>我是div的子元素p</p>
        <p>我是div的子元素p</p>
    </div>
    <p>我是和div同级别p元素</p>
    <p>我是和div同级别p元素</p>
</div>
</body>
</html>
ログイン後にコピー


以上がcss3セレクターの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3 选择器
ソース：php.cn
前の記事：ページレイアウトで CSS の margin 属性を使用するためのガイド 次の記事：css3 複数列とウォーターフォール効果のサンプルコード
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
3 レベル階層のカスタム分類を使用して woocommerce 関連製品を選択します 「スポーツ」というカスタム分類を持つ woocommerce ストアがあります。分類には、親、子、子という 3 つのレベルがあります。たとえば、屋内スポーツ > アリーナ ス...
から 2024-04-06 20:05:30
0
1
544
MySQL: 「<ここの変数またはサブクエリ> として...からテキストを選択します」 次のデータを含む次のテーブルがあります: id text language 1 german text german 2 english text english 私が望むのは、次...
から 2024-04-06 19:25:54
0
2
529
Web サイトから入力要素を取得できません そこで、Twitter から入力要素を取得しようとしていますが、それを実行すると、ノード ターミナルでこのようなエラーが表示され続け、その結果、このコードによって作成されたブラウザ...
から 2024-04-06 18:59:57
0
1
442
Reactjsで複数のチェックボックスを選択する方法 複数のチェックボックスを選択したいオプションのリストがありますが、選択することができません。このコードの何が問題なのでしょうか?サンドボックスの URL
から 2024-04-06 18:55:21
0
1
396
クリア後​​も自分のファイル入力の値が残る スクリーンショットでわかるように。ファイルを選択し、ページを更新せずにポップアップを保持し、再度開くと、ファイル入力は選択したファイルのままです。 <inputid=&quo...
から 2024-04-06 15:44:52
0
1
384
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート