css 选择器—类型分类

最新推荐文章于 2024-03-05 10:34:17 发布

科技达人ლ(′◉❥◉｀ლ)

最新推荐文章于 2024-03-05 10:34:17 发布

阅读量300

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/m0_56175362/article/details/114946592

版权

js 专栏收录该内容

50 篇文章

订阅专栏

介绍

html：网页的结构

css：表现层，网页的美化

ccs与html都是w3c组织进行维护的，现在的版本已经更新到3.0，也就是我们常说css3.我们先来看一下2.1.

css:

cascading atyle sheets 层叠样式表。
式样：html标签在页面中的显示效果。
最开始，html与css并没有分离，也就是样式与结构是写在一起。

css优点

能够使代码简洁，可读性比较强。
便于维护。
对搜索引擎比较友好。
提高开发效率。

css语法

选择器{
每一个声明是由属性与属性值组成。
属性：属性值（声明）
}

选择器

选择谁去做样式的改变

声明

做什么样的样式修改

盒子属性

盒子的宽高，背景色以及边框。
width：宽。单位是像素。
height：高。单位是px。
background-color：背景色。
属性值：
1.颜色名（英文）
2.RGB rgb（0,2380118）；0-255
3.十六进制0-9a-f#f00
border：边框，多属性值，顺序，宽度，线的类型，颜色。

书写位置

根据书写位置的不同，css可以分为三种：行内式，内嵌式，外链式。

行内式

css属性直接写在标签的style属性中。
优点：
写法比较简单，不用考虑选择器。
缺点：
结构与样式没有分离。
不便于维护。
样式不能复用，只对当先元素有效。
在开发过程中，不推荐使用。

内嵌式

使用style标签，将css属性名与属性值引入html页面中，style标签放置在head标签中。
优点：
结构与样式部分分离。
便于维护。
样式可以复用。
缺点：
结构与样式没有达到完全分离。
只对当前页面分离。

外链式

新建一个css文件，将css语句写入css文件中，然后在html页面中通过link标签引入。
【注意】css文件名不能写中文，可以写英文，数字，下划线，但是不能以数字开头。

//rel 表示的是引入的文件与页面的关系，这里表示引入的文件是当前页面的样式表。 //href 引入文件路径。 **优点：** 结构与样式完全分离。样式可以复用，多个页面都可以使用。使用浏览器的缓存机制，提高网页的加载速度。缓存：浏览器在打开页面时，会将页面中的图片和文件保存到本地，下次打开页面时，不需要再次下载了，能够提高网页的加载素度。 css文件也是一个文件，也会被缓存下来。以后开发过程中。推荐**外链式**。

div标签+span标签

这两个标签都是盒子。
div标签是块级元素，大盒子。
span标签是行内元素，小盒子，span里面只允许放置文件。

基础选择器

选择器：选中要添加样式的标签元素。

1.标签选择器

通过标签名直接选中标签。
格式：

 <style>
    p{
      color: #2980b9;
      font-size: 48px;
    }
  </style>

 <p>三十功名尘与土</p>

2.ID选择器

通过标签的ID属性值来选中标签
格式：
#ID{
}

<style>
    #p1{
      color: #2980b9;
      font-size: 48px;
    }
  </style>

  <p id="Orz">三十功名尘与土</p>

3.类选择器

通过标签class属性值来选中标签
格式：
.class{
}

<style>
    .poem{
      color: brown;
      font-size: 48px;
    }
     </style>

 <p class="poem">三十功名尘与土</p>

【注意点】

1.class值不可以不唯一。类选择器选中的是拥有相同class属性值的标签元素。
2.一个标签可以有多个class值。多个class值之间用空格隔离。

4.通配符*

可以选中包括body在内的所有标签。
用途：清除默认样式。
格式:
*{
}

<style>
   *{
     color: red;
   }
 </style>

  <p>山穷水复疑无路</p>
  <span>柳暗花明又一村</span>
  <div>盒子</div>

【注意】现在用不了，因为效率不高。

高级选择器

1.子代选择器

通过标签间的嵌套关系来选中响应的标签元素。
选择器1>选择器2{
}
找到选择器1下面的儿子元素，在选中选择器2.
格式：
选择器1>选择器2 {
}

 <style>
 div>p {
   color: blue;
 }
 </style>

<div>
   <p>金山银山</p>
   <p>就是绿水千山</p>
   <span>千山万水</span>
 </div>

