加入收藏 | 设为首页 | 会员中心 | 我要投稿 52站长网 (https://www.52zhanzhang.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 服务器 > 系统 > 正文

浅谈css之属性及剩余的选择符

发布时间:2020-03-15 23:30:01 所属栏目:系统 来源:站长网
导读:副标题#e# 今天的课程加速了,比平时快了些,但觉得很不错。nice~ 属性选择符 E[att] 选择具有att属性的E元素。 XML/HTML Code复制内容到剪贴板 input[type]{color:#red;}inputtype=radio E[att=val] 选择具有att属性且属性值等于val的E元素。 XML/HTML Cod
副标题[/!--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>   

  

(编辑:52站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读