css选择器

最新推荐文章于 2024-07-24 13:45:34 发布

〆启

最新推荐文章于 2024-07-24 13:45:34 发布

阅读量135

点赞数 1

分类专栏： css HTML 文章标签： css 前端 java

本文链接：https://blog.csdn.net/m0_70516782/article/details/125418273

版权

css HTML 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

css -层叠样式表

-网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式

而最终我们能看到的只有最上边的一层

-设置网页中元素的样式

css样式表三种使用方法

第一种方式：内联样式/行内样式

写在开始标签里，写一个style属性，在style属性值里面写样式

样式分为样式名:样式值; 名值对的结构

可以写多组样式，以 ; 隔开即可

缺点：1、结构和样式耦合 2、不容易修改

第二种方式：内部样式表

在head标签中，写一个style标签，在style里先选中对应的元素，然后设置样式

可以多组样式，以;隔开即可,最后一个样式，可以不写 ; ，但我们一般都写

缺点：不方便复用

第三种方式：外部样式表

在html文件外新建一个css文件，在css文件内书写样式，然后通过link标签

引入css文件

最推荐使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="./index.css" /> 
    <!-- 新建一个.css的样式表  在head里面加link并关联.css样式表就是：外部样式表 -->

    <tbody></tbody>

    <style>
      .s1{ color: brown;}
      .l1~li{ background-color: green;}
      li:nth-of-type(1){ color: brown;}
      li:not(.l1){ font-size: 25px;}
      /* 在style的就是：内部样式表 */
    </style>

  </head>
  <body>
    <h1>沁园春·雪</h1>
    <h3>毛泽东</h3>
    <ul>

      <span style="color: brown;">测试</span>
      <!-- 在span里面加style再加想要的元素就是：内联样式/行内样式 -->
      
      <li>北国风光，千里冰封，万里雪飘。</li>
      <li>望长城内外，惟余莽莽；大河上下，<span class="s1">顿失滔滔</span></li>
      <p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
      <p>须晴日，看红装素裹，分外妖娆。</p>
      <li class="l1">江山如此多娇，引无数英雄竞折腰。</li>
      <li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
      <li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
      <li>俱往矣，数风流人物，还看今朝。</li>
    </ul>
  </body>
</html>

CSS的语法：

选择器声明块

选择器：选中你想设置样式的内容/标签/元素，写{}

声明块：

一组一组的名值对结构

常用选择器

1、元素选择器

作用：选中对应的标签

语法：标签名{}

例如：h1{},h3{},p{}

属性值{

color: red;

}

2、id选择器

作用：选中对应的id属性值的内容,id属性值不能复用

语法：#id属性值{}

#属性值{

color: red;

}

3、class选择器

作用：选中对应的class属性值的内容，可以复用属性值

语法：.class属性值{}

.属性值{

color: red;

}

4、通配选择器

语法：*{}

color: red;

}

复合选择器

1、交集选择器

作用：选中符合多个选择器条件的内容

语法：选择器1选择器2选择器3···{}

例如：div.red{},#div2.red{}

注意：如果选择器中有元素选择器，必须把元素选择器放在前面

2、并集选择器

作用：同时选中符合多个选择器对应的内容

语法：选择器1,选择器2,选择器3····{}

例如：.red,#p2,h1{}

关系选择器

需求一：通过父元素div，给它的子元素p设置一个字体颜色红色 */

#加元素值 > p {

color: red;

}

1、子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

需求二：div里的span元素字体都变为30px

#school span {

font-size: 30px;

}

2、后代选择器

作用：通过指定的祖先元素找到指定的后代元素

语法：祖先元素后代元素{}

需求三：通过前端，找到java，然后java字体颜色变为blue

3、选择下一个兄弟选择器

作用：通过指定的元素找到下一个兄弟元素

语法：兄+弟{}

.p1 + .p2 {

color: blue;

}

四:选择下面所有的兄弟(前面的不选)

语法：兄～弟{}

.p1 ~ p {

font-size: 40px;

}

属性选择器

1:属性选择器

语法：[属性名]{} 选择含有指定属性的元素

[属性名=属性值]{} 选择含有指定属性和属性值的元素

[属性名^=属性值]{} 选择属性值以指定值开头的元素

[属性名$=属性值]{} 选择属性值以指定值结尾的元素

[属性名*=属性值]{} 选择属性值含有某值的元素