【注意】选择器2必须是选择器1的儿子元素。

2.后代选择器

先找到页面中所有符合选择器1的元素，然后在这些元素中再寻找符合选择器2的元素。最后找到的元素是该后代选择器选中的标签元素。
格式：
选择器1 选择器2 {
}

<style>
 div p {
   color: blue;
 }
 </style>

 <div>
     <ul>
       <li>
        <p>城厥辅三秦</p>
        <p>风烟望无五津</p>
       </li>
     </ul>
   </div>

3.交集选择器

如果选择器定义的样式完全相同，或部分相同，就可以利用丙级选择器为它们定义相同的css样式。
格式：
选择器1选择器2 {
}

 <style>
    p.poem {
      color: brown;
      font-size: 36px;
    }
  </style>

<body>
  <!-- 选中class为poem的p标签 -->
  <p class="poem">三十功名尘与土</p>
  <p>八千里路云和月</p>
  <div class="poem">
    蜀道难，难于上青天
  </div>
</body>

4.并集选择器

格式：
选择器1，选择器2 {
}
选中所有的选择器1以及选择器2的标签元素。

<style>
    h1,p{
      color: brown;
    }
  </style>

<body>
  <h1>题都城南庄</h1>
  <p>去年今日此门中，</p>
  <p>人面桃花相映红</p>
</body>

5序选择器

按照标签在父标签中的顺序来选择。
选择器：first-child 选择器选中的元素如果为父元素的第一个子元素则被选中。
last-child 选择器选中的元素如果为父元素的最后一个子元素则被选中
only-child 若该元素是父元素的唯一一个子元素。则会选中
格式：
li:first-child{
}
li:last-child{
}
li：only-child{
}

<style>
li:first-child{
  color: brown;
 }
 li:last-child{
   color: pink;
 }
 </style>

<body>
 <ul>
   <li>第一个标签</li>
   <li>第二个标签</li>
   <li>第三个标签</li>
   <li>第四个标签</li>
   <li>最后一个标签</li>
 </ul>
</body>

6.相邻选择器

选择器紧贴在选择器1元素之后的选择器2元素，两者必须同属一个父级。
格式：
选择器1+选择器2{
}

 <title>Document</title>
 <style>
p+span{
  color: khaki;
}
 </style>

 <body>
  <div>
    <p>p1标签</p>
    <span>span标签</span>
    <p>p2标签</p>
  </div>
</body>

7.兄弟选择器

选择与选择器1同级的选择器2元素
格式：
选择器1~选择器2 {
}

<style>
div{
  color: rgb(177, 37, 112);
}
 </style>

 <div>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
  </div>
  <div>
    <p>我是一个p标签</p>
    <p>我是一个p标签</p>
  </div>

【注意】兄弟选择器只能选择选择器1后面的元素，不会选中全面的元素。

8.nth-child选择器

匹配父元素的第n个子元素，假设该元素不是p，则选择器无效。
格式：
p:nth-child{
}

<style>
p:nth-child(3){
  color: rgb(177, 37, 112);
}

<body>
  <div>
    <p>我是一个p标签</p>
    <p>我是二个p标签</p>
    <p>我是三个p标签</p>
    <p>我是四个p标签</p>
  </div>

、、、js
该元素选中顺序为奇数1 3 5
p：nth-child（2n+1）{
}
该元素选中顺序为偶数2 4 6
p：nth-child（2n）{
}

9.nth-of-type选择器

匹配同类型中的指定第几个标签，比如：第四个p标签，那么就会被选中
格式：
p:nth-of-type(n）

<style>
p:nth-of-type(4){
  color: rgb(177, 37, 112);
}
 </style>

<body>
  <div>
    <p>我是一个p标签</p>
    <p>我是二个p标签</p>
    <p>我是三个p标签</p>
    <p>我是四个p标签</p>
  </div>

10.伪类选择器

（1）静态伪类**：只能用于超链接的样式。
:link 、超链接点击之前
:visited、超链接被访问之后。
（2）动态伪类**：针对所有标签都可用的样式。
：hover、悬停时，鼠标放在上时。
：active、激活时，鼠标点击时，鼠标放开，则样式恢复。
（3）特殊**：针对表单元素的样式。
：focus、是某个标签获取焦点是的样式。
a标签有4中伪类。是写顺序为：link、visited、hover、active。