CSS3——复杂选择器

1、兄弟选择器：同一位置级别，可称为兄弟元素

a、相邻兄弟选择器：next
紧紧跟在【当前元素之后的】(一个)，指定选择器的元素
　　　　　语法：通过“+”作为结合符
eg: div+p ->紧跟在div后面的p元素

 <!-- demo.html -->

 <html>

     <head>

         <title></title>

     </head>

     <body>

         <p>这是第一个段落</p>

 　　  <div id="d1">这是一个div</div>

 　　  <span>这是一个span</span>

         <p class="p1">这是第二个段落</p>

 　　  <b>Hello World</b>

 　　  <p class="p2">这是第三个段落</p>

     </body>

 </html>

 /*demo.css*/

 div+p{

     background: yellow;

 }

 #d1+p{

     background: red;

 }

 span+.p1{

     background: blue;

 }

b、通用兄弟选择器：next_all
匹配某元素【后面所有】的满足指定选择器的兄弟元素
语法：使用“~”作为结合符
eg：div~p{} ->匹配div后面所有的p

2、属性选择器：使用元素所附带的属性，用于选择器当中，作为选择元素的条件
语法：[属性相关内容]
eg：[id] ->具备id属性的所有元素
p[id] ->具备id属性的p元素
a、[id],p[id]
b、p[id][class] ->既具备id又具备class的p元素
c、p[id="p1"] ->id值为"p1"的p元素
d、p[class~="value"]
e、p[class^="b"] ->匹配class属性值以b开始的p标记
f、p[class*="b"] ->匹配class属性值中包含b的p标记
g、p[class$="b"] ->匹配class属性值以b结尾的p标记

 <!-- demo.html -->　　　　　

  <html>

      <head>

          <title></title>

      </head>

      <body>

         <p class="clear p1 myself">

         这是第四个段落

         </p>

         <div class="userContent">

         文本内容

         </div>

      </body>

 </html>

 /*demo.css*/

 p[class]{

 color: #e4393c;

 }

 p[class~='p1']{

 background-color: #cd2c2d;

 color: #fff;

 }

 div[class ^= "us"]{

 background-color: #bfb;

 }

 div[class$="t"]{

 background-color: #bfb;

 color: #333;

 }

3、伪类选择器
a、目标伪类：突出显示活动的HTML锚点
语法：:target
b、元素状态伪类：多数用在表单元素上
1、:enabled ->匹配每个已启用的元素
2、:disabled ->匹配每个已被禁用的元素
3、:checked ->匹配已被选中的表单元素(只适用于checkbox,radio)
c、结构伪类
1、:first-child ->匹配属于其父元素中的第一个子元素
2、:last-child ->匹配属于其父元素中的最后一个子元素
3、:empty ->匹配没有子元素的元素(文本内容或空格也算作子元素)
4、:only-child ->匹配属于其父元素中的唯一子元素
d、否定伪类：匹配非指定选择器的元素
语法：:not(selector)

 <!-- demo01.html 目标伪类 -->

  <html>

      <head>

          <title></title>

      </head>

      <body>

     <a href="#Tom">猫和老鼠(Tom and Jerry)</a>

     <a href="#Atongmu">铁臂阿童木</a>

     <a href="#BlackCat">黑猫警长</a>

     <br>

     <a name="Tom">第一部：Tom and Jerry</a>

     <p style="height: 500px;">Tom and Jerry</p>

     <div id="Atongmu" style="height: 500px;">我是阿童木</div>

     <div id="BlackCat" style="height: 500px;">I am Mr Black Cat</div>

      </body>

 </html>

 /*demo01.css*/

 a:target,div:target{

     background-color: #bfb;

     font-size: 20pt;

 }

 <!-- demo02.html 结构伪类 -->　　　　　

  <html>

      <head>

          <title></title>

      </head>

      <body>

     <div id="d1"></div>

     <div id="d2">

         <p>This is a p</p>

     </div>

     <div id="d3">

         This id d3

     </div>

     <div id="d4">

         <b>first</b>

         <b>second</b>

         <b>third</b>

         <b>last</b>

     </div>

      </body>

 </html>

 /*demo02.css*/

 div{

     width: 100px;

     height: 100px;

 }

 b{

     display: block;

 }

 div:empty{

     background-color: #bfb;

 }

 p:only-child{

     background-color: #fbf;

 }

 b:first-child{

     font-size: 2em;

     color: #fbb;

 }

 b:last-child{

     font-size: 3em;

     font-weight: normal;

     color: #bbf;

 }

  <!-- demo03.html 伪元素状态伪类 -->

   <html>

       <head>

           <title></title>

       </head>

       <body>

          用户名称：<input type="text"><br>

     用户昵称：<input type="text" disabled value="请输入您的昵称">

     <br>

     性别：<input type="radio" name="rdoGender">男

               <input type="radio" name="rdoGender">女

       </body>

  </html>

  /*demo03.css*/

  input:enabled{

     color: red;

 }

 input:disabled{

     border: 1px solid #f00;

 }

 input[name=rdoGender]:checked{

     background-color: #bfb;

 }

  <!-- demo04.html 否定伪类 -->

   <html>

       <head>

           <title></title>

       </head>

       <body>

          <div>

         用户名称：<input type="text"><br>

         用户密码：<input type="password"><br>

         <input type="submit" value="提交">

         <input type="button" value="按钮">

     </div>

       </body>

  </html>

  /*demo04.css*/

 input:not(:last-child){

     border: 1px solid #f00;

 }

