css-选择器

最新推荐文章于 2024-08-02 13:49:42 发布

Winnie_9727

最新推荐文章于 2024-08-02 13:49:42 发布

阅读量381

点赞数

本文链接：https://blog.csdn.net/qq_59950604/article/details/122302314

版权

层叠样式标签选择器类选择器 ID选择器 CSS属性

关键词由CSDN通过智能技术生成

层叠问题:

给同一个标签设置相同的样式时,写在下面的样式会生效!!!!!

字体相关属性的连写形式

font: style weight size family ；（稍微舒服）

<font: normal 700 100px '隶书';>

<font: 100px '楷体';>

注意点:

1. 书写的顺序

font:style weight size family ;

记忆的方法:

1. swsf -> 稍微舒服

2. font: italic 700 60px '楷体';

2. 省略问题(可以省略前两个)

3. 层叠问题!!!!

如果需要设置单独的样式,单独的样式要写在连写的下面!!!

如果连写中省略了属性,其实表示设置了默认值

1.标签选择器：通过标签名，找到页面中对应的标签，设置样式

结构：

标签名 {

css属性名：属性值；

}

注意点：

1、标签选择器不能单独选中某一个标签，会选择一类标签

2、标签选择器无论你嵌套的关系有多深，都能找到标签

<style>

p {

color: red;

}

</style>

</head>

<body>

<p>我是p标签</p>

<p>我也是p标签</p>

<div>我是div</div>

<div>我也是div</div>

<div>

<p>我是躲猫猫</p>

</div>

</body>

2.类选择器：通过类名，找到页面中所有带有这个类名的标签，设置样式

结构：

.类名 {

css的属性名：属性值；

}

每一个标签都有class（类）属性，类名（class属性的属性值！！！）

注意点：

1、类名的命名规范：类名可以由数字、字母、下划线组成，不能以数字开头的

2、一个标签上可以有多个类名，并且类名与类名之间必须以空格隔开

3、一个类选择器可以同时选中

标签与类选择器的关系：多对多的关系

.red {

color: red;

}

.yellow {

color: yellow;

}

.pink {

color: pink;

}

.big {

font-size: 60px;

}

</style>

</head>

<body>

</body>

3.id选择器：通过id属性值，找到页面中带有这个id的标签，添加样式

结构：

#id属性值 {

css属性名:属性值;

}

每一个标签上都是id属性

注意点：

1、id属性相当于每个人的身份证号码，在一个页面中，id属性值，唯一的，不可以重复的

2、一个标签只能有一个id属性值！！！

3、一个id选择器只能选中一个标签,标签与id选择器之间的关系：一对一

#red {

color: red;

}

#green {

color: green;

}

#divred {

color: red;

}

</style>

</head>

<body>

</body>

冗余代码：多余的代码就可以通过类选择器

4.通配符选择器：就是找到页面中所有的标签，设置样式

结构：

* {

css的属性名：属性值；

}

注意点：

通配符选择器比较消耗性能，一般不会使用，一般只会用在清除标签默认的margin和padding才会使用到！！！

5.并集选择器：找到选择器1和选择器2选中的标签，给他们都设置样式

结构：

选择器1，选择器2 {

css属性名：属性值；

}

注意点：

1、并集选择器可以同时写多个选择器，选择器与选择器之间需要以逗号隔开！！！

.red,p,#biglovely {

color: red;

}

<div class="red">小帅哥</div>

<p>小姐姐</p>

<p>小可爱</p>

<span id="biglovely">大可爱</span>

6.交集选择器：找到页面中既能被选择器1选中又能被选择器2选中的标签设置样式

结构：

选择器1选择器2 {

css的属性名：属性值；

}

注意点：

1、交集选择器可以同时写多个选择器，并且选择器与选择器之间紧挨着的！！！

2、如果交集选择器中有标签选择器，标签选择器必须写在最前面

p.red#lovely {

color: red;

}

<div class="red">小姐姐</div>

<p>小帅哥</p>

<p class ="red" id="lovely">小可爱</p>

7.后代选择器：先通过选择器1找到一堆标签，在这一堆标签的后代（儿子、孙子、重孙子......）中，找到满足选择器2的标签设置样式

结构：

选择器1 选择器2 {

css属性名：属性值；

}

.father p {

color: red;

}

<div>

</div>

<div>

</div>

8.子代选择器：先通过选择器1找打一堆标签，在这一堆标签的子代（儿子）中，找到满足选择器2的标签设置样式

结构：

选择器1>选择器2 {

css属性名：属性值；

}

.father>p {

color: red;

}

<div class="father">

<p>小可爱</p>

<div>

<p>小姐姐</p>

</div>

<p>大可爱</p>

颜色的取值：

1、关键字

红色 red

蓝色 blue

绿色 green

黄色 yellow

粉色 pink

紫色 purple

2、rgb表示法

r：red

g：green

b：blue

每一项：0~255

0,0,0 黑色

255,255,255 白色

255,0,0 红色

3、rgba表示法

a：透明度取值范围：0~1

1:完全不透明

0：完全透明

4、颜色的十六进制表示法

#ffaabb

十六进制表示法：

要么是6位 #ffaabb

要么是3位 #fab

#ffabcc->#fabc 错误的写法

属性选择器：通过标签的属性找到对应的标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>

    input[type="text"] {
      background-color: red;
    }
    input[type="button"] {
      background-color: green;
    }
  </style>
</head>
<body>
  <input type="text"><input type="button" value="普通按钮">
  <input type="text"><input type="button" value="普通按钮">
  <input type="text"><input type="button" value="普通按钮">
  <input type="text"><input type="button" value="普通按钮">
  <input type="text"><input type="button" value="普通按钮">
  <input type="text"><input type="button" value="普通按钮">
  <input type="text"><input type="button" value="普通按钮">
  <input type="text"><input type="button" value="普通按钮">
  <input type="text"><input type="button" value="普通按钮">
  <input type="text"><input type="button" value="普通按钮">
  <input type="text"><input type="button" value="普通按钮">
  <input type="text"><input type="button" value="普通按钮">
</body>
</html>

结构伪类选择器：

li:first-child {

color: red;

}

li:last-child {

color: blue

}

找到页面中所有偶数个li变颜色？？

nth-child（可以写一个代数）

n：0,1,2,3,4,5，......正无穷

偶数：2n

奇数：2n + 1