<div class="wrapper">
<p class="test1">1</p>
<p class="test2">2</p>
<p class="test3">3</p>
<p class="test4">4</p>
<p class="test5">5</p>
</div>
p{
width:40px;
margin:8px auto;
line-height:40px;
border:1px solid gray;
text-align:center;
font-weight: 700;
}

X + Y 相邻选择器

X + Y : 相邻兄弟选择器 选择匹配Y的元素,且该元素为所匹配X元素后面相邻的位置。

.test1+p{
background-color:green;
color:#fff
}

X > Y 子选择器

X > Y:子包含选择器 选择匹配Y的元素,且该元素为所匹配X元素的子元素。

.wrapper>p{
background-color:#f5524b;
color:#fff;
border:none
}

X ~ Y 相邻选择器

X ~ Y: 选择所有后面的兄弟节点们

.test2~p{
background-color:#0eabdf;
color:#fff;
border:none
}

X[title] 属性选择器

<div class="demo">

    <a href="" title="标题">1111111111</a>
<a href="" title="标题-1">222222222</a>
<a href="" title="标题-2">3333333333</a>
<a href="" title="标题-3">444444444</a>
<a href="" title="名字-1">5555555555</a>
<a href="" title="名字-2">6666666666</a>
</div>
a {
display: block;
width:300px;
text-align: center;
margin: 10px auto;
color: #000;
text-decoration: none;
}
a[title] {
background: green;
color: #fff;
}

X[title=””] 另一种属性选择器

a[title="标题"] {
background: #ff9900;
color: #fff;
}

属性选择器,上述代码不只匹配带有title属性,更匹配title属性等于”标题”的链接元素。[]内不只可用title属性,还可以使用其他属性。

X[title*=””] 模糊匹配属性选择器

    a[title*="标题"]{
background: #3a8aee;
color: #fff;
}

选择器匹配属性值以标题指定值开头的每个元素。

<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li><span>item7</span></li>
<li>item8</li>
</ul>
 ul{
list-style: none;
}
.list li{
line-height:24px
}

:first-child

.list li:first-child{
background-color:yellow;
}

:last-child

:last-child选择器用来匹配父元素中最后一个子元素。

:nth-child()

nth-child(n)选择器匹配父元素中的第n个子元素。n可以是一个数字,一个关键字,或者一个公式。

.list li:nth-child(2){
background-color:#09ac24;
}

Odd 和 even

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词

.list li:nth-child(odd)
{
background:#e73a3a;
}
.list li:nth-child(even)
{
background:#f5a72c;
}

:nth-last-child(n)

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。n可以是一个数字,一个关键字,或者一个公式

.list li:nth-last-child(6) {
background-color:#15d6af;
}

:nth-of-type(n)

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

.list li:nth-of-type(3) {
background: #635f5c;
}

:only-child

:only-child选择器匹配属于父元素中唯一子元素的元素。

span:only-child{
background: #f26f0f;
}

:not

:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

.list li:not(:last-child){
background: #0fcff2;
}

参考文章 还需要学习的十二种CSS选择器

本站来源 https://www.mk2048.com/blog/blog.php?id=haj22kh111j&title=%E5%B8%B8%E7%94%A8css3%E9%80%89%E6%8B%A9%E5%99%A8

常用css3选择器的更多相关文章

  1. 爬虫常用Xpath和CSS3选择器对比

    爬虫常用Xpath和CSS3选择器对比 1. 简介 CSS是来配合HTML工作的,和Xpath对比起来,CSS选择器通常都比较短小,但是功能不够强大.CSS中的空白符' '和Xpath的'//'都表示 ...

  2. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  3. 总结30个CSS3选择器(转载)

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  4. CSS3选择器——基本选择器

    CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...

  5. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  6. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  7. CSS3选择器(三)之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  8. CSS3选择器(一)之基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  9. 前端必须掌握30个CSS3选择器

    也许你已经学会了CSS的三个简单常用的选择器:#ID,.class,标签选择器,可是这些就足够了吗?随着CSS3的到来,作为前端开发者需要掌握下面三十个基本的选择器,这样才可以在平时开发中得心用手. ...

随机推荐

  1. ubuntu14 中文显示问号

    1 终端执行 sudo locale-gen zh_CN.UTF-8 2 终端执行 export LC_ALL=zh_CN.UTF-8

  2. 吴裕雄--天生自然 JAVA开发学习:MySQL 连接

    CREATE TABLE `websites` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` char(20) NOT NULL DEFAULT '' ...

  3. vue点击复制文本粘贴

    <template>  <ul>      <li> <input type="text" class="inpNone&quo ...

  4. JavaScript--DOM,BOM

    前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...

  5. ios UINavigationController 导航栏

    添加全屏侧滑返回 .获取到系统的pop返回手势 .获取pop在哪个view上 .获取target,action .自定义UIPanGestureRecognizer //1.获取手势 guard le ...

  6. Horizon公司环境

  7. 59)PHP,管理员表中所存在的项

    用户ID 用户名 用户密码 用户权限(就是他的角色等级,比如是1级  2级,  三级等等) 上次登录的IP 上次登录的时间

  8. ML modeling process

    一.数据读取Load Data 二.数据分析EDA 三.数据预处理 四.特征工程Feature engineering 五.modeling & Tuning 六.Result 七.other ...

  9. TB3_Autorace之交通杆检测

    利用blob检测算法识别交通杆,控制TB3机器人完成对交通杆的起停动作! 上一篇博文中<TB3_Autorace之路标检测>订阅了原始图像信息,经过SIFT检测识别出道路交通标志,这里我们 ...

  10. CAD安装未完成,某些产品无法安装的解决方法

    CAD提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装CAD失败提示CAD安装未完成,某些产品无法安装,也有时候想重新安装CAD的时候会出现本电脑window ...