CSS 伪元素基础知识：first-line、fir

CSS 伪元素基础知识：first-line、first-letter、selection(三)

了::before 和::after，CSS 的伪元素还有::first-line、::first-letter 和::selection 这三个，这三个相对来说就简单得多，用法也较为纯粹。没看过前两篇文章的，笔者建议大家看看：

CSS 伪元素基础知识：before 与after （一）、CSS 伪元素基础知识：content 与counter 实用技巧（二）

::first-line

::first-line顾名思义就是「第一行」，通过这个伪元素可以轻松指定文字的第一行，需要注意的是::first-line 「不能」作用于display:inline的元素。以下面的例子，html里有一段文字如下所示：

<p> 前端达人公众号，已经有五年的历史啦，目前有几千名前端开发者订阅，公众号的宗旨是：分享当下最实用的前端技术。关注前端达人，与数千名达人们一起进步！期待你的订阅和关注！
</p>

CSS 只要这样写，页面呈现出来的第一行就会是绿色的，不论视窗如何缩放，只有第一行会是绿色的。

p::first-line{
 color:green;
}

::first-letter

::first-letter顾名思义就是「第一个字」，通过这个伪元素，可以做出许多文章第一个字放大或变色的效果，我们这里就用刚刚上面那段文字为例，把第一个字用下段的CSS 来做变化，就可以看到第一个字放大且变色了的效果。

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
}

虽然把第一个字放大了，但排版上仍然有点乱没有美感，这时你可以加入line-height、float或padding等属性进行修正，经过修正后，你会惊喜的发现很像报纸杂志会出经常用的效果（第一个字会跨行显示）。

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
 line-height:26px;
 float:left;
 padding:10px 5px 0 0;
}

不过很有趣的是，在实际应用的过程里，发现「有一些符号」是无法套用::first-letter 的，例如「『 {} [] 都不行，但如果后方加上其他文字或符号，又会跟着一起放大...( 到底是怎样？ )

经过查询W3C的官网，发现了下面这段话，意思大概就是说网页里面有定义一些所谓「包覆式、点缀式的标点符号」，如果是这些包覆式的标点符号，基本上就无法放大，反而需要搭配其它字符进行使用，因此，在使用第一个字进行特殊变化时，就要注意有这种特殊状况会发生。

参考：https://www.w3.org/TR/CSS21/selector.html#first-letter

::selection

::selection 是个十分常见的伪元素，它就是负责一段选取文字的效果，以下面这段CSS来说，选取后的文字，就会是深色背景，黄色文字。

p::selection{
 color:yellow;
 background:#543;
}

延伸阅读——用JavaScript操控伪元素

虽然我们能用CSS操控伪元素，但因为伪元素不存在于网页元素内，所以无法通过JavaScript常规操控DOM的方式来修改或控制，不过JavaScript身为一个神通广大的编程语言，仍然是有方法可以办到的。

读取伪元素属性

一般来说使用JavaScript读取某个元素DOM里的属性不难，但相对来说要读取一个不存在网页里的元素就不容易，如果要读取伪元素属性，可以通过getComputedStyle来获得，getComputedStyle是个可以获取当前元素「所有的CSS属性值」，读取后会返回一个Object CSSStyleDeclaration，而这个属性是只读的，无法进行修改。

使用方法：window.getComputedStyle('元素', '伪元素')

举例来说html 放入一个div 以及一个span，待会会用这个span 来显示div 的::before 属性。

<div id="d">我是 div</div>
<span id="s"></span>

CSS 的部分指定伪元素的content和color。

#d::before{
 content:'伪元素的content ';
 color:red;
}

JavaScript使用window.getComputedStyle(d,'::before')获取div里头伪元素使用的style，然后显示在span里面。

var d=document.getElementById('d');
var s=document.getElementById('s');
var b=window.getComputedStyle(d,'::before');
s.innerHTML=b.content +'<br/>'+b.color;

最后页面呈现的结果，第一段就是原本的div加上红色的伪元素文字，下方第一段是content的内容，紧接着是伪元素的颜色属性。

