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

最新推荐文章于 2024-07-06 20:00:00 发布

sf_wilson

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量825

点赞数 3

分类专栏： Html5/Js 文章标签：选择器优先级

本文链接：https://blog.csdn.net/itsme_web/article/details/70331626

版权

Html5/Js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、复习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;}