美文网首页
CSS选择器

CSS选择器

作者: 水之飞亦 | 来源:发表于2019-11-14 23:34 被阅读0次

1.基础选择器

选择器:指的是我们选择需要添加样式的标签元素的模式

1.标签选择器

通过标签名直接选择相应的标签。标签是什么就用什么选择。

  • 标签选择器会选中页面中所有对应的标签,不论怎么嵌套,都会被选择。

  • 实际使用中,不会用标签选择器来更改某一属性,因为会影响其他,常用来设置初始默认样式,或者清除默认系统样式。

    <style type="text/css">
          h2 {
              color: red;
          }
          p {
              color: blue;
          }
          /*清除默认系统样式*/
          h2,p,div {
              margin: 0;
              padding: 0;
          }
    </style>
    

缺点:会选中所有选中类型的标签,不能单独或部分设置

2.id选择器

  • 通过标签的id属性值来选择相应的标签,由于id的值是唯一的,所以id选择器选中的标签也是唯一的。以#号开头,加上id名。

  • id名严格区分大小写,以字母开头,严禁设置相同的id名,即使是不同的标签

  • id其实常用来给js添加行为,而不是添加样式
    <h2 id="one">标题</h2>

    #one {
              color: orange;
              font-size: 40px;
         }
    

缺点:只能选中一个标签,具有相同样式的标签,得分别设置id,多次书写

3.类选择器

  • 通过标签的class属性来选择标签。

  • 以.(点)开头,加上class名,中间不能有空格,class的值可以不惟一
    <h2 class="two">标题</h2>

    .two {
              background-color: rgb(200,200,200);
         }
    
  • 由于class的值可以有多个,所以我们可以设置一些通用的css属性,当某一标签需要使用时,直接添加这个类名即可。
    <h2 class="font20 text-color">标题</h2>

    .font20 {
              font-size: 20px;
          }
    .text-color {
              color: black;
          }
    

4.通配符*

  • 可以选中包括body在内的所有标签。现在已经不常用了,效率太低。可以用作简单案例里清空默认样式。

    * {
           border: 1px solid purple;
      }
    
普通选择器效果

2.高级选择器

基础选择器并不能满足所有需求,在基础选择器的基础上进行了一些延伸,出现了高级选择器。有三种:后代选择器, 交集选择器,并集选择器。

1.后代选择器

  • 又叫包含选择器,通过标签之间的嵌套,层级关系,限定大体范围,然后在范围内具体查找元素。
  • 前后为父子级关系,但是不一定是相邻的,可以是多级的。
  <div>
    <ul class="ul1">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <ul class="ul2">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
  </div>

例如上边,想要第一个列表的文字为红色,当然可以给每个第一个列表中所有li设置class,但是,我们有更好的方式,那就是通过后代选择器,先选择第一列,然后给li标签设置颜色即可。

  .ul1 li {
            color: red;
        }
  .ul2 li {
            color: blue;
        }

2.交集选择器

  • 两种以上的选择器同时作用在一个标签上。选择器相连,中间没有空格之类的其他符号。
  • 可以是基础与高级的交集,也可以是基础的交集。
<div>
    <ul class="ul1">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ul>
    <ul class="ul2">
        <li class="li1">
            列表项
            <p>我是p1</p>
        </li>
        <li>
            列表项
            <p class="p2">我是p2</p>
        </li>
        <li class="li3 hhh">
            列表项
            <p>我是p3</p>
        </li>
    </ul>
</div>

如上图:
1.设置第二列第一项的li标签为粉色。

标签选择器与类选择器的交集
li.li1 {
            color: pink;
        }

2.设置第二列第二项的p2标签为橘色。

后代选择器与类选择器的交集
.ul2 li p.p2 {
            color: orange;
        }

3.设置第二列第三项的li标签为灰色

后代选择器与类选择器的交集,其中类名有多个,属于连续交集
.ul2 li.li3.hhh {
            color: gray;
        }

IE6不支持连续交集

3.并集选择器

  • 具有共同样式的标签,通过并集选择器将这些表器写在一起,统一设置css样式。

  • 以逗号隔开。

  • 主要用于清空样式

    li,p {
              font-weight: bold;
          }
    
高级选择器效果

相关文章

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • CSS选择器

    目录: CSS派生选择器 CSS元素选择器 CSS Id 和 Class选择器 CSS 属性选择器 CSS 派生选...

  • css选择器

    css选择器】 1.css属性选择器 2.css伪类选择器 3.css层次选择器

  • CSS 选择器

    CSS 选择器 CSS 基本选择器及其扩展 CSS 基本选择器 通配符选择器 * 元素选择器 使用标签的名称...

  • Sublime 学习web的css

    html + css + js css引用 css外部样式 css优先级 css的选择器 标签选择器 类选择器 i...

  • CSS选择器

    CSS选择器的作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素。 CSS选择器的类型 CSS选择器大...

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

  • CSS-选择器1-概述

    CSS选择器-系列文章 CSS选择器-系列文章下一节 CSS选择器2-类选择器CSS3参考手册

  • CSS选择器、优先级以及!important知识总结

    一、CSS选择器 关于CSS选择器,首先请看这里:CSS 选择器参考手册 通过以上,我们可以将CSS选择器分为以下...

  • CSS

    CSS规则 at 规则 CSS选择器 CSS选择器 继承与层叠 继承与层叠 CSS 属性 CSS 属性 CSS值 ...

网友评论

      本文标题:CSS选择器

      本文链接:https://www.haomeiwen.com/subject/hjfdictx.html