修改伪元素属性

我们可以读取属性值也就一定要尝试修改，不过修改伪元素的属性其实比想像中的难，必须通过insertRule这个方法在指定的style里插入「预设的规则」，让这个规则去影响伪元素的属性表现。

用法：style 标签元素.insertRule(样式规则, 0)

举例来说我们的网页布局如下，一开始开头的部分有两组style，第一组是我们赋予元素的样式属性，第二组则是要来定义规则的style，因为要加入规则，所以让第二组style有一个id。至于html就放入一个div。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>JS Bin</title>
 <style>
 #d::before{
 content:'伪元素的 content ';
 color:red;
 }
 </style>
 <style id="css"></style>
</head>
<body>
 <div id="d">我是div</div>
</body>
</html>

在完全没有编写JavaScript的状态，应该会呈现如下图的样子：

JavaScript开声明一个变量css，通过id获取style，然后使用在指定一个变量给css.sheet，就可以通过insertRule的方法修改了。需要注意的是，由于规则加入时会放在整串style的开头(第二个值预设0 )，所以纯粹使用一个#d是无法覆盖原本的属性( CSS权重问题)，所以这边使用#d#d两次，就可以在权重上压过原本的属性。(当然如果要用!important也是可以)

var css=document.getElementById('css');
var d=document.getElementById('d');
var c=css.sheet;
c.insertRule("#d#d::before{content:'我是修改的 content ';}", 0);
c.insertRule("#d#d::before{color:blue;}", 0);

如此一来，呈现出来的效果就是通过JavaScript修改的。

修改伪元素content

我们知道::before和::after的content可以通过attr获取父元素的属性，因此通过改变这个属性，就能间接连带改变content的内容，举例来说有个div，我们指定它的data-text="我是预设文字"，然后放两个按钮，期望点选不同的按钮，会更换content不同的内容。

<button id="b1">显示 ABC</button>
<button id="b2">显示 123</button>
<div data-text="我是预设文字">我是 div</div>

接着设定CSS，关键在使用content的attr，让伪元素直接显示父元素属性的内容。

button{
 font-size:16px;
}
div{
 margin:10px;
 font-size:20px;
}
div::before{
 content: attr(data-text) '，';
}

最后就是JavaScript的部分，通过setAttribute更改div的属性，就会看到content的内容修改了。

var b1=document.getElementById('b1');
var b2=document.getElementById('b2');
var d=document.querySelector('div');
b1.addEventListener('click',function(){
 d.setAttribute('data-text','ABC');
});
b2.addEventListener('click',function(){
 d.setAttribute('data-text','123');
});

虽然说我们可以通过JavaScript 来操控伪元素，但伪元素终究不是真正的网页元素，也因此操作起来也不如基本操作网页元素DOM 来的简便，所以如果可以，还是尽量用正常的操控模式吧。

文章来源：https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html
原文作者：oxxostudio
由于网页为繁体内容，术语描述和话术与我们有差异的问题，笔者在保证不改变原意的基础上做了调整，把上述两篇文章合成了一篇，并在此基础上进行了错误校正，如发现问题，欢迎你的指正

小结

关于伪元素的系列文章就介绍到这里，如果你喜欢此系列文章，麻烦各位点赞和转发，谢谢啦。关于伪元素的用法，虽然说大部分的时候用不太到，但某些时候也不失为强化网页效果、或是优化网页结构的好方法。

CSS 伪元素基础知识：before 与after （一）、CSS 伪元素基础知识：content 与counter 实用技巧（二）

::first-line

<p> 前端达人公众号，已经有五年的历史啦，目前有几千名前端开发者订阅，公众号的宗旨是：分享当下最实用的前端技术。关注前端达人，与数千名达人们一起进步！期待你的订阅和关注！
</p>

CSS 只要这样写，页面呈现出来的第一行就会是绿色的，不论视窗如何缩放，只有第一行会是绿色的。

p::first-line{
 color:green;
}

::first-letter

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
}

