web学习笔记--css(4)-ccs3新增

CCS学习系列笔记
web学习笔记–css(1)
web学习笔记–css(2)
web学习笔记–css(3)

web学习笔记–css(4)-ccs3新增

- 1.css现状
- 2.css3新增
  - 2.1属性选择器
  - 2.2伪元素选择器

1.css现状

01 浏览器支持程度差，有些需要添加私有前缀
02 移动端优于PC段
03 不断改进中

2.css3新增

2.1属性选择器

1）根据属性选择
E[att]：选择具有att属性的E元素

2）根据属性值选择
E[att = “val”] 选择具有att属性且属性值为val的E元素

3）E[att ~= “val”]选择具有att属性并且属性值有多个，其中一个值等于val的E元素
4）E[att^= “val”] 选择具有att属性，并且属性值是以val开头的E元素
5）E[att$= “val”] 选择具有att属性，并且属性值是以val结尾的E元素
5）E[att*= “val”] 选择具有att属性，并且属性值是含有val的E元素

总代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*E[att]：选择具有att属性的E元素*/
        /*根据属性选择*/
        /*第1种*/
        input[value]{
            background-color: red;
        }
        input[name]{
            background-color: green;
        }
        input[type]{
            background-color: purple;
        }
        /*第2种*/
        /*E[att = "val"]*/
        /*选择某个属性值为vip2的*/
        input[value = "vip2"]{
            background-color: white;
        }
        /*第3种*/
        input[style ~="30px" ]{
            background-color: yellow;
        }
        /*第4种*/
        /*以v开头的*/
        input[value ^= "v"]{
            background-color: orange;
        }
        /*第5种*/
        /*以1结尾的*/
        input[value $= "1"]{
            background-color: blue;
        }
        /*第6种*/
        /*含有s的*/
        input[name *= "s"]{
            background-color: mediumaquamarine;
        }

    </style>
</head>
<body>
<input type="text" value="姓名" style = "padding: 10px 30px 20px" name="username"><br>
<input type="text" value="姓名" style = "padding: 25px 15px 35px" name="good"><br>
<input type="password" name="password"><br>
<input type="button" value="vip1"><br>
<input type="button" value="vip2"><br>
<input type="button" value="vip3"><br>

</body>
</html>

2.2伪元素选择器

又称虚拟选择器，或者伪对象选择器

01 E::first-letter 设置元素内的第一个字符的样式，针对的是块级元素

扫描二维码关注公众号，回复： 2031556 查看本文章

02 E::first-line 设置元素内的第一行样式

03 E::before 在某个之前插入内容

04 E::after 在某个之后插入内容

01-04代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选择P标签中第1个字符*/
        p::first-letter{
            font-size: 30px;
            color:blue;
            background-color: red;
        }
        /*选择P标签中第1行字符*/
        p::first-line{
            color: green;
            background-color: yellow;
        }
        /*在某个之前插入内容*/
        /*在页面中，没有办法选择全部*/
        a::before{
            content: "点击"
        }
        /*在某个之后插入内容*/
        /*在页面中，没有办法选择全部*/
        /*a::after{*/
            /*content: "页面";*/
        /*}*/
        a::after{
            content: url("../img/blue.png");
        }
    </style>
</head>
<body>
    <p>
        上海xx大学
        上海xx大学<br>
        上海xx大学
    </p>
    <a href="#">搜索</a>

</body>
</html>

05 E::selection

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选中p中的文字后显示红色*/
        p::selection{
            color: red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>
        两只老虎两只老虎<br>
        跑得快 跑得快<br>
        哈哈哈哈 <br>
    </p>

</body>
</html>