前言：
如今朋友们对“css点击文字变色”大体比较重视，咱们都想要分析一些“css点击文字变色”的相关文章。那么小编也在网摘上收集了一些关于“css点击文字变色””的相关文章，希望你们能喜欢，看官们快快来学习一下吧！伪类
a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定(点击时)的链接 */.tButton:link {color: #FF0000}.tButton:visited {color: #FF0000}.tButton:hover {color: #FF0000}.tButton:active {color: #FF0000}注意:
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后, 才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后, 才是有效的。
记住, 这四种状态, 在css中, 必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
常用的a链接样式：
a:link,a:visited{text-decoration:none;color:#444;}a:hover{color:#f00;}伪元素
:first-line 伪元素
"first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式：
:first-letter 伪元素
first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式：
:before 选择器
:before 选择器在被选元素的内容前面插入内容。
请使用 content 属性来指定要插入的内容。
在每个 <p> 元素的内容之前插入新内容：
p:before{content:"台词：";}:after 选择器
:after 选择器在被选元素的内容后面插入内容。
请使用 content 属性来指定要插入的内容。
p:after{content:"台词：";}:selection 对光标选中的元素添加样式。
特殊符号的使用
.label:before{content:"\2715";margin-right:0.3rem;}筛选分功能的伪类
:empty 选取没有子元素的元素。比如选择空的 span, 就可以用 span:empty 选择器来选择。这里要注意元素内有空格的话也不能算空, 不会被这个伪类选中。
:checked 选取勾选状态的 input 元素， 只对 radio 和 checkbox 生效。
:disabled 选取禁用的表单元素。
:first-child 选取当前选择器下第一个元素。
:last-child 与first-child 相反, 选取当前选择器下最后一个元素。
:nth-child(an+b) 选取指定位置的元素。比如使用 li:nth-child(2n+1)
:nth-last-child(an+b) 这个伪类和 nth-child 相似, 只不过在计数的时候, 这个伪类是从后往前计数。
:only-child 选取唯一子元素。如果一个元素的父元素只有它一个子元素, 这个伪类就会生效。如果一个元素还有兄弟元素, 这个伪类就不会对它生效。
:only-of-type 选取唯一的某个类型的元素。如果一个元素的父元素里只有它一个当前类型的元素, 这个伪类就会生效。这个伪类允许父元素里有其他元素, 只要不和自己一样就可以。
实例:制作首行特效
<html><head><style type="text/css">p:first-line{color: #ff0000;font-variant: small-caps}</style></head><body><p>You can use the :first-line pseudo-element to add a special effect to the first line of a text!</p></body></html>实例:制作首字母特效
<html><head><style type="text/css">p:first-letter{color: #ff0000;font-size:xx-large}</style></head><body><p>You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!</p></body></html>子选择器
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
nth-child(①阿拉伯数字 ②odd even ③表达式)
li:nth-child(3n+1){color: red;}实例:
<!DOCTYPE html><html lang="zh"><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>Document</title><style type="text/css">/*strong:nth-child(阿拉伯数字2){选择stong并且strong在家里的排行是老2}strong:nth-of-type(阿拉伯数字2){选择strong但是他只要是类型的第二个就行了}*//*strong:nth-child(2){ /* 没有 */color: red;}*/strong:nth-of-type(2){ /* <strong>我是三哥</strong> */color: green;}</style></head><body><div><strong>我是大哥</strong><em>我是二姐</em><strong>我是三哥</strong><em>我是四妹</em></div></body></html>实例: 各行变色
<!DOCTYPE html><html lang="zh"><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>Document</title><style type="text/css">li:nth-child(even){background-color: orange;}li:nth-child(odd){background-color: pink;}li:nth-child(5){/*单独给第5个设置了*/background-color: purple;}</style></head><body><button id="btn">新建</button><ul id="ul"><li>明年或有4000亿外资入市 美联储12月或再加息</li><li>科技 | 谷歌"临时工"向CEO发公开信 要求提高工资</li><li>iOS 12.1.1更新发布：支持更多运营商使用双SIM卡</li><li>体育 | 献上膝盖!外籍大神足彩11连中赚3040倍赢不停</li><li>三年抱俩！江宏杰宣布福原爱怀二胎 已怀孕6个月</li><li>曝林志颖登机后要拿行李 致航班延误惹人怨</li><li>库里飙9三分戏耍般轰42+9+7 复出后光速回归巅峰</li></ul><script type="text/javascript">btn.onclick = function(){ul.innerHTML += "<li>陈伟腾的爱豆是kobe</li>";}</script></body></html>CSS2.1中只能给标签增加：a:link、a:hover、a:visited、a:active
:focus input:focus 选择获得焦点的 input 元素。
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
:checked input:checked 选择每个被选中的 <input> 元素。
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:target #news:target 选择当前活动的 #news 元素
<!DOCTYPE html><html lang="zh"><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>Document</title><style type="text/css">/*伪类选择器我们通常习惯用一个冒号隔开*//*获得焦点*/input[type="text"]:focus{border-color: red;outline: none;}/*元素被选中*/[type="checkbox"]:checked,[type="radio"]:checked{width: 50px;height: 50px;}/*被禁用的 说白了就是元素有disable属性的标签*/button:disabled{background-color: orange;}</style></head><body><!--CSS2.1中只能给标签增加：a:link、a:hover、a:visited、a:active:focus input:focus 选择获得焦点的 input 元素。:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。:checked input:checked 选择每个被选中的 <input> 元素。:enabled input:enabled 选择每个启用的 <input> 元素。:disabled input:disabled 选择每个禁用的 <input> 元素:target #news:target 选择当前活动的 #news 元素--><input type="text" name="" id="" value="" /><input type="radio" name="" id="" value="" /><input type="checkbox" name="" id="" value="" /><button disabled>按钮被禁用</button><button>按钮可点击</button></body></html>:selection
文本被选中的时候
<!DOCTYPE html><html lang="zh"><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>Document</title><style type="text/css">div{width: 600px;border: 1px solid red;}/*伪元素选择器我们习惯用2个冒号*//*div:after{content: "NBA";}*//*首字*/div::first-letter{font-size: 48px;}/*首行*/div::first-line{background-color: orange;}/*文本被选中的时候*/div::selection{/*它必须是2个冒号*/color: #fff;background-color: pink;}</style></head><body><div>可怕的是，库里有手感时，他是无法阻挡的，此后他继续施展外线火力，首节就投出5中4的三分表现。首节他又得到了16分，上一场比赛他首节得到18分，看来复出后库里的状态是迅速又回到了开季的巅峰。库里下去休息时，为勇士建立了7分的优势，结果他在场下没一阵功夫，优势都被骑士重新追赶回去了。重新上阵后，库里还是保持良好的进攻状态，外线又是4中2，而且他在该传球时就果断传，不会拖泥带水。半场最后阶段，骑士突然打出进攻高潮，狂中3分，库里也有回应，但对面还是各种神仙球也进，没办法，上半场勇士暂时落后。</div></body></html>:only-child和:only-of-type<!DOCTYPE html><html lang="zh"><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>Document</title><style type="text/css">del:only-child{/*我选择del标签并且该标签作为div唯一的儿子*/color: red;}del:only-of-type{/*我选择del标签并且该标签作为div唯一的类型*/background-color: orange;}</style></head><body><div><strong>我是大哥</strong><em>我是二姐</em><strong>我是三哥</strong><em>我是四妹</em><del>我是五弟</del></div></body></html>:nth-child和nth-last-child
<!DOCTYPE html><html lang="zh"><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>Document</title><style type="text/css">em:nth-child(3){color: red;}/*倒数*/em:nth-last-child(2){text-decoration: underline;}</style></head><body><div><strong>我是大哥</strong><em>我是二姐</em><strong>我是三哥</strong><em>我是四妹</em><del>我是五弟</del></div></body></html>:not<!DOCTYPE html><html lang="zh"><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>Document</title><style type="text/css">span:not(:last-child){border-right: 1px solid red;}</style></head><body><span>首页</span><span>首页</span><span>首页</span><span>首页</span><span>首页</span></body></html> 标签： #css点击文字变色
