第二课：css选择器&选择器优先级及css3新增选择器（系统解析）
来源：互联网 发布：软件系统架构师 编辑：程序博客网 时间：2024/06/01 19:19
一、复习html4.0时代的选择器
1、css选择器
id选择器 #header
标签选择器 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;} 1 0
- 第二课：css选择器&选择器优先级及css3新增选择器（系统解析）
- CSS选择器及优先级
- CSS选择器及优先级
- CSS系列：CSS3新增选择器
- css3第二课时！css3新增属性选择器！
- css选择器及优先级算法
- CSS常用选择器及优先级
- CSS样式选择器及优先级
- 前端知识汇总-----CSS选择器和CSS3新增选择器
- css选择器&选择器的优先级
- css3新增选择器前瞻
- CSS3的新增选择器
- CSS3-新增属性选择器
- css3-新增的选择器
- css3新增的选择器
- css3新增选择器
- CSS3新增选择器
- css3新增选择器
- js判断页面是否加载完成
- 关于docker部署，结合java项目一起研究
- 数值分解 (sdut oj)
- 莫比乌斯函数和莫比乌斯反演
- LBP特征计算程序
- 第二课：css选择器&选择器优先级及css3新增选择器（系统解析）
- java中方法的重载
- LeakCanary
- IOS UITextfield设置右对齐后 开头空格无法右对齐的解决方式
- 查询和删除表中重复数据sql语句
- 多线程，信号量的简单使用 GCD
- 在Struts2中，form 表单form与action之间传值
- mybatis问题org.apache.ibatis.binding.BindingException: Parameter 'loginId' not found.
- Java IO