4、伪元素选择器：匹配出来的都是文本内容
a、:first-letter ->匹配首字符
b、:first-line -> 匹配首行
以上两个选择器，行内元素无效，行内块、块级可以
c、::selection ->用于欧赔用户选中的文本样式(火狐貌似不兼容)

  <!-- demo.html 为元素选择器 -->

   <html>

       <head>

           <title></title>

       </head>

       <body>

          <p>

         风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。

     </p>

     <span>

         风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。

     </span>

       </body>

  </html>

  /*demo.css*/

 p{

     width: 200px;

     border: 1px solid #bfb;

     margin: 10% auto;

     text-indent: 5px;

 }

 span{

     /*float: right;*/

     /*display: inline-block;*/

     position: absolute;

     top: 300px;

     left: 500px;

 }

 p:first-letter{

     font-size: 20pt;

     color: #fbb;

 }

 p:first-line{

     font-style: italic;

 }

 span:first-line{

     font-style: italic;

     background-color: #ffb;

 }

 p::selection{

     background-color: #bbf;

     color: #fbf;

 }

以上就是我在视频中学到的所有内容，若有错误或不足，希望浏览者提出，及时指正。。

今天是我开通博客的第二天，这是我写的第一篇文章，在这里发表完全是当做自己的学习笔记，希望可以记录自己的成长。

CSS3——复杂选择器的更多相关文章

CSS系列：CSS3新增选择器
1. CSS1定义的选择器选择器类型说明 E 类型选择器选择指定类型的元素 E#id ID选择器选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器选 ...
CSS3常用选择器（三）
在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...
CSS3 ::selection选择器
一.介绍之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...
CSS3属性选择器与(:not)选择器
一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围: ...
【前端开发系列】—— CSS3属性选择器总结
想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...
CSS3之选择器
总结了下CSS3新增的一些选择器. CSS3的选择器有基本选择器.属性选择器.伪类选择器几类. CSS3选择器选择器举例例子描述 element1~element2 p~a 选择前面有 < ...
CSS3 :nth-child() 选择器
CSS3 :nth-child() 选择器代码: <!DOCTYPE html> <html> <head> <style> p:nth-child( ...
css3属性选择器总结
前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com ...
CSS3选择器02—CSS3部分选择器
该部分主要为CSS3新增的选择器接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...
笔记：css3伪选择器改变滚动条样式
现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...

随机推荐

ASP.NET使用WebApi接口实现与Android客户端的交互（图片或字符串的接收与回传）
最近在使用WebApi 做下记录 //此接口实现接收Android客户端上传的JSON格式的信息,并返回"nihao"字符串 [Route("ReceiveData& ...
Android 退出多Activity的application的方式
在开发过程中,我们常常需要一个退出功能,来退出该应用的所有Activity.下面,我们列举一些退出应用的几种方式.以下用的源码点击查看源码地址欢迎star,欢迎fork 利用ActivityCont ...
jQuery写选项卡
<!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8" ...
【转】SQLState详解
根据 X/Open 和 SQL Access Group SQL CAE 规范 (1992) 所进行的定义,SQLERROR 返回 SQLSTATE 值.SQLSTATE 值是包含五个字符的字符串 . ...
禁止Linux系统被 ping
echo "net.ipv4.icmp_echo_ignore_all=1" >> /etc/sysctl.conf sysctl -p 生效开启ping功能: 删除 ...
Selenium Web 自动化 - 项目持续集成
Selenium Web 自动化 - 项目持续集成 2017-02-13 目录 1环境准备 1.1 安装git 1.2 安装jenkins 1.3 安装jenkins插件 1.4 jekins ...
3377: [Usaco2004 Open]The Cow Lineup 奶牛序列
3377: [Usaco2004 Open]The Cow Lineup 奶牛序列 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 16 Solved ...
3732: Network
3732: Network Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 395 Solved: 179[Submit][Status] Descr ...
RxJava Map操作详解
2016-06-06 RxJava是最近两年火起来的一个框架,核心是异步,但是对于我来说印象最深的是响应式编程的思想.最近刚好想把自己的项目改成用RxJava实现,所以就研究了下.抛物线和大头鬼两位大 ...
深度学习实践系列（1）- 从零搭建notMNIST逻辑回归模型
MNIST 被喻为深度学习中的Hello World示例,由Yann LeCun等大神组织收集的一个手写数字的数据集,有60000个训练集和10000个验证集,是个非常适合初学者入门的训练集.这个网站 ...

CSS3——复杂选择器

CSS3——复杂选择器的更多相关文章

随机推荐

热门专题