CSS选择器的理解-阿里云开发者社区

CSS选择器的理解

2024-01-23 21

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS选择器的理解

css是“层叠样式表”，是一种标准的样式表语言用于描述网页的表现形式（例如网页元素的位置、大小、颜色等）。

CSS 的主要作用是定义网页的样式（即美化网页），对网页中元素的位置、字体、颜色、背景等属性进行精确控制。不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式。

一、常用选择器

常用选择器是最易见到的选择器。

1）元素选择器

作用 : 选中对应标签中的内容；例:p{} , div{} , span{}

2）类选择器

语法 : .class属性值{}

作用 : 选中对应class属性值的元素；例子：.A{}

3）id选择器

语法 : #id属性值{}

作用 : 选中对应id属性值的元素；例子：#A{}

4）通配符选择器

语法 : *{}

作用 : 让页面中所有的标签执行该样式,通常用来清除间距；

二、群组选择器

是同时对几个选择器进行相同的操作。

语法 : 选择器1,选择器2,选择器3...{}

作用 : 同时选中对应选择器的元素；例子：div,p,h3,.li2{ font-size: 30px; }

三、关系选择器

是能够根据其它元素的关系选择适合的元素选择器。

1）后代选择器

后代选择器也叫包含选择器，祖先元素直接或间接的包含后代元素。

<style>
  /* 后代选择器(包含选择器),选择到的是box下面的所有后代p */
     .box p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    } 
</style>
  <div class="box">
    <p>0000</p>
    <div>
      <p>11111</p>
      <p>22222</p>
    </div>
    <div class="box2">
      <p>333</p>
    </div>
    <p>444</p>
  </div>

2）子代选择器

父元素直接包含子元素,子元素直接被父元素包含。

<style>
   /*子选择器选中的是.box下所有的儿子p
   .box>p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    } 
</style>
  <div class="box">
    <p>0000</p>
    <div>
      <p>11111</p>
      <p>22222</p>
    </div>
    <div class="box2">
      <p>333</p>
    </div>
    <p>444</p>
  </div>

3）相邻兄弟选择器

是指在另一个元素之后可以选择的元素，两者具有相同的父元素。

<style> 
   /* 相邻兄弟,会选择到box后面紧挨着的p,那么就是内容为111的p标签 */
    .box+p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    } 
</style>
 <p>000</p>
  <div class="box">盒子1</div>
  <p>111</p>
  <p>222</p>
  <p>333</p>
  <div>
    <p>44444</p>
  </div>
  <p>5555</p>

4）通用兄弟选择器

给指定选择器后面的所有选择器选中的所有标签设置属性。

<style>
   /*通用兄弟选择器,会选择到.box后面所有的兄弟p,那么就是除了内容为'44444'以外的所有p*/
   .box~p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
</style>
  <p>000</p>
  <div class="box">盒子1</div>
  <p>111</p>
  <p>222</p>
  <p>333</p>
  <div>
    <p>44444</p>
  </div>
  <p>5555</p>

四、属性选择器

是通过元素的属性及属性值来选择元素的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /* 第一种用法：选择含有指定属性的元素。
                语法：[属性名]{} */
        /*选择属性名title,设置字体颜色红色  */
        [title]{
            color:red;
        }
    </style>
</head>
<body>
    <h1 title="a">《出塞》</h1>
    <h2 title="ab">唐·王昌龄</h2>
    <p title="abc">秦时明月汉时关，</p>
    <p title="abab">万里长征人未还。</p>
    <p title="c">但使龙城飞将在，</p>
    <p>不教胡马度阴山。</p>
</body>
</html>

其他用法：

            <a href="http://www.baidu.com" target="_blank" class=" links item first" id="first" title="link">1</a>
      <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
      <a href="sites/file/test.html" class="links item" title="link-1 aa" lang="zh-cn">3</a>
      <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
      <a href="sites/file/image.jpg" class="links item" title="link-23 aa">5</a>
      <a href="mailto:baidu@hotmail" class="links item" title="website link" lang="zh">6</a>
      <a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
      <a href="/abc.pdf" class="linksitem" title="close the website" lang="en-zh">8</a>
      <a href="abcdef.doc" class="links item" title="http://www.sina.com">9</a>
      <a href="abd.doc" class="linksitem last" id="last">10</a>
      <style>
            /* 属性选择器的权重是0010   */
      /* 写法1 某某[属性] 选择到a标签且有title属性的变*/
      /* a[title]{
        background: yellow;
      } */
      /* a[lang][target]{
        background: yellow;
      } */
      /*重点: 写法2: 某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一摸一样的也有的多一个空格都不行 */
      /* a[lang="zh"]{
        background: yellow;
      } */
      /* a[title="this is a link"]{
        background: yellow;
      } */
      /* class名字是item的,且有属性lang且属性值必须一模一样是zh-cn的 */
      /* .item[lang="zh-cn"]{
        background: yellow;
      } */
      /* id是last且有title属性且有class属性,属性值只能是links的变 */
      /* #last[title][class="links"]{
        background: yellow;
      } */
      /* 写法3: 某某[属性^=属性值] */
      /* a标签有class属性且属性值是li开头的 */
      /* a[class^=" li"]{
        background-color: yellow;
      } */
      /* a[title^="this"][lang]{
        background-color: yellow;
      } */
      /* 写法4 某某[属性$=属性值] */
      /* a标签有class属性且属性值结尾是t的变 */
      /* a[class$="t"]{
        background-color: yellow;
      }  */
      /* a[href$=".pdf"]{
        background-color: yellow;
      }
      a[href$=".doc"]{
        background-color: red;
      }
      a[href$=".png"]{
        background-color: green;
      } */
      /* 写法5 某某[属性*=属性值] */
      /* 选择到a标签且有href属性且只要有字母b就可以 */
      /* a[href*="b"]{
        background-color: green;
      } */
      /* 写法6 某某[属性~=属性值] */
      /* 选择到的是a标签且有class属性,且属性值有完整的itme词的变 */
      /* a[class~="item"]{
        background-color: green;
      } */
      /* 写法7 某某[属性|=属性值] */
      /* 这个是选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 */
      a[title|="link"]{
        background-color: green;
      }
       </style>

五、伪类选择器

是选择器的一种,它用于选择处于特定状态的元素。

1）常用的伪类选择器

:first-child() 第一个子元素

:last-child() 最后一个子元素

:nth-child() 选中第n个元素

2）否定伪类

:not() 将符号条件的元素去除

3）元素的伪类

:link 表示未访问过的a标签

:visited 表示访问过的a标签

:hover 鼠标移入后元素的状态

:active 鼠标点击后，元素的状态

六、伪元素选择器

是用于向某些元素设置特殊效果。

常见的几个伪元素：

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示选中的元素

::before 元素开始的位置前

::after 元素结束的位置后

CSS选择器的理解

热门文章

最新文章

相关课程

相关电子书

相关实验场景