需求一：有title属性的p标签，颜色变为红色 
<body>
    <h1 title="a" id="hh" class="hhh">满江红·写怀</h1>
    <h3 title="b">岳飞·宋</h3>
    <p>····</p>
    <p title="abc">靖康耻，犹未雪。臣子恨，何时灭！</p>
    <p title="abcda">驾长车，踏破贺兰山缺。</p>
    <p>壮志饥餐胡虏肉，笑谈渴饮匈奴血。</p>
    <p>待从头、收拾旧山河，朝天阙。</p>
  </body>

实现：
 [title*="ab"] {
        color: red;
      }

伪类选择器

一、伪类（不存在的类，特殊的类）

-伪类用来描述一个元素的特殊状态

-比如：第一个元素，被点击的元素，鼠标移入的元素···

-特点：一般请情况下，使用：开头

1、 :first-child 第一个子元素

2、 :last-child 最后一个子元素

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

特殊值： n 所有的

2n或even 选中偶数

2n+1或odd 选中奇数

—以上这些伪类都是根据所有的子元素进行排序

1、:first-of-type 第一个子元素

2、:last-of-type 最后一个子元素

3、:nth-of-type() 选中第n个子元素

功能跟上面相似，

不同的是，这是在同类型的子元素中去选择

二、:not() 否定伪类

-将符合条件的元素从选择器中去除

例如将ul里的第一个li一直设置为红色

实现：

li:not(.l1){

color: red;

}

a元素的伪类

需求一：给未访问过的标签为a的超链接加红色字体

:link 用来表示未访问过的链接（正常链接）

a:link {

color: red;

}

需求二：给访问过的超链接加绿色字体

2、:visited 用来表示访问过的链接

由于隐私的原因，所以visited只能改颜色

a:visited {

color: green;

}

需求三：鼠标移入a标签，链接字体变大到30px

3、:hover 用来表示鼠标移入的状态

a:hover {

font-size: 40px;

color: grey;

}

/* div:hover{

color: orange;

}*/

需求四：鼠标点击后，增加背景色pink

4、:active 鼠标点击后的状态

div:active{

background-color: palegreen;

}

:link :visited只针对超链接a标签

:hover :active 针对所有的标签

伪元素选择器

伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）

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

::first-line 表示第一行

::selection 选中的内容

::before 元素的开始位置

::after 元素的结束位置

before和after必须要结合content使用

/* 需求一：让文章的首字母一直为字体为24px */
      /* 需求二：让文章的第一行添加背景色黄色 */
      /* 需求三：让选中的内容，字体为红色 */
      /* 需求四：在元素开始的位置前+'abc' */
<p>
     psum dolor sit amet consectetur adipisicing elit. Porro fugiat maiores sit ex expedita beatae, sint quisquam amet quod cupiditate, tempora omnis impedit deleniti, iure fuga illo
      quibusdam. Alias, soluta?
    </p>


实现：   p::first-letter{
          font-size: 34px;
        }
        p::first-line{
          background-color: yellow;
        }
        p::selection{
          color: red;
        }
        p::before{
          content: '你好';
        }
        p::after{
          content: '大家好';
        }

继承

样式的继承（继承祖先的样式）

定义：为一个元素设置的样式，同时也会应用到它的后代元素上

优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式

注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关等不会被继承

1、共同的祖先元素，设置统一的字体大小

body {
        font-size: 24px;
      }


2、span 的背景色是透明的，你给p设置了背景色，给p设置，透出来，就是这个色了
   背景图片等，也都不会被继承
p {
        color: red;
        background-color: cadetblue;
        font-size: 20px;
      }


<body>
    <p>
      我是一个p元素
      <span
        >我是p元素的span元素
        <em>我是span里面的em元素，我也可以继承</em>
      </span>
    </p>
    <span>我是p元素外的span元素，我不会继承</span>
  </body>

选择器权重

从上到下依次为：

1、 !important （最高优先级）慎用，一般不用

2、内联样式

3、 id选择器

4、类和伪类选择器/属性选择器

5、元素选择器

6、通配符、子选择器、相邻选择器等。如*、>、+

（其中）继承的样式没有优先级

〆启

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器

-网页实际是一个多层的结构，通过css可以分别为网页的每一层来设置样式而最终我们能看到的只有最上边的一层 -设置网页中元素的样式第一种方式：内联样式/行内样式写在开始标签里，写一个style属性，在style属性值里面写样式样式分为样式名:样式值; 名值对的结构可以写多组样式，以 ; 隔开即可缺点：1、结构和样式耦合 2、不容易修改第二种方式：内部样式表在head标签中.
复制链接

扫一扫

专栏目录