CSS3复杂选择器的详解

企鹅博客
企鹅博客
企鹅博客
29622
文章
0
评论
2020年9月14日16:34:25 评论 7 views 3709字阅读12分21秒

今天把视频里的CSS3复杂选择器部分看完了,来整理一下学到的知识点。

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

a、相邻兄弟选择器:next
紧紧跟在【当前元素之后的】(一个),指定选择器的元素
      语法:通过“+”作为结合符
eg: p+p ->紧跟在p后面的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:p~p{} ->匹配p后面所有的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教程其它相关文章!

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
bootstrap modal新手问题_html/css_WEB-ITnose html教程

bootstrap modal新手问题_html/css_WEB-ITnose

最近在学习web开发,今天在学习bootstrap时用到了模态框,但是点击后却无法对弹出的模态框进行操作,之前我在另一个界面用同样的写法是可以实现的...求大神解答一下 回复讨论(解决方案) lz的c...
设置HTML中超链接文字颜色方法大全 html教程

设置HTML中超链接文字颜色方法大全

几乎在每个网页中都会出现有超链接,它是跳转到另一个页面的入口,可是通常超链接部分文字的颜色都是默认的,如何去改变颜色达到更美观的效果呢,下面我就总结了几篇关于如何设置超链接文字颜色的文章: 1.Htm...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: