css3基础知识——回顾

用户1197315

发布于 2018-01-22 11:47:08

9150

发布于 2018-01-22 11:47:08

文章被收录于专栏：柠檬先生

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-02-04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

图像处理