第二课：css选择器选择器优先级及css3新增选择器（系统解析）

一、复习html4.0时代的选择器
1、css选择器
id选择器 #header

class选择器 .btn
标签选择器 p
复合选择器 div.container
所有后代选择器 ul li
多个选择器 li,a,p
相邻兄弟选择器 p+a(指紧跟着p标签的a标签,不能隔行)
子代选择器 div > p
伪类选择器 :hover :active/*鼠标按下去的状态*/ :link/*有href属性的,未访问的链接*/ :visited :focus/*聚集焦点或者鼠标点击a标签后的状态*/ :first-child :last-child :lang(language)
伪元素选择器 :first-letter :first-line :before :after
/*
伪类：通过替代加一个class类来改变样式的形式
伪元素：通过代替加一个元素如span来改变样式的形式，在css3标准中为了区分，使用两个冒号，如：::
*/
通配选择器 *
属性选择器 a[默认属性／自定义属性] [title=www],属性值可以不加引号

2、涨见识：
focus 按tab能被选中的元素；
a 该标签不继承父级颜色；
伪元素的content中除了文本还可以放图片，不过不可以向background那样精致调节；
清除浮动：使用了浮动元素的父级是没有高度的，通常采用以下方式清除浮动：
a、将浮动元素的父级添加overflow: hidden;来实现
b、在浮动元素后面添加一个空的标签，样式设置为：clear: both;display: block;
c、在浮动元素的父级添加伪元素。

