css选择器 - Warm-px

---css选择器大致分成5类：基本选择器、层次选择器、伪类选择器、属性选择器、伪元素选择器。（如下图）

1、基本选择器：

　　（1）标签选择器，又称类型选择器，用来声明html标签采用哪种CSS样式，也就是重新定义了html标签

　　　　eg:

<h1>This is css style</h1>

h1{
    color:red;
}

　　（2）通配选择器(*)，单独使用时，这个选择器可以跟文档中任何元素匹配

eg:

令所有的文字颜色变为天蓝色，字体大小25px:

*{
   color:skyblue;
   font-size:25px;        
}

　（3）id选择器(#)：类似于class选择器，不过id属性只能在每个html文档中出现一次，同时也仅指一个

<p id="one">这是个红色字体的段落</p>
<p id="two">这是个天蓝色字体的段落</p>

#one{
  color:red;
}
#two{
  color:skyblue;
}

（4）class选择器(.):又称类选择器，类选择器允许以独立与文档元素的方式来指定样式，类选择器可单独使用，也可以与其他元素结合使用

<div class="box">
    <p>这是嵌套在“box”里面的段落</p>
</div>

.box{
  width:200px;
  height:200px;                   /*设置一个宽和高皆为200px的方框*/
  border:1px solid #000;
}
.box p {
  color:red;    /*设置盒子里面的段落字体为红色*/
}

　（5）群组选择器：群组选择器实际上是对于css一种简化的写法，它能够把需要定义相同样式的不同的选择器放在一起，然后中间用“，”隔开，这样可以为我们省下很多代码，大大提升效率。

<div id="box">这是一个盒子</div>
<p>这是一个段落</p>

#box,p{
  color:red;     /*设置盒子及与它相邻的段落p里面的字体颜色为红色*/
}

2、层次选择器

（1）包含选择器（E F）：又称后代选择器，具体作用为选择元素的后代元素,后代选择器与子元素选择器之间使用空格来表示它们之间的关系。

<ul>
   <li><a href="#">我是一个链接</a></li>
</ul>

ul li a{  /*后代选择器 ul 的子元素li ,再li的子元素a*/
  text-decoration:none;   /*令链接去掉下划线*/
}

（2）子选择器（E > F）:子选择器用于选择父元素的子元素（嫡子），但不包括子元素的子元素，它仅仅指它的直接后代，也仅仅作用于它的直接后代。

<ul class="Inter">
    <li>
           <a href="#">链接一</a>
           <ul>
                <li>
                     <a href="#">链接二</a>
                </li>
            </ul>
    </li>
</ul>

 ul.Inter > li > a{
    text-decoration:none;   /*令链接一去掉下划线，此时链接二不受影响*/  
}

（3）相邻选择器（E + F）:顾名思义，选择“邻居”，相邻选择器用于同辈元素，例如EF是同辈元素，而F是紧跟E后面的元素，并相邻，这样，我们就可以使用相邻选择器来选中F。

<body>
  <div class="boxOne">1</div>
  <div>2 
      <div>3</div>
  </div>
</body>

.boxOne + div {
    color:red;    /*选择 2 变成红色，3 不受影响*/  
}

（4）通用选择器（E ~ F）：通用选择器与相邻选择器类似，用于同辈元素，例如EF为同辈元素，F元素位于E元素之后，通用选择器将选中于E之后所有的F元素。

<div>
     <div class="ids">1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5
            <div>6</div>
     </div>
</div>

.ids ~ div{
   color:red;  /*选择1后面的2,3,4,5的字体颜色为红色，6不受影响*/
}

posted on 2019-10-09 21:32 Warm-px 阅读(223) 评论(0) 收藏举报

公告