p::first-letter{
 font-weight:bold;
 font-size:38px;
 color:red;
 line-height:26px;
 float:left;
 padding:10px 5px 0 0;
}

参考：https://www.w3.org/TR/CSS21/selector.html#first-letter

::selection

::selection 是个十分常见的伪元素，它就是负责一段选取文字的效果，以下面这段CSS来说，选取后的文字，就会是深色背景，黄色文字。

p::selection{
 color:yellow;
 background:#543;
}

延伸阅读——用JavaScript操控伪元素

读取伪元素属性

使用方法：window.getComputedStyle('元素', '伪元素')

举例来说html 放入一个div 以及一个span，待会会用这个span 来显示div 的::before 属性。

<div id="d">我是 div</div>
<span id="s"></span>

CSS 的部分指定伪元素的content和color。

#d::before{
 content:'伪元素的content ';
 color:red;
}

JavaScript使用window.getComputedStyle(d,'::before')获取div里头伪元素使用的style，然后显示在span里面。

var d=document.getElementById('d');
var s=document.getElementById('s');
var b=window.getComputedStyle(d,'::before');
s.innerHTML=b.content +'<br/>'+b.color;

最后页面呈现的结果，第一段就是原本的div加上红色的伪元素文字，下方第一段是content的内容，紧接着是伪元素的颜色属性。

修改伪元素属性

用法：style 标签元素.insertRule(样式规则, 0)

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>JS Bin</title>
 <style>
 #d::before{
 content:'伪元素的 content ';
 color:red;
 }
 </style>
 <style id="css"></style>
</head>
<body>
 <div id="d">我是div</div>
</body>
</html>

在完全没有编写JavaScript的状态，应该会呈现如下图的样子：

var css=document.getElementById('css');
var d=document.getElementById('d');
var c=css.sheet;
c.insertRule("#d#d::before{content:'我是修改的 content ';}", 0);
c.insertRule("#d#d::before{color:blue;}", 0);

如此一来，呈现出来的效果就是通过JavaScript修改的。

修改伪元素content

<button id="b1">显示 ABC</button>
<button id="b2">显示 123</button>
<div data-text="我是预设文字">我是 div</div>

接着设定CSS，关键在使用content的attr，让伪元素直接显示父元素属性的内容。

button{
 font-size:16px;
}
div{
 margin:10px;
 font-size:20px;
}
div::before{
 content: attr(data-text) '，';
}

最后就是JavaScript的部分，通过setAttribute更改div的属性，就会看到content的内容修改了。

var b1=document.getElementById('b1');
var b2=document.getElementById('b2');
var d=document.querySelector('div');
b1.addEventListener('click',function(){
 d.setAttribute('data-text','ABC');
});
b2.addEventListener('click',function(){
 d.setAttribute('data-text','123');
});

文章来源：https://www.oxxostudio.tw/articles/201706/pseudo-element-3.html
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html
原文作者：oxxostudio
由于网页为繁体内容，术语描述和话术与我们有差异的问题，笔者在保证不改变原意的基础上做了调整，把上述两篇文章合成了一篇，并在此基础上进行了错误校正，如发现问题，欢迎你的指正

小结

. Vue 引言

渐进式 JavaScript 框架 --摘自官网

# 渐进式
   1. 易用  html css javascript
   2. 高效  开发前端页面 非常高效 
   3. 灵活  开发灵活 多样性

# 总结
        Vue 是一个javascript 框架

# 后端服务端开发人员: 
        Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定  双向绑定 MVVM  
        
        注意: 日后在使用Vue过程中页面中不要在引入Jquery框架
        
        htmlcss--->javascript ----->jquery---->angularjs -----> Vue
 
 # Vue 作者
         尤雨溪   国内的

2. Vue入门

2.1 下载Vuejs