3、css选择器权重：
最强：!important
a、行内样式
b、ID选择器
c、Class选择器／属性选择器／伪类伪元素选择器
d、标签选择器／ > / +
e、继承
例：a[href][title]{color: #f00;} d+c+c

a:hover{color: #00f;} d+c //hove样式失效

4、项目实战：

<!DOCTYPE HTML>
<html lang="en"><head><title>your title name</title><meta charset="utf-8"><meta name="Author" content="Wilson Xu"><style type="text/css">*{margin: 0;padding: 0;font-family: "Microsoft yahei";}a{text-decoration: none;}a img{display: block;border: none;}li{list-style: none;}hr{margin: 10px auto;}p+a,p+p{color: #f00;}div > a{color: #f00;}input:focus{border-color: #f00;background: yellow;outline: none;}ul li:first-child{color: #f00;}ul li:last-child{color: #00f;}li:lang(en){color: #0f0;}article.news{width: 300px;height: 130px;border: 1px solid #f00;font-size: 14px;}article.news::first-letter{color: #fff;font-size: 18px;}article.news::first-line{background: #999;}#box::before{content: url('images/me.jpg');display: inline-block;width: 100px;height: 100px;background-position: center center;overflow: hidden;vertical-align: middle;margin: 10px 0;}#box::after{content: '自带一条尾巴';color: #f00;}.clearfix::after{content: '';display: block;clear: both;}ul.wrap li{background: pink;width: 100px;height: 40px;line-height: 40px;text-align: center;color: #f00;float: left;border-right: 1px solid #fff;}a[href]{color: #f00;}a[title]{color: #0f0;}a[title=a2]{color: #00f;}</style><script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script></head><body><p>p1</p><a href="#">a1</a><!--red--><p>p2</p><p>p3</p><!--red--><div>div1</div><a href="#">a2</a><hr/><div class="div"><p><a href="#">a1</a></p><a href="#">a2</a><!--red--></div><hr/><input type="text" name="" placeholder="请输入文本内容" /><hr/><ul><li>li1</li><li lang="en">li2</li><li>li3</li></ul><hr/><article class="news">腾讯体育4月20日讯 2017年世界羽联黄金大奖赛中国大师赛展开男单1/8决赛，卫冕冠军林丹本轮和队友周泽奇展开内战，结果林丹技高一筹仅用时33分钟就以两个21-14获胜，顺利晋级至男单八强，本场比赛后，林丹的世锦赛积分跻身至前八，从而为自己赢得参加世锦赛的机会。</article><div id="box">这是Wilson的照片，帅的1B～</div><ul class="wrap clearfix"><li>li1</li><li>li2</li><li>li3</li><li>li4</li></ul><hr/><a href="#">a1</a><a href="#" title="a2">a2</a><a href="#" title="a3">a3</a></body>
</html>

5、效果预览：

二、css3新属性：
1、新选择器

属性选择器(注：属性值为数字的时候必须加引号，其他的可以不加，另外区分大小写)
[title^=aa] title以aa开头
[title$=aa] title以aa结尾
[title*=aa] title包含aa
选择同级的弟弟 p ~ a p同级下面的所有a
伪类（必须掌握）
:nth-child
:nth-child(1) 第一个子元素
:nth-child(odd) 所有奇数子元素
:nth-child(even) 所有偶数子元素
:nth-child(an+b) 表达式，n为自然数
:nth-last-child()
和上面一样，但是是倒着数
:nth-of-type()
p:nth-of-type(2) 第二个p，只在标签中找，只在独特的某一类中找
:nth-last-of-type()
和上面一样，但是是倒着数
:not() 除了什么之外
:empty 内容为空的元素
:target 锚点样式
:disabled :enabled 禁用／未被禁
:checked 被选中

(这些只需要了解)
:root HTML中总是选择html

:first-of-type 第一个元素（p:first-of-type 第一个p）
:last-of-type 最后一个元素
:only-child 选择仅有一个子类的父类的子类

2、项目实战

<!DOCTYPE HTML>
<html lang="en"><head><title>your title name</title><meta charset="utf-8"><meta name="Author" content="Wilson Xu"><style type="text/css">*{margin: 0;padding: 0;font-family: "Microsoft yahei";}a{text-decoration: none;}a img{display: block;border: none;}li{list-style: none;}hr{margin: 10px auto;}img[src^='item']{width: 100px;height: 100px;}img[src$='jpg']{border: 1px solid #f00;}img[src$='gif']{border: 1px solid #0f0;}img[src$='png']{border: 1px solid #00f;}img[src*='3']{/*src包含3的img，必须加引号，否则显示不出来*/border-radius: 50%;}p ~ a{color: #f00;}ul.wrap li:nth-child(1){/*选中第一个*/color: #f00;}ul.wrap li:nth-child(odd){/*奇数*/background: #f1f1f1;}ul.wrap li:nth-child(even){/*偶数*/background: #999;}ul.wrap li:nth-child(10n){/*未知数只能是n*/color: #0f0;}ul.box li:nth-last-child(1){color: #f00;}ul.box li:nth-last-child(odd){background: #f1f1f1;}ul.box li:nth-last-child(even){background: #999;}div.box p:nth-of-type(odd):not([title='p333']){/*除了title='p333'的所有div.box p的子元素的奇数*/background: #f4f4f4;}.box:not(div) b{color: #00f;}p:empty{/*没有内容的p*/width: 100px;height: 20px;background: #f00;}input:disabled{background: yellow;}input:enabled{border-color: #f00;}input:checked + span{color: #f00}.container{width: 600px;height: 300px;background: #f8f8f8;margin: 20px auto;}.container nav ul{overflow: hidden;border-bottom: 1px solid #999;}.container nav ul li{float: left;}.container nav ul li a{display: inline-block;padding: 10px 30px;color: #222;font-size: 14px;}.container nav ul li a:hover{background: rgba(240,240,240,.7);}.container nav ul li a.mark{color: #000;font-weight: bold;background: #e9e9e9;}.container main{width: 100%;height: 259px;overflow: hidden;}.container main section{width: 100%;height: 100%;float: left;display: none;}.container main section:target{display: block;}.container main section p:first-child{padding-top: 16px;}.container main section p{padding-left: 10px;line-height: 20px;font-size: 14px;color: #666;}.banner{width: 600px;height: 300px;margin: 20px auto;position: relative;}.banner section{width: 100%;height: 100%;display: none;}.banner input[type=radio]{position: absolute;bottom: 20px;left: 57.4%;margin-left: -80px;}.banner input[type=radio]:nth-of-type(2){margin-left: -60px;}.banner input[type=radio]:nth-of-type(3){margin-left: -40px;}.banner input[type=radio]:nth-of-type(4){margin-left: -20px;}.banner input[type=radio]:nth-of-type(5){margin-left: 0px;}.banner input[type=radio]:checked + section{display: block;}</style><script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script></head><body><img src="item01.jpg" alt=""><img src="item02.jpg" alt=""><img src="item03.gif" alt=""><img src="item04.png" alt=""><img src="item05.png" alt=""><hr/><p>p111</p><b>b111</b><a href="#">a111</a><i>i111</i><a href="#">a222</a><hr/><ul class="wrap"><li>li111</li><li>li222</li><li>li333</li><li>li444</li><li>li555</li><li>li666</li><li>li777</li><li>li888</li><li>li999</li><li>li1000</li></ul><hr/><ul class="box"><li>li111</li><li>li222</li><li>li333</li><li>li444</li><li>li555</li><li>li666</li><li>li777</li><li>li888</li><li>li999</li><b>b111</b></ul><hr/><div class="box"><b>b111</b><p>p111</p><p>p222</p><b>b222</b><p title="p333">p333</p><p>p444</p><p>p555</p><p></p></div><p><label for="password">disabled: </label><input type="text" disabled="disabled" id="password" /></p><p><label for="name">enabled: </label><input type="text" id="name" /></p><p><input type="checkbox" name="" value=""><span>Java</span><input type="checkbox" name="" value=""><span>Html</span><input type="checkbox" name="" value=""><span>Node</span><input type="checkbox" name="" value=""><span>Bootstrap</span></p><hr/><!--===================利用target来做选项卡功能，不用js=====================--><h4>项目实战1：利用css3的:target伪类特性做一个纯css的tab选项卡功能</h4><div class="container"><nav><ul><li><a href="#s1" class="mark">我的关注</a></li><li><a href="#s2">推荐</a></li><li><a href="#s3">导航</a></li><li><a href="#s4">视频</a></li><li><a href="#s5">购物</a></li></ul></nav><main><section id="s1"><p>我的关注111</p><p>我的关注222</p><p>我的关注333</p></section><section id="s2"><p>推荐111</p><p>推荐222</p><p>推荐333</p></section><section id="s3"><p>导航111</p><p>导航222</p><p>导航333</p></section><section id="s4"><p>视频111</p><p>视频222</p><p>视频333</p></section><section id="s5"><p>购物111</p><p>购物222</p><p>购物333</p></section></main></div><hr/><h4>项目实战2：利用css3的:checked伪类特性做一个纯css的轮播动画</h4><div class="banner"><input type="radio" name="btn" value="" checked="checked"><section style="background: #f00;"></section><input type="radio" name="btn" value=""><section style="background: #0f0;"></section><input type="radio" name="btn" value=""><section style="background: #00f;"></section><input type="radio" name="btn" value=""><section style="background: cyan;"></section></div></body>
</html>

3、效果预览

4、项目实战2优化思路：

使用input:checked+label以及选择同级的弟弟 p ~ a p同级下面的所有a 来优化项目实战2。

将input和label结合使用，布局核心代码如下：

<div id="box"><input type="radio" checked="checked" name="btn" id="btn1" /><label for="#btn1"></label><!--checked默认第一个点为pink色--><input type="radio" name="btn" id="btn2" /><label for="#btn2"></label><input type="radio" name="btn" id="btn3" /><label for="#btn3"></label><input type="radio" name="btn" id="btn4" /><label for="#btn4"></label><ul><li style='background: #f00;'></li><li style='background: #0f0;'></li><li style='background: #00f;'></li><li style='background: cyan;'></li></ul>
</div>

样式核心代码如下：

#box input{display: none;}
#box label{display: inline-block;width: 15px;height: 15px;border-radius: 50%;margin: 0 5px;background: #ddd;
}
#box input:cheched + label{background: pink;
}
#box ul li{display: none;}
#box input:nth-of-type(1):checked ~ ul li.nth-child(1){display: block;}
#box input:nth-of-type(2):checked ~ ul li.nth-child(2){display: block;}
#box input:nth-of-type(3):checked ~ ul li.nth-child(3){display: block;}
#box input:nth-of-type(4):checked ~ ul li.nth-child(4){display: block;}

第二课：css选择器选择器优先级及css3新增选择器（系统解析）相关推荐

html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器
一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...
html5知识点：CSS3新增选择器
css3选择器是在css2.0的基础上的修改创新.他增加了一些UI元素状态伪类选择器.结构伪类选择器.属性选择器等.Css3新增的这些选择器很多强大,他的出现给我们前端带来了好多便利. 一. 使我们的 ...
萌新接触前端的第二课——CSS
前端知识--CSS CSS(英文全称:Cascading Style Sheets) 中文名层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各 ...
CSS3新增选择器及用法详细介绍
目录 CSS属性选择器 E[att^=value]属性选择器 E[att$=value]属性选择器 E[att*=value]属性选择器 CSS3关系选择器 CSS3子代选择器(>) CSS3兄 ...
CSS3 - 新增选择器
1. 伪类选择器 1.1 结构(位置)#### 结构(位置)伪类选择器 :first-child 选取属于其父元素的首个子元素的指定选择器 :last-child 选取属于其父元素的最后一个子元素的指 ...
CSS3新增选择器：伪元素选择器
一. ::first-letter 第一个字二. ::first-line 第一行(以浏览器为准的第一行) 三. ::selection 被选中的字行(鼠标选中的字段)只能向 ::selectio ...
（20）css3新增选择器
CSS3中,相对于CSS2.1 版本的 7 个选择器,增加了更多其他的选择器,实现了更多的选择方式. 1.子级选择器子级选择器用于选取带有特定父元素的元素. 书写语法:element1 > e ...
HTML第二课——css
请关注公众号:自动化测试实战先给大家提个建议,就是用sublime编辑器来编写.用其他的也无所谓,我只是建议,因为这个会帮你自动补全很多代码. css概念 css叫层叠样式表.意思就是一层一层的叠加 ...

第二课：css选择器选择器优先级及css3新增选择器（系统解析）

第二课：css选择器选择器优先级及css3新增选择器（系统解析）相关推荐

最新文章

热门文章