Description of css3 selectors-CSS Tutorial-php.cn

Description of css3 selectors

高洛峰

Release： 2017-03-09 18:35:52

Original

1440 people have browsed it

css3 attribute symbol selector:

<!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>

Copy after login

css3 structural pseudo-class selector root, not, empty, target:

<!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>

Copy after login

css3 structural pseudo-class selector first- line, first-letter, before, after:

<!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>

Copy after login

css3 structural pseudo-class selector 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>

Copy after login

css3 structural pseudo-class selector nth-child(n) and only-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>

Copy after login

css3 structural pseudo-class selector 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>

Copy after login

css3 selector hover, focus, active, checked:

<!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>

Copy after login

css3 selector enabled, disabled:

<!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>

Copy after login

css3 universal sibling element selector:

<!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>

Copy after login

The above is the detailed content of Description of css3 selectors. For more information, please follow other related articles on the PHP Chinese website!