一文带你入门css【选择器的详细介绍】(2)

可以看出经过修饰字体变大也变了颜色,并且跑到了中间位置。

Hello World

③原因分析

在以上两段代码中,文件2比文件1新增了一个style标签,而标签内的东西才是关键所在

因为hello world是在p标签内所以将p标签选了出来经过一系列的修改得到了如图的效果。

具体是如何做的目前不必深究,需要知道的是css可以这么做,日后还会进行更多的样式介绍

希望大家给个关注阅读其他文章。

二、css中选择器的介绍

==============================================================================

1.标签选择器

---

上述介绍的案例就是使用的标签选择器,标签选择器就是

直接使用标签将相应的所有标签做出改变

①案例

Hello world

Hello word

②结果

2.类选择器

---

在此引入一个概念,给标签赋予类

例如：

这样可以选出这一类标签

①.案例

hello World

Hello World

②.结果

3.id选择器

---

使用方法与类选择器类似,可以对标签赋予id

一般来说：

因为id具有唯一性。

经博主测试：

同一个html页面多个标签可以同时使用同一个id

①.案例

Hello World

②.结果

4.通配符选择器

---

通配符选择器一般用于项目的初始化,可以直接选出所有标签,或具有某一特征的标签

①.案例

hello world

helloworld

• hahha

• ②.结果

  

  5.属性选择器

  ---

  根据属性，选择出符合条件的标签。

  基本语法：

  选择出有类属性的标签

  span[class=“re”] {

  color: blue;

  }

  /* 该标签属性是1+10=11 */

  选择出开头是demo的标签

  div[class^=“demo”] {

  color: chartreuse;

  }

  选择出结尾是data的id

  select[id$=“data”] {

  color: cyan;

  }

  选择出类名包含demo0的标签

  div[class*=“demo0”] {

  color: darkorchid;

  }

  ①.案例

  Hello World

  Hello World

  
  
  Hello World
  Hello World
  Hello World
  Hello World

  Hello World

  Hello World

  Hello World

  Hello World
  Hello World
  Hello World

  ②.结果

  

  6.伪类选择器

  ---

  伪类选择器有两种

  一种是孩子伪类选择器：以孩子为主体

  一种是类型选择器：以类型为主体

  /*

  ul 标签下的div标签的第一个与最后一个孩子

  */

  ul div:last-child {

  color: aquamarine;

  }

  ul div:first-child {

  color: blueviolet;

  }

  /*

  odd是奇数

  even是偶数

  括号内支持数学公式

  */

  div div:nth-child(odd) {

  background-color: grey;

  }

  div div:nth-of-type(even) {

  background-color: #ccc;

  }

  /*

  以下两个标签是这两种标签最本质的区别

  child以孩子个数为主,先检查孩子所属的位置,然后对比标签类型只有都符合才会触发效果

  type以标签类型为主,在指定的标签类型中找到标签的次序,然后触发效果

  */

  ul div:nth-child(1) {

  background-color: hotpink;

  }

  ol div:nth-of-type(1) {

  background-color: brown;

  }

  ①.案例

  Hello

  Hello
  Hello
  Hello
  Hello
  Hello

  Hello

  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello
  Hello

  ②.结果

  

  7.伪元素选择器

  ---

  伪元素选择器之所以叫伪元素选择器,就是因为标签不是真实存在的

  而是依赖原有的盒子存在的,而原有的盒子身份是他的父盒子

  伪元素有before after两种

  div {

  position: relative;

  width: 300px;

  height: 300px;

  background-color: blueviolet;

  }

  /* 伪元素选择器必须要有content这一属性,如果啥也不存就用双引号引起来空格 */

  div:hover::after {

  content: ‘Hello’;

  position: absolute;

  width: 300px;

  height: 300px;

  background-color: rgba(0, 0, 0, 0.5);

  text-align: center;

  line-height: 300px;

  font-size: 30px;

  font-weight: 700;

  }

  ①.案例