02选择器

最新推荐文章于 2024-08-03 23:03:36 发布

鼠标a

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量90

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_73340670/article/details/127525474

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS(引入方式、选择器、CSS属性)

引入方式

内联样式  内嵌样式  外联样式

基础选择器

选择器

元素选择器

id选择器

id的值唯一的，每一个标签都有id属性

类选择器

一个元素可以有多个类名

语法

<style>
  .类名{
      color:red;
  }
</style>

<p class="类名">段落标记</p>
//多个类样式之间用空格隔开
<p class="类名1 类名2">段落标记</p>

复合选择器

后代选择器

后面的选择器是前面选择器的后代，选择器之间用空格隔开（可以跨级，省略某个元素）

子代选择器

后面选择器是前面选择器的儿子，选择器之间用 > 隔开（不能跨级）

群集选择器

用,隔开，选择多个元素赋予共同的属性

通配符选择器

找到页面中所有的标签，设置样式

 * {
        margin:0；
   }

交集选择器

选择器之间紧挨着

交集选择器中有标签选择器，标签选择器必须放在最前面

作用:选中页面中同时满足多个选择器的标签

既被选择器1选中又被选择器2选中的标签

选择器1选择器2{}

 <style>
      p {
        font: bold 30px/46px '楷体';
      }
      /* 选中的是p标签中class="active"的标签 */
      p.active {
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <p>段落标记</p>
    <p>段落标记</p>
    <p class="active">段落标记</p>
    <p>段落标记</p>
  </body>

伪类选择器

用来描述一个元素的特殊状态;比如第一个元素，某个元素的子元素，鼠标点击的元素

静态伪类

只能用于超链接的样式

:link  超链接点击之前
:visited 链接被访问过之后

动态伪类

所有标签都适用

：hover  鼠标悬浮在超链接上
:active  被激活  鼠标点击 不松手
：focus  标签获得焦点（了解，多用于input标记）

代码

<style>
      /* 鼠标悬浮在h3上 */
      h3:hover {
        background-color: aquamarine;
        color: brown;
      }
      /* 鼠标点击 不松开 */
      h3:active {
        color: chartreuse;
      }
      /* 了解 */
      input:focus {
        background-color: cornflowerblue;
      }
    </style>
  </head>
  <body>
    <h3>三级标题</h3>
    <h3>三级标题</h3>
    <h3>三级标题</h3>
    <h3>三级标题</h3>
    <h3>三级标题</h3>

    <input type="text" />
  </body>

伪类应用于超链接[重点]

<style>
      /* 链接点击之前 */
      a:link {
        color: blue;
      }

      /* 链接访问之后 */
      a:visited {
        color: aqua;
      }
      /* 鼠标放到标签上时 */
      a:hover {
        color: brown;
      }
      /* 被激活  鼠标点击 不松手 */
      a:active {
        color: chartreuse;
      }

      /* 
      4个伪类同时应用于a标签时要注意顺序问题
      link  visited  hover  active  
      */
    </style>
  </head>
  <body>
    <a href="http://www.baidu.com">超链接</a>
  </body>

其它伪类

:first-child在某父元素中的第一个子元素

:last-child在某父元素中的最后一个子元素

E:nth-child 对父元素里所有孩子排序选择，先找到第n个孩子,然后看看是否和E元素匹配（常用）
E:nth-of-type 对父元素里指定的子元素进行排序选择，先去匹配E，在根据E找到第n个孩子（精准定位）

:nth-child(2n-1)奇数行，也可用odd表示奇数 :nth-child(2n)偶数行，可以用even表示偶数

(-n + 3)前三个，包含第三个（n+3)从三开始一直到最后

优先级

引入方式优先级

内联样式优先级最高，内嵌样式和外联样式使用的是就近原则

选择器的优先级

!important>id选择器(100)>内选择器(10)>元素选择器(1)

复合选择器优先级

需要计算权重分 !important>id选择器(100)>内选择器(10)>元素选择器(1)

<style>
      /*11  */
      .one p {
        color: red;
      }

      /* 21 */
      .one > .active > p {
        color: yellow;
      }

      /* 1 */
      p {
        color: blue;
      }

      /* 11 */
      .active > p {
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div class="one">
      <div class="active">
        <p>我是p标记</p>
      </div>
    </div>
  </body>

类和id的区别

类名和id属性值的区别
- 类名相当于名字，可以重复，一个标签可以有多个class类名
- id相当于身份证，不可重复，一个标签只能有一个id属性值
书写区别
- 类选择器以 .开头
- id选择器以#开头
开发

类选择器用的最多

id选择器一般和js结合使用

简写语法，快速生成代码

 <!-- 回车 -->
    <!-- div -->
    <div></div>
    <!-- .red -->
    <div class="red"></div>
    <!-- #one -->
    <div id="one"></div>
    <!-- div#one -->
    <div id="one"></div>
    <!-- div#one.one -->
    <div id="one" class="one"></div>
    <!-- ul>li{我是内容} -->
    <ul>
      <li>我是li的内容</li>
    </ul>

    <!-- ul>li{我是内容}*3 -->
    <ul>
      <li>我是内容</li>
      <li>我是内容</li>
      <li>我是内容</li>
    </ul>