//开发版本:
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//生产版本:
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一个入门应用

    <div id="app">
        {{ msg }}  {{username}} {{pwd}}

        <br>
        <span>
            {{ username }}
            <h1>{{ msg }}</h1>
        </span>

   </div>


    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",  //element 用来给Vue实例定义一个作用范围
            data:{      //用来给Vue实例定义一些相关数据
                msg:"我的第一个Vue入门应用",
                username:"hello Vue!",
                pwd :"12345",
            },
        });
    </script>

# 总结:
            1.vue实例(对象)中el属性:   代表Vue的作用范围  日后在Vue的作用范围内都可以使用Vue的语法
            2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在Vue作用范围内取出
            3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
            4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器

3. v-text和v-html

3.1 v-text

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部类似于javascript 中 innerText

        <div id="app" class="aa">
        <span >{{ message }}</span>
        <span v-text="message"></span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:"Vue欢迎您的使用"
            }
        })
    </script>

# 总结
            1.{{}}(插值表达式)和v-text获取数据的区别在于 
                    a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
                    b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

3.2 v-html

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部类似于javascript中 innerHTML

<div id="app" class="aa">
        <span>{{message}}</span>
        <br>
        <span v-text="message"></span>

        <br>
        <span v-html="message">xxxxxx</span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:"<a href=''>Vue欢迎您的使用</a>"
            }
        })
    </script>

4.vue中事件绑定(v-on)

4.1 绑定事件基本语法

        <div id="app">
        <h2>{{message}}</h2>
        <h2 v-text="message"></h2>
        <h2>年龄:{{ age }}</h2>
        <br>
        <input type="button" value="点我改变年龄" v-on:click="changeage">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                message:"hello Vue欢迎您的使用!",
                age:23,
            },
            methods:{  //methods 用来定义vue中时间
                changeage:function(){
                    alert('点击触发');
                }
            }
        })
    </script>

# 总结:
		事件  事件源:发生事件dom元素  事件: 发生特定的动作  click....  监听器  发生特定动作之后的事件处理程序 通常是js中函数
		1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如  v-on:click
		2.在v-on:事件名的赋值语句中是当前时间触发调用的函数名
		3.在vue中事件的函数统一定义在Vue实例的methods属性中
		4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据

4.2 Vue中事件的简化语法

		<div id="app">
        <h2>{{ age }}</h2>
        <input type="button" value="通过v-on事件修改年龄每次+1" v-on:click="changeage">
        <input type="button" value="通过@绑定时间修改年龄每次-1" @click="editage">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app=new Vue({
           el:"#app",  //element: 用来指定vue作用范围
           data:{
               age:23,
           },    //data   : 用来定义vue实例中相关数据
           methods:{
               changeage:function(){
                   this.age++;
               },
               editage:function(){
                   this.age--;
               }

           }  //methods: 用来定义事件的处理函数
        });
    </script>

# 总结:
			1.日后在vue中绑定事件时可以通过@符号形式 简化  v-on 的事件绑定

4.3 Vue事件函数两种写法

		<div id="app">
        <span>{{count}}</span>
        <input type="button" value="改变count的值" @click="changecount">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app=new Vue({
           el:"#app",
           data:{
               count:1,
           },
           methods:{
               /*changecount:function(){
                   this.count++;
               }*/
               changecount(){
                   this.count++;
               }
           }
        });
    </script>

# 总结:
			1.在Vue中事件定义存在两种写法  一种是 函数名:function(){}  推荐    一种是  函数名(){} 推荐

4.4 Vue事件参数传递

		<div id="app">
        <span>{{count}}</span>
        <input type="button" value="改变count为指定的值" @click="changecount(23,'xiaohei')">
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app=new Vue({
           el:"#app",
           data:{
               count:1,
           },
           methods:{
               //定义changecount
               changecount(count,name){
                   this.count=count;
                   alert(name);
               }
           }
        });
    </script>

# 总结:
			1.在使用事件时,可以直接在事件调用出给事件进行参数传递,在事件定义出通过定义对应变量接收传递的参数

5.v-show v-if v-bind

5.1 v-show

v-show:用来控制页面中某个标签元素是否展示底层使用控制是 display 属性

