浅谈css之属性及剩余的选择符
副标题[/!--empirenews.page--]
今天的课程加速了,比平时快了些,但觉得很不错。nice~ 属性选择符 E[att] 选择具有att属性的E元素。
XML/HTML Code复制内容到剪贴板
input[type]{color: #red;}<input type="radio"> E[att="val"] 选择具有att属性且属性值等于val的E元素。
XML/HTML Code复制内容到剪贴板
input[type="radio"]{color: #red;} <input type="radio"> E[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。
XML/HTML Code复制内容到剪贴板
a[class~="ht"]{font-size: 16px;} <a href="" class="ht sss"></a> E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
XML/HTML Code复制内容到剪贴板
a[href^="www"]{font-size: 16px;}<a href=""></a> E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素。
XML/HTML Code复制内容到剪贴板
input[type$="o"]{color: red;}
<input type="radio"> E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。
XML/HTML Code复制内容到剪贴板
input[type*="ad"]{color: red;}
<input type="radio"> E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
XML/HTML Code复制内容到剪贴板
input[class|="te"]{color: red;}
<input type="radio" class="te-ss"> E:first-letter/E::first-letter 设置对象内的第一个字符的样式。 就是匹配的到的元素的第一个字。 E:first-line/E::first-line 设置对象内的第一行的样式。 E:before/E::before 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用 E:after/E::after 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用 E::placeholder 设置对象文字占位符的样式。 E::selection 设置对象被选择时的颜色。
XML/HTML Code复制内容到剪贴板
<p class="t1">测试css的伪对象选择符,天气晴朗,阳光明媚!</p> p.t1{width:100px;border:1px solid black;} /* CSS3的语法改成 ::,原本是: */ p.t1::first-letter {font-size:20px;font-weight:bold;}/*第一个字符*/ p.t1::first-line {color:blue;}/* 第一行 */ css: .t2::before{content:'123';} .t2::after{content:'123';} 兼容:
CSS Code复制内容到剪贴板
html:<input type="search" placeholder="测试"> css: input::-webkit-input-placeholder { color: green;}
input:-ms-input-placeholder { // IE10+ color: green;}
input:-moz-placeholder { // Firefox4-18 color: green;}
input::-moz-placeholder { // Firefox19+ color: green;}
CSS Code复制内容到剪贴板
<h3>请使用鼠标选取我</h3> <p>请使用鼠标选取我</p>
(编辑:核心网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |