CSS基础篇之选择符2
属性选择符：
|
选择符 |
版本 |
描述 |
|
E[att] |
CSS2 |
选择具有att属性的E元素。 |
|
E[att="val"] |
CSS2 |
选择具有att属性且属性值等于val的E元素。 |
|
E[att~="val"] |
CSS2 |
选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。 |
|
E[att^="val"] |
CSS3 |
选择具有att属性且属性值为以val开头的字符串的E元素。 |
|
E[att$="val"] |
CSS3 |
选择具有att属性且属性值为以val结尾的字符串的E元素。 |
|
E[att*="val"] |
CSS3 |
选择具有att属性且属性值为包含val的字符串的E元素。 |
|
E[att|="val"] |
CSS2 |
选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。 |
各个例子：
E[att]
<style>
img[alt] {
margin: 10px;
}
</style> <img src="图片url" alt="" />
<img src="图片url" />
这里我用了所有img标签里有alt属性就会字体整个10个像素大小，这里只有第一个img元素里面有alt属性有alt属性的元素字体会变成10个像素大小。
E[att="val"]
<style>
input[type="text"] {
border: 2px solid #000;
}
</style> <input type="text" />
<input type="submit" />
这里代表所有input里面的有type=“text”属性的边框为2个像素 黑色实线。
E[att~="val"]
<style>
div[class~="a"] {
border: 2px solid #000;
}
</style> <div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>
div标签里用空格间隔的class=“a”（其中一个属性值有a）都会选择到。
E[att^="val"]
<style>
div[class^="a"] {
border: 2px solid #000;
}
</style> <div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
div标签里面class属性值开头第一个字符串为a的都会选择到。
E[att$="val"]
<style>
div[class$="c"] {
border: 2px solid #000;
}
</style> <div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
div标签里面class属性值最后一个字符串为（a）的都会选择到。
E[att|="val"]
<style>
div[class*="b"] {
border: 2px solid #000;
}
</style> <div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>
div标签里面class属性值里面有相同的字符串（b）就会选择到。
E[att*="val"]
<style>
div[class|="a"] {
border: 2px solid #000;
}
</style> <div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>
div标签里面class属性值里面有这个符号 - 的，例子里是a-的属性值会改变。
伪对象选择符：
|
E:first-letter/E::first-letter |
CSS1/3 |
设置对象内的第一个字符的样式。 |
|
E:first-line/E::first-line |
CSS1/3 |
设置对象内的第一行的样式。 |
|
E:before/E::before |
CSS2/3 |
设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
|
E:after/E::after |
CSS2/3 |
设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
|
E::placeholder |
CSS3 |
设置对象文字占位符的样式。 |
|
E::selection |
CSS3 |
设置对象被选择时的颜色。 |
E:first-letter/E::first-letter
此伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。该伪类常被用来配合font-size属性和float属性制作首字下沉效果。
<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
</style>
</head>
<body>
<h1>杂志常用的首字下沉效果</h1>
<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
</body>
E:first-line/E::first-line
效果：选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。
<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-line {color:#090;}
p::first-line {color:#090;}
</style>
</head>
<body>
<h1>第一行文字的颜色与其它不同</h1>
<p>今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
</body>
E::placeholder
用于文本框的提示字体。
<style>
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;
}
</style>
</head>
<body> <input id="test" placeholder="请输入密码!"> </body>
E::selection
设置对象被选择时的样式
需要注意的是，::selection只能定义被选择时的background-color，color及text-shaow
<style>
p::-moz-selection{background:#000;color:#f00;}
p::selection{background:#000;color:#f00;}
</style>
</head>
<body>
<h1>选中下面的文字，看看它的颜色</h1>
<p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
字体样式
font-family（字体的样式）
p { font-family:‘宋体'，'黑体', '微软雅黑’ }
输入多个字体时用，号间隔。输入的字体样式名称加 ‘ ’ 号。多字体样式用于查看浏览器字体种类如果你没有其中一个还能用其他几个。
font-size（字体大小）
p { font-size:1px;}
改变你所要的标签元素的字体大小。
font-weight（字体的加粗）
p { font-weight:bold;}
虽然可以用数值调，但不建议用因为区别不大。最好用bold。
font-style（字体倾斜）
p { font-style: normal; }
指定文本字体样式为正常的字体
p { font-style: italic; }
指定文本字体样式为斜体。对于没有设计斜体的特殊字体。（先天）
p { font-style: oblique; }
指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字。（后天）
font（字体样式缩写）
这是没有缩写
p{
font-style:italic;
font-weight:bold;
font-size:14px;
line-height:22px;
font-family:宋体;
}
缩写后
p { font:italic bold 14px/22px 宋体}
其实属性写发顺序是是否倾斜-字体的加粗-字体大小-字体高度-字体样式这个顺序。注意大小和高度中间要用 / 号分开。
color（字体颜色）
颜色有三种值
1.颜色英文单词 blue、yellow。在这个取色比较少
p{
color:#blue;
}
2.十六进制表示法用 # 开头的PS里面颜色也有这个
p{
color:#FF0000;
}
3.RGB PS里面也有的
p{color:rgb(0,0,0);}
数值0~255
4.rpga 后面的A表示透明度50%
p{
color:（0，0，0，.5）;
}
前面三个数值从0~255最后一个是透明多少。
text-decorcation（文本装饰线条）
p { text-decoration:overline;}
overline：指定文字的装饰是上划线
p { text-decoration:underline;}
underline：指定文字的装饰是下划线
p { text-decoration:line-through;}
line-through：指定文字的装饰是删除线 text-shaow
属性和值
h-shaow 必写。水平阴影的位置。可以负值。
v-shaow 必写。垂直阴影的位置。可以负值。
blur 可选。阴影模糊的距离。
color 可选。阴影的颜色。 完整
h1{
h-shadow:-3px;
v-shadow:-4px;
blur:5px;
color:blue;
}
缩写
h1{
text-shadow: 2px 2px #ff0000;
}
缩写写法顺序h-shadow、v-shadow、blur、color
CSS基础篇之选择符2的更多相关文章
- CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
- CSS基础篇之选择符3
border(边框) 如何用CSS调出边框 我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度 第二个值是为边框线样式为直线 ...
- CSS全览_选择符+特指+单位+字体
CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnb ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- 好程序员web前端分享CSS基础篇
学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...
- 前端面试题——html与css基础篇
整理一波html和css的面试题,侧重基础,希望明天面试能用到~(╥╯^╰╥) 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.C ...
- html/css基础篇——iframe和frame的区别【转】
转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...
- html/css基础篇——html代码编写过程中的几个警惕点
本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里. 1.内联标签之间的空格 正常情况下书写 ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
随机推荐
- 四、线程同步之Lock和Condition
Lock同步锁 Lock 在jdk1.5 提供了Lock以便执行同步操作,和synchronized不同的是Lock提供了显示的方法获取锁和释放锁.Lock提供了以下几个方法,请求和释放锁: voi ...
- 2016最后一贴，终于调通一个测试示例，并发现一个BUG？？？
真的难点在于第一次调通.纠结五天,终于搞出界面. 也发现了一个书上代码,编辑用户时死活不通的情况,我将Links去了,改在data里,我X,,全OK了.. 原来的代码: onAdd: function ...
- MySQL和Lucene索引对比分析
MySQL和Lucene都可以对数据构建索引并通过索引查询数据,一个是关系型数据库,一个是构建搜索引擎(Solr.ElasticSearch)的核心类库.两者的索引(index)有什么区别呢?以前写过 ...
- Mac 显示隐藏文件
defaults write com.apple.finder AppleShowAllFiles -bool true 此命令显示隐藏文件defaults write com.apple.finde ...
- Swift String类型常规操作
去除string 首尾的空格var str = " Hello the world "let whitespace = NSCharacterSet.whitespaceAnd ...
- P87LPC760/61/62/64/67/68/69/78/79芯片解密单片机破解价格
NXP恩智浦P87LPC760/61/62/64/67/68/69/78/79芯片解密单片机破解 NXP LPC700系列单片机解密型号: P87LPC759.P87LPC760.P87LPC761. ...
- Maven依赖包下载慢--阿里云让你飞
当用maven下载依赖包的时候,用官方的镜像库,那慢的真是要死要死的.后来在网上搜到英国的库(也是慢的不行),国内的oschina更是直接没法下载呀.不过还好突然发现阿里云也有镜像库,尝试了以下,速度 ...
- Building a RESTful Web Service
Reference: https://spring.io/guides/gs/rest-service/ 参照上述链接进行操作,使用gradle build. 因为total new to this. ...
- 原生js实现查询天气的小应用
demo:https://zsqosos.github.io/weather/ 截图: 实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的AP ...
- JavaScript使用封装
基本封装方法 请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写" ...