今天小编跟大家讲解下有关浅谈css之属性及剩余的选择符 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关浅谈css之属性及剩余的选择符 的相关资料，希望小伙伴们看了有所帮助。
今天的课程加速了，比平时快了些，但觉得很不错。nice~
属性选择符
E[att] 选择具有att属性的E元素。
XML/HTML Code复制内容到剪贴板 input[type]{color:#red;}<inputtype="radio">E[att="val"] 选择具有att属性且属性值等于val的E元素。
XML/HTML Code复制内容到剪贴板 input[type="radio"]{color:#red;} <inputtype="radio">E[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
XML/HTML Code复制内容到剪贴板 a[class~="ht"]{font-size:16px;} <ahref=""class="htsss"></a>E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
XML/HTML Code复制内容到剪贴板 a[href^="www"]{font-size:16px;}<ahref=""></a>E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素。
XML/HTML Code复制内容到剪贴板 input[type$="o"]{color:red;} <inputtype="radio">E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。
XML/HTML Code复制内容到剪贴板 input[type*="ad"]{color:red;} <inputtype="radio">E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
XML/HTML Code复制内容到剪贴板 input[class|="te"]{color:red;} <inputtype="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复制内容到剪贴板 <pclass="t1">测试css的伪对象选择符，天气晴朗，阳光明媚!</p> p.t1{width:100px;border:1pxsolidblack;} 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：<inputtype="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> p::-moz-selection{background-color:#E13300;color:white;} p::selection{background-color:#E13300;color:white;}css的样式
font-family 设置文字名称，可以使用多个名称，或者使用逗号 分隔，浏览器则按照先后顺序依次使用可用字体。
XML/HTML Code复制内容到剪贴板 p{font-family:‘宋体'，'黑体','Arial’}font-size 设置文字的尺寸
注：如果用百分比作为单位，则是基于父元素字体的大小
XML/HTML Code复制内容到剪贴板 p{font-size:14px;}font-weight 控制字体粗细
CSS Code复制内容到剪贴板 p{font-weight:bold;}font-style 控制字体是否倾斜
XML/HTML Code复制内容到剪贴板 p{font-style:normal;} p{font-style:italic;} p{font-style:oblique;}font(字体样式缩写)
XML/HTML Code复制内容到剪贴板 font:font-style||font-variant||font-weight||font-size||/line-height||font-family p{font:italicbold14px/22px宋体}color 控制文本的字体颜色
XML/HTML Code复制内容到剪贴板 p{ color:#FF0000; }text-decoration(文本装饰线条) 控制文本装饰线条
XML/HTML Code复制内容到剪贴板 text-decoration:none||underline||blink||overline||line-through p{text-decoration:overline;} p{text-decoration:underline;} p{text-decoration:line-through;}text-shadow(文字阴影) 控制文字的阴影部分。
XML/HTML Code复制内容到剪贴板 text-shadow:h-shadowv-shadowblurcolor; h-shadow必需。水平阴影的位置。允许负值。 v-shadow必需。垂直阴影的位置。允许负值。 blur可选。模糊的距离。 color可选。阴影的颜色。 h1{ text-shadow:2px2px#ff0000; }width 宽度
XML/HTML Code复制内容到剪贴板 width:auto|length p{width:300px;} div{width:50%;}height 高度
CSS Code复制内容到剪贴板 height:auto|length img{height:200px;} div{height:100px;}margin 外边距
CSS Code复制内容到剪贴板 margin:auto|length margin-top设置上边的外边距 margin-bottom设置下边的外边距 margin-left设置左边的外边距 margin-right设置右边的外边距 div{width:300px;height:100px;margin:10px;} div{width:300px;height:100px;margin:0auto;} 缩写型式： margin:上边距右边距下边距左边距 margin:上下边距左右边距 margin:上边距左右边距下边距padding 内边距
CSS Code复制内容到剪贴板 padding:length div{width:300px;height:100px;padding:10px;} padding-top设置上边的内边距 padding-bottom设置下边的内边距 padding-left设置左边的内边距 padding-right设置右边的内边距 缩写型式： padding:上边距右边距下边距左边距 padding:上下边距左右边距 padding:上边距左右边距下边距补充知识：
padding内边距
当一个盒子设置了背景图像后，默认情况下背景图像覆盖的范围是padding和内容组成的范围，并以padding的左上角为基准点平铺背景图像。
border边框
border边框里在IE并不显示背景图像的内容，在Firefox则显示背景图像的内容。
因为边框是介于内边距和外边距之间的，当边框设置为虚线时，在IE中，虚线空白的地方露
出来的是padding部分的背景，而在Firefox中，虚线空白的地方露出来的是margin部分的背景。
margin外边距
body是个特殊的盒子，它的背景色会延伸到margin的部分，而其他盒子的背景色只会覆盖“padding+内容 部分”（IE浏览器中）或者“border+padding+内容”部分（Firefox浏览器中）
margin用于控制块与块之间的距离。
倘若将盒子模型比作展览馆里展出的一幅幅画，那么content就是画面本身，padding就是画面与画框之间的留白，border就是画框，而margin就是画与画之间的距离。
以上这篇浅谈css之属性及剩余的选择符就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持爱蒂网。
来源：爱蒂网
