css3基础知识——回顾
2018-06-24 00:55:36来源：未知 阅读 ()
1.属性选择器
完全匹配的属性选择器 [id=article]{}
示例：
<style>
input[type=text]{ border: 2px solid red;}
</style>
<input type="text">
<input type="text">
<input type="password">
结果：前两文本框的边框为两像素红色。
包含匹配元素选择器，包含制定的字符串。
语法：[attribute*=vlue] attribute指的属性名，value 指的是属性值。
示例：
<style>
p[id*=css]{color: red;}
</style>
<p id="css_one">css3巩固学习</p>
<p id="left">css3巩固学习</p>
<p id="css_two">css3巩固学习</p>
结果：第一个和第三个文本会变红
首字符匹配选择器，只要开头字符符合匹配。
语法：[attribute^=vlue] attribute指的属性名，value 指的是属性值。
示例：
<style>
p[id^=c]{ color: red;}
</style>
<p id="css_one">css3巩固学习</p>
<p id="css_two">css3巩固学习</p>
<p id="mss_one">css3巩固学习</p>
结果：第一个第二个文字变为红色，第三个颜色不变
尾字符匹配选择器，只要匹配结尾的字符串。
语法：[attribute$=vlue] attribute指的属性名，value 指的是属性值。
示例：
<style>
p[id$=e]{color: red;}
</style>
<p id="css_one">css3巩固学习</p>
<p id="css_two">css3巩固学习</p>
<p id="mss_one">css3巩固学习</p>
结果：第一个和第三个文字变成红色，第二个颜色不变
匹配所有包含该单词属性的选择器。
语法 [attribute~=vlue] vlue 是一个单词
示例：
<style>
p[id~=css]{color: red;}
</style>
<p id="cmm one">css3巩固学习</p>
<p id="cmm two">css3巩固学习</p>
<p id="cnn three">css3巩固学习</p>
结果：第一个第二文字会变红，第三个不会变
匹配开头必须是特定单词属性选择器。
语法 [attribute|=vlue] vlue 是一个单词
示例：
<style>
p[id|=cmm]{color: red;}
</style>
<p id="cmm-one">css3巩固学习</p>
<p id="cmm-two">css3巩固学习</p>
<p id="cnn-three">css3巩固学习</p>
结果：第一个第二文字会变红，第三个不会变。
2.伪类选择器
指定元素列表中第一个元素:first-child
语法：li:first-child{}
示例：
<style>
li:first-child{color: red;}
</style>
<ul>
<li>css3巩固</li>
<li>css3巩固</li>
<li>css3巩固</li>
</ul>
结果：第一个li的文字变为红色
指定元素列表中最后一个元素:last-child
语法：li:last-child{}
示例：
<style>
li:last-child{color: red;}
</style>
<ul>
<li>css3巩固</li>
<li>css3巩固</li>
<li>css3巩固</li>
</ul>
结果：最后一个li里的文字变为红色。
注意：p:last-child 等同于 p:nth-last-child(1)
父标签下的指定类型的子元素:nth-child
语法：p：nth-child(){}
示例：
<style>
p:nth-child(2){color: red}
</style>
<div>
<p>css3巩固</p>
<p>css3巩固</p>
<div>css3巩固</div>
</div>
结果：第二p标签内的元素变为红色。
<style>
p:nth-child(2){color: red}
</style>
<div>
<p>css3巩固</p>
<div>css3巩固</div>
<p>css3巩固</p>
</div>
结果 ：没有任何效果
选择父标签下的第几个指定元素:nth-of-type
语法：:nth-of-type(){}
示例：
<style>
p:nth-of-type(2){color: red;}
</style>
<div>
<p>css3巩固</p>
<div>css3巩固</div>
<p>css3巩固</p>
</div>
结果：最后一个元素内文字变为红色。
:nth-child(odd),nth-child(even) 选择奇数和偶数。
示例：
<style>
li:nth-child(odd){color: red;}
li:nth-child(even){color: blue;}
</style>
<ul>
<li>css3巩固</li>
<li>css3巩固</li>
<li>css3巩固</li>
<li>css3巩固</li>
</ul>
结果：奇数行内的文字变为红色，偶数行内的文字变为
指定的属于父元素特定类型的唯一的子元素:only-of-type。
示例：
<style>
p:only-of-type{background:#ff0000;}
</style>
<div>
<p>这是一个段落。</p>
</div>
<div>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</div>
结果： 第一个div里面的p元素背景会变成红色 第二div里面的不会变色。
选择指定的空元素p:empty
示例：
<style>
li{width: 100px; height: 20px;}
li:empty{background: red;}
</style>
<ul>
<li></li>
<li>123</li>
<li></li>
</ul>
结果：第一个li和最后一个li北京会变成红色。
选择器可以用于选取当前活动的目标元素:target。
示例：
<style>
div{width:300px;height:200px;background:yellow; font:50px/200px "微软雅黑"; color:#fff; text-align:center; display:none;}
div:target{ display:block;}
</style>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
结果：点击对应的a标签下面对应的div 显示。
选取启用的表单元素:enabled。
示例：
<style>
input[type="text"]:enabled{background:red; }
</style>
<input type="text">
<input type="text" disabled>
结果：第一个input 背景会变为红色 ，第二个不会变。
选取启用的表单元素:disabled。
示例：
<style>
input[type="text"]:disabled{background:red; }
</style>
<input type="text">
<input type="text" disabled>
结果：第一个input 背景不会变色 ，第二个变为红色。
选择已被选中的input元素（只用于单选按钮和复选框）
示例：
<style>
input:checked{width:30px; height: 30px;}
</style>
<input type="radio">
<input type="checkbox">
<input type="button">
结果：第一个和第二个input会变大，第三个不会变。
示例：
<style>
.test_checkbox,
.test_more,
.test_hide,
.test_checkbox:checked ~ .test_label .test_show {position:absolute;display: none;}
.test_checkbox:checked ~ .test_more,
.test_checkbox:checked ~ .test_label .test_hide {position: static;display: inline-block;}
</style>
css3巩固学习...
<input type="checkbox" id="testToggleCheckbox" class="test_checkbox" />
<span class="test_more">撸起袖子加油干！</span>
<label class="test_label" for="testToggleCheckbox">
<span class="test_hide">收起↑</span>
<span class="test_show">展开↓</span>
</label>
结果：点击收起和展开实现省略号后面的显示和隐藏。
示例：
<style>
.test_box{width: 50%; min-width: 250px; margin: 1em auto; position: relative;}
.test_tab{width: 33.1%; margin-right: -1px; border: 1px solid #ccc; border-bottom: 0; float: left;}
.test_label{display: block; padding-top: 5px; padding-bottom: 5px; background-color: #eee;text-align: center;}
.test_radio,.test_tab_content { position: absolute; display: none;}
.test_radio:checked ~ .test_tab_content {margin-top: -1px; padding: 1em 2em; border: 1px solid #ccc; left: 0; right: 0;
display: block;}
.test_radio:checked ~ .test_label{background-color: #fff; border-bottom: 1px solid #fff; position: relative; z-index: 1;}
</style>
<div class="test_box">
<div class="test_tab">
<input type="radio" id="testTabRadio1" class="test_radio" name="tab" checked="checked">
<label class="test_label" for="testTabRadio1">选项卡1</label>
<div class="test_tab_content">
<p>我是选项卡1对应的内容</p>
</div>
</div>
<div class="test_tab">
<input type="radio" id="testTabRadio2" class="test_radio" name="tab" >
<label class="test_label" for="testTabRadio2">选项卡2</label>
<div class="test_tab_content">
<p>我是选项卡2对应的内容</p>
</div>
</div>
<div class="test_tab">
<input type="radio" id="testTabRadio3" class="test_radio" name="tab">
<label class="test_label" for="testTabRadio3">选项卡3</label>
<div class="test_tab_content">
<p>我是选项卡3对应的内容</p>
</div>
</div>
</div>
结果：点击对应的选项卡实现切换。
选择器用于选取指定选择器的首行 ：first-line
伪元素像文本的第一个字母添加特殊样式:first-letter
选择器匹配被用户选取的选择部分：：selection
示例：
<style>
p:first-line{background: red;}
P:first-letter{color: blue;}
p::selection{background: yellow;}
</style>
<p>2017撸起袖子加油干！2017撸起袖子加油干！2017撸起袖子加油干！</p>
结果：第一行的背景会变为红色，第一个字字体颜色会变为蓝色，选中的背景变为黄色。
在被选择元素的内容前面插入内容:before
在被选择元素的内容后面插入内容:after
示例：
<style>
p:before{content: "2017.2.3"}
p:after{content: "2017.2.5"}
</style>
<p>2017.2.4</p>
结果：三个日期依次排列。
选择器匹配非指定元素/ 选择器的每个元素：not(selector)
示例：
<style>
p{color: blue}
:not(p){color: red;}
</style>
<div>2017 加油干。</div>
<p>2017 加油干。</p>
<div>2017 加油干。</div>
结果：div内的文字会变为红色。
3.文字修饰
文本设置阴影text-shadow
语法：text-shadow: h-shadow v-shadow blur color;
h-shadow 必须 水平阴影的位置，允许负值。
v-shadow 必须 垂直阴影的位置。允许负值。
blur 可选，模糊的距离。
color 可选 阴影的颜色。
示例：
<style>
p{font-size: 35px; color: yellow;text-shadow: 2px 2px 1px red;}
</style>
<p>2017 撸起袖子干吧！</p>
结果：出现红色的模糊阴影。
文字描边text-stroke
语法 ：text-stroke: <'text-stroke-width'> || <'text-stroke-color'>
text-stroke-width 文字的描边厚度
text-stroke-color 文字的描边颜色
示例：
<style>
p{font-size: 40px; color: yellow; -webkit-text-stroke:1px red;}
</style>
<p>文字描边效果</p>
结果：文字添加了红色的描边。
规定文本的书写方向： direction
设置文本文的方向： unicode-bidi
语法：direction 可选的值： ltr 默认，文本方向从左到右
rtl 文本方向从右到左，inberit 规定从父元素继承。
示例：
<style>
p{ direction:rtl;unicode-bidi:bidi-override;}
</style>
<p>实现自己的小目标</p>
结果：实现自己的小目标
超出的文字用省略号表示
示例：
<style>
p{width:200px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
</style>
<p>2017做好自己该做的事情，此时不努力更待何时。</p>
结果：超出的宽度用省略号表示。
demo下载https://github.com/ningmengxs/css3.git
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：margin负值的作用
下一篇：canvas动态小球重叠效果
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css：css3（圆角边框、盒子阴影、文字阴影） 2020-06-05
- 2.CSS3选择器 2020-05-17
- 1.CSS3简介 2020-05-17
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
