CSS3属性选择器

CSS3超级选择器

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

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

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

伪元素选择器

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

结构性伪类选择器

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

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

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

UI元素状态伪类选择器

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

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

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

  1. E:enabled、E:disabled
    可用、不可用

  2. E:read-only、E:read-write
    只读、非只读

  3. E:checked、E:default、E:indeterminate
    E:checked
    当表单中的radio单选框或是checkbox复选框处于选取状态时
    E:default(只支持firefox)
    E:indeterminate(只支持chrome)
    没选时整组单选框的样式

实例代码如下:


<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>1td>
            <td>2td>
            <td>3td>
            <td>4td>
        tr>
        <tr>
                <td>1td>
                <td>2td>
                <td>td>
                <td>4td>
            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="请输入姓名" value="uncle-huang" readonly/>
            
            <br/>
            密码:<input type="text" placeholder="请输入密码" />
    form>

    <form>
        性别:
        <input type="radio" name="sex"><input type="radio" name="sex">
        <br/>
        爱好:
        <input type="checkbox" checked><input type="checkbox"><input type="checkbox"><input type="checkbox">form>
body>
html>

你可能感兴趣的:(前端)