CSS3属性选择器

最新推荐文章于 2023-04-09 13:44:16 发布

uncle_Huang

最新推荐文章于 2023-04-09 13:44:16 发布

阅读量174

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/uncle_Huang/article/details/96198935

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

CSS3超级选择器

属性选择器
[att*=val]含有val、[att^=val]开头、[att$=val]结尾

结构性伪类选择器
伪类元素

    a:link{
        color:black;
    }
    /* 未被访问的链接 */
   
    a:visited{
        color:red;
    }
    /* 已被访问的链接 */
 
    a:hover{
        color: yellow;
    }
    /* 鼠标指针移动到链接上 */
  
    a:active{
        color: green;
    }
    /* 正在被点击的链接 */

伪元素选择器

first-line
某元素第一行文字
first-letter
某元素首字母或首个字
before
某元素之前插入内容
after
某元素之后插入内容

结构性伪类选择器

root
not
empty
元素中内容为空白时
target
点击超链接跳转到指定target元素后起作用

选择器first-child、last-child、nth-child、nth-last-child、nth-child(An+B)、only-child

first-child
第一个元素
last-child
最后一个元素
nth-child
nth-child（n）顺序第n个子元素
nth-child（odd）顺序奇数个子元素
nth-child（even）顺序偶数个子元素
nth-last-child
nth-last-child（n）倒数第n个子元素
nth-last-child（odd）倒序奇数个子元素
nth-last-child（even）倒序偶数个子元素
nth-child(An+B)循环使用样式
A表示每次循环中共包括几种样式
B表示指定的样式在循环中所处的位置
only-child
只对唯一的子元素起作用

UI元素状态伪类选择器

E:hover、E:active、E:focus
用来指定当鼠标指针移动到元素上时元素所使用的样式
<元素>:hover{
CSS样式
}
可在<元素>中添加元素的type属性
input[type=“text”]:hover{
CSS样式
}

E:active
指定元素被激活时使用的样式

E:focus
指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用

E:enabled、E:disabled
可用、不可用
E:read-only、E:read-write
只读、非只读
E:checked、E:default、E:indeterminate
E:checked
当表单中的radio单选框或是checkbox复选框处于选取状态时
E:default（只支持firefox）
E:indeterminate（只支持chrome）
没选时整组单选框的样式

实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超级选择器</title>
    <style type="text/css">
    [id*=t1]{
        font-style: oblique;
    }
    [id$=2]{
        font-style: oblique;
    }
    [id^=t]{
       color:rgb(46, 226, 172);
    }
    :root{
        background: rgb(197, 109, 109);
    }
    body{
        background: white;
    }
    body *:not(a){
        background: rgba(225, 201, 235, 0.753);
    }
    /* :empty{
        background: rgb(79, 109, 134);
    } */
    :target{
        background: green;
    }
    a:link{
        color:black;
    }
    /* 未被访问的链接 */
    a:visited{
        color:red;
    }
    /* 已被访问的链接 */
    a:hover{
        color: yellow;
    }
    /* 鼠标指针移动到链接上 */
    a:active{
        color: green;
    }
    /* 正在被点击的链接 */
    a{
       text-decoration: none;
    }

    p:first-line{
        color: red;

    }
    P:first-letter{
        font-size:40px;
    }
    p:before{
        content: "开始";
    }
    p:after{
        content: "结束";
    }
    li{
        list-style: none;
    }
    /* li:first-child{
        color:brown;
    }
    li:last-child{
        color:rgb(65, 42, 165);
    }
    li:nth-child(2){
        color:rgb(165, 42, 155);
    }
    li:nth-last-child(2){
        color:rgb(42, 165, 73);
    } */

    li:nth-child(4n+1){
        color: aqua;

    }
    li:nth-child(4n+2){
        color: black;
    }
    li:nth-child(4n+3){
        color: blue;
    }
    li:nth-child(4n+4){
        color: blueviolet;
    }

    li:only-child{
        color: rgb(165, 42, 124);
    }

    /* input[type="text"]:hover{
        background: green;
    }

    input[type="text"]:active{
        background: blue;
    }

    input:focus{
        background: red;
    } */

    /* input[type="text"]:enabled{
        background: green;
    }

    input[type="text"]:disabled{
        background: red;
    } */

    input[type="text"]:read-only{
        background:white;
    }

    input[type="text"]:read-write{
        background:green;
    }
/* 
    input[type="checkbox"]:checked{
        outline: 2px solid red;
    } */

    input[type="checkbox"]:default{
        outline: 2px solid red;
    }

    input[type="radio"]:indeterminate{
        outline: 2px solid red;
    }



    </style>
</head>
<body>
    <a href="#target1">这是第一个链接</a>
    <a href="#target2">这是第二个链接</a>
    <p id="target1">这是第一段文字 <br/>第一段第二行</p>
    <p id="target2">这是第二段文字 </p>
    <p id="t1">这是第二段文字 </p>
    <br/>
    <table  border="1" cellpadding="0" cellspacing="0" width="100px">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
                <td>1</td>
                <td>2</td>
                <td></td>
                <td>4</td>
            </tr>
    </table>
    <h1>唯一</h1>
    <ul>
        <li>唯一一个</li>
    </ul>
    <h1>多个</h1>
    <ul>
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
        <li>第6个</li>
    </ul>
    <!-- <form>
        姓名：<input type="text" placeholder="请输入姓名"/>
        <br/>
        密码：<input type="text" placeholder="请输入密码" disabled/>
    </form> -->

    <form>
            姓名：<input type="text" placeholder="请输入姓名" value="uncle-huang" readonly/>
            <!-- IE浏览器没有显示value值 -->
            <br/>
            密码：<input type="text" placeholder="请输入密码" />
    </form>

    <form>
        性别：
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <!-- name值相同可实现单选 -->
        <br/>
        爱好：
        <input type="checkbox" checked>吃       
        <input type="checkbox">喝 
        <input type="checkbox">睡     
        <input type="checkbox">玩
    </form>
</body>
</html>