您现在的位置是：网站首页> 编程资料编程资料

浅谈css之属性及剩余的选择符_CSS教程_CSS_网页制作_

2023-11-11 306人已围观

简介 下面小编就为大家带来一篇浅谈css之属性及剩余的选择符。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

今天的课程加速了，比平时快了些，但觉得很不错。nice~

属性选择符

E[att]       选择具有att属性的E元素。

XML/HTML Code复制内容到剪贴板
  1. input[type]{color: #red;}<input type="radio">  

E[att="val"]      选择具有att属性且属性值等于val的E元素。

XML/HTML Code复制内容到剪贴板
  1. input[type="radio"]{color: #red;}   
  2. <input type="radio">  

E[att~="val"]     选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

XML/HTML Code复制内容到剪贴板
  1. a[class~="ht"]{font-size: 16px;}   
  2. <a href="www.jb51.net" class="ht sss">a>  

E[att^="val"]    选择具有att属性且属性值为以val开头的字符串的E元素。

XML/HTML Code复制内容到剪贴板
  1. a[href^="www"]{font-size: 16px;}<a href="www.jb51.net">a>  

E[att$="val"]     选择具有att属性且属性值为以val结尾的字符串的E元素。

XML/HTML Code复制内容到剪贴板
  1. input[type$="o"]{color: red;}   
  2.   
  3. <input type="radio">  

E[att*="val"]      选择具有att属性且属性值为包含val的字符串的E元素。

XML/HTML Code复制内容到剪贴板
  1. input[type*="ad"]{color: red;}   
  2.   
  3. <input type="radio">  

E[att|="val"]      选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

XML/HTML Code复制内容到剪贴板
  1. input[class|="te"]{color: red;}   
  2.   
  3. <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复制内容到剪贴板
  1. <p class="t1">测试css的伪对象选择符，天气晴朗，阳光明媚!p>  
  2. p.t1{width:100px;border:1px solid black;} /* CSS3的语法改成 ::,原本是: */   
  3. p.t1::first-letter {font-size:20px;font-weight:bold;}/*第一个字符*/   
  4. p.t1::first-line {color:blue;}/* 第一行 */   
  5. css: .t2::before{content:'123';}   
  6. .t2::after{content:'123';}  

兼容：

CSS Code复制内容到剪贴板
  1. html："search" placeholder="测试">   
  2. css:    
  3.    input::-webkit-input-placeholder {   
  4.     color: green;}   
  5.   
  6.    input:-ms-input-placeholder { // IE10+   
  7.     color: green;}   
  8.   
  9.    input:-moz-placeholder { // Firefox4-18   
  10.     color: green;}   
  11.   
  12.    input::-moz-placeholder { // Firefox19+   
  13.     color: green;}  
CSS Code复制内容到剪贴板

  1. 请使用鼠标选取我

      
  2.  

    请使用鼠标选取我

      
  3.   
  4. p::-moz-selection{ background-color:#E13300; color: white;}   
  5. p::selection{ background-color: #E13300; color: white; }  

css的样式

font-family    设置文字名称，可以使用多个名称，或者使用逗号 分隔，浏览器则按照先后顺序依次使用可用字体。

XML/HTML Code复制内容到剪贴板
提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：浅谈CSS 权值 层叠 重要性(!important)_CSS教程_CSS_网页制作_

下一篇：深入理解CSS行高line-height与文本垂直居中的原理_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网