首页 > 博客列表 > PHP大牛成长之路：CSS选择器

博主信息

博文 63

粉丝 8

访问量 63738

专题推荐

更多>

1、简单选择器

1.1、元素选择器（也叫标签选择器)

HTML代码：可以简单理解包含在<>中的标签，比如：<html> <body> <div> <p> <h2>等等。
示例：元素选择器

/* 设置div标签背景为浅灰色 */
div{
    background-color: #ccc; 
}

1.2、类选择器

就是HTML的class属性。
示例：类选择器(css)

/* 设置box类的背景为浅灰色 */
.box{
    background-color: #ccc; 
}

示例：类选择器(html)

<div class="box"></div>

示例：类选择器的复合应用

<style>
/* 设置box类的背景为浅灰色 */
.box{
    background-color: #ccc; 
}
/* 设置box类+text_font类的复合应用红色字体 */
.box.text_font{
    color: red;
}
</style>
<div class="box text_font">我是灰底红字</div>

注意：两个类之间不能有空格

1.3、ID选择器

id 选择器以 “#” 来定义
示例：ID选择器(CSS)

/* 设置id为：box的背景为浅灰色 */
#box{
    background-color: #ccc; 
}

示例：ID选择器(html)

<div id="box">灰色背景</div>

class可以与id选择器共同使用
id 选择器的应用场景主要应用场景：表单元素，锚点

2、上下文选择器

2.1 后代选择器

后代选择器使用类+空格+标签组成
示例：后代选择器示例

<style>
.box{
    background-color: #ccc; 
}
/* p标签后代选择器 */
.box p{
    color: red;
}
</style>
<div class="box">
    <p>后代选择器生效</p>
</div>
<p>后代选择器无效（因为不在box类中）</p>

2.2 父子选择器

父子选择器使用类+>+标签组成
示例：父子选择器示例


<style>
.box{
    background-color: #ccc; 
}
/* p标签父子选择器 */
.box > p{
    color: red;
}
</style>
<div class="box">
    <p>父子选择器生效</p>
</div>
<p>父子选择器无效（因为不在box类中）</p>

2.3 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素


<style>
/* 将有复合类的第3个li标签的下一个4文字变为红色 */
.item.box + .item{
    color: red;
}
</style>
<div class="box">
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item box">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>
</div>

2.4 同级所有选择器

同级所有选择器是选取指定元素下同级的所有元素。


<style>
/* 将有复合类的第3个li标签以下同级的（4、5）文字变为红色 */
.item.box ~ .item{
    color: red;
}
</style>
<div class="box">
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item box">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>
</div>

3、伪类选择器

3.1 结构伪类选择器(不分组)

:first-child 匹配第一个元素

<style>
/* :first-child 匹配第一个元素(第1个li标签字体红色) */
li:first-child{
    color: red;
}
</style>
<div class="box">
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>
</div>

:first-child 匹配最后一个元素

<style>
/* :last-child 匹配最后一个元素(第5个li标签字体红色) */
li:last-child{
    color: red;
}
</style>
<div class="box">
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>
</div>

:nth-child(索引号) 匹配指定元素

<style>
/* :nth-child(3) 匹配指定元素-索引方式:从1开始(比如：第3个li标签字体红色) */
li:nth-child(3){
    color: red;
}
</style>
<div class="box">
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>
</div>

:nth-child(2n) 或 :nth-child(even) 匹配偶数元素

<style>
/* :nth-child(2n)和:nth-child(even) 匹配偶数元素(第2/4个li标签字体红色) */
li:nth-child(2n){
    color: red;
}
/* li:nth-child(even){
    color: red;
} */
</style>
<div class="box">
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>
</div>

:nth-child(2n-1) 或 :nth-child(odd) 匹配奇数元素

<style>
/* :nth-child(2n-1)和:nth-child(odd) 匹配奇数元素(第1/3/5个li标签字体红色) */
/* li:nth-child(2n-1){
    color: red;
} */
li:nth-child(odd){
    color: red;
}
</style>
<div class="box">
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
    </ul>
</div>

其它：

NO	选择器	说明
1	:nth-child(n + 索引号)	指定位置剩下的所有元素
2	:nth-child(-n + 索引号)	只取前几个
3	:nth-last-child(-n + 索引号)	只取最后几个
4	:nth-last-child(索引号)	倒数的方式匹配

3.2 结构伪类选择器(分组)

:last-of-type伪类名+标签定义例子如下：

<style>
  /* 匹配span标签最后1个=3 */
  .box span:last-of-type {
    color: red;
  }
  /* 匹配p标签最后1个=6 */
  .box p:last-of-type {
    color: red;
  }
</style>
<div class="box">
  <span class="item">1</span>
  <span class="item">2</span>
  <span class="item">3</span>
  <p class="item">4</p>
  <p class="item">5</p>
  <p class="item">6</p>
</div>

4、伪类与伪元素

伪类（前面是单冒号）

No	伪类	备注
1	:target	必须id配合，实现锚点操作
2	:focus	当获取焦点的时候
3	:not()	用于选择不满足条件元素

伪元素（前面是双冒号）

No	伪元素	备注
1	::selection	一般用于设置选中文本的前后背景色
2	::before	在元素前添加内容（与content一起使用）
3	::after	在元素后添加内容（与content一起使用）

:target示例

<style>
  #search {
    display: none;
  }
  #search:target {
    display: block;
  }
</style>
<span><a href="#search">搜索</a></span>
<form action="#" id="search">
  <input type="text" name="key" id="key" />
  <button>搜索</button>
</form>

:focus示例

<style>
  input:focus {
    background: #000;
    color: #fff;
  }
</style>
<form action="#" id="search">
  <input type="text" name="key" id="key" value="获得焦点黑底白字"/>
  <button>搜索</button>
</form>

:not()示例

<style>
  /* 非p标签字体红色 */
  .box :not(p){
    color:red;
  }
</style>
> **:focus示例**
<div class="box">
  <p>1(p标签)</p>
  <span>2(span标签)</span>
</div>

::before示例

<style>
  h2::before {
    content: "北京";
  }
</style>
<h2>-是我国的首都</h2>

显示：北京-是我国的首都

::after示例

<style>
  h2::after {
    content: "北京";
  }
</style>
<h2>我国的首都是-</h2>

显示：我国的首都是-北京

总结

简单CSS选择器：元素 < class < id
实际id与class选择器前面都有*号，属于元素级别，id,class可以添加到任何元素上，所以可以省略；
伪类选择器灵活应用，可以简化代码，提高效率。

批改老师：

WJ

批改状态：合格

老师批语：写的很认真，格式也工整！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Flex通用布局-含头部及底部三列主体(中间自适应)

2020-07-02 18:39:58