<div id="app">
    <!--
        v-show: 用来控制标签展示还是隐藏的
    -->
    <h2 v-show="false">Vue欢迎您的使用!</h2>
    <h2 v-show="show">Vue欢迎您的使用！这是vue中定义变量true!</h2>
    <input type="button" value="展示隐藏标签" @click="showmsg">

</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            show:false,
        },
        methods:{
            //定义时间
            showmsg(){
               this.show=!this.show;
            }
        }
    })
</script>

# 总结
			1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
			2.在v-show中可以通过boolean表达式控制标签的展示和隐藏

5.2 v-if

v-if: 用来控制页面元素是否展示底层控制是DOM元素操作DOM

<div id="app">
    <h2 v-if="false">Vue3.0</h2>
    <h2 v-if="show">Vue3.0欢迎您的使用</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            show:false
        },
        methods:{

        }
    });
</script>

5.3 v-bind

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

<div id="app">

    <img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}"  src="Vuelogo.jpg" alt="">
    
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app=new Vue({
        el:"#app",
        data:{
            msg:"Vue官方logo!!!!",
            showCss:true,
        },
        methods:{
        }
    })
</script>

6.v-for的使用

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

<div id="app">

    <span>{{ user.name }} {{ user.age }}</span>
    <br>
    <!--
       通过v-for遍历对象
    -->
    <span v-for="(value,key,index) in user">
        {{index}} : {{key}} : {{value}}
    </span>

    <!--
        通过v-for遍历数组
    -->
    <ul>
        <li v-for="a,index in arr" >
            {{index}} {{a}}
        </li>
    </ul>

    <!--
        通过v-for遍历数组中对象
        :key 便于vue内部做重用和排序
    -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {{index+1}} {{ user.name }}==={{ user.age }}===={{ user.content }}
        </li>
    </ul>

</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el: "#app",
        data: {
            user:{name:"小V",age:23},
            arr:["Vue1.0", "Vue2.0", "Vue3.0"],
            users:[
                {id:"1",name:"xiaoV",age:23,content:"我曾经也是一个单纯的少年!"},
                {id:"2",name:"小白",age:23,content:"我曾经是一个邪恶的少年!"},
            ]
        },
        methods: {}
    });
</script>

# 总结
	1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key

7 .v-model 双向绑定

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

<div id="app">
    <input type="text" v-model="message">
    <span>{{message}}</span>
    <hr>
    <input type="button" value="改变Data中值" @click="changeValue">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el: "#app",
        data: {
            message:""
        },
        methods: {
            changeValue(){
                this.message='Vue3.0欢迎您的使用！';
            }
        }
    });
</script>

# 总结
		1.使用v-model指令可以实现数据的双向绑定 
		2.所谓双向绑定 表单中数据变化导致vue实例data数据变化   vue实例中data数据的变化导致表单中数据变化 称之为双向绑定

# MVVM架构  双向绑定机制
	Model: 数据  Vue实例中绑定数据
	VM:   ViewModel  监听器
	View:  页面  页面展示的数据

# ***************Vue基础示例讲解持续中，感谢关注一下呦。***************

在线咨询

上一篇：HTML+JS框架下开发与VUE框架下开发最基础的区
下一篇：网页上的文字禁止复制？教你一串代码，3秒破解

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 伪元素基础知识：first-line、fir

::first-line

::first-letter

::selection

延伸阅读——用JavaScript操控伪元素

小结

::first-line

::first-letter

::selection

延伸阅读——用JavaScript操控伪元素

小结

. Vue 引言

2. Vue入门

2.1 下载Vuejs

2.2 Vue第一个入门应用

3. v-text和v-html

3.1 v-text

3.2 v-html

4.vue中事件绑定(v-on)

4.1 绑定事件基本语法

4.2 Vue中事件的简化语法

4.3 Vue事件函数两种写法

4.4 Vue事件参数传递

5.v-show v-if v-bind

5.1 v-show

5.2 v-if

5.3 v-bind

6.v-for的使用

7 .v-model 双向绑定

您的项目需求