css概述与css选择器

1.css概述

css以HTML为基础提供了丰富的内容，如字体，颜色背景的控制及整体的排版等，而且可以根据不同浏览器设置不同的样式图中文字的颜色，粗体，背景，行间距和左右两列的排版等，都可以通过css控制的

同时css非常灵活，既可以镶嵌在html文档中，也可以是一个单独的外部文件，如果是独立文件，必须以.css为后缀名

css使用的是内嵌式，虽然与html在同一个文件中。但css要集中写在html文档的头部，也是符合结构与表现相分离的

2.css样式规则

1.CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将 选择器、属性和值 都采用小写的方式。

2.多个属性之间必须用英文状态的分号隔开，最后一个属性的分号可以省略，但是，为了便于增加新样式最好保留。

3.如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。

4.在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。

3.CSS的一些特点

1.丰富的样式定义

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2.层叠性

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

3.继承性

一些属性和样式，如果在父代的元素设置了，子代以及后代的元素没有另外设置元素属性的话，就会继承父代的元素与属性。

一：属性选择器

1.E[att^=value]属性选择器

E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。例如，div[id^=section]表示匹配包含id属性，且id属性值是可以以“section”字符串开头的div元素。

复制代码
<!DOCTYPE html>
<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>
    <style type="text/css">
p[id^="one"]{
color: brown;
}
    </style>
</head>
<body>
    <p id="one">你好世界</p>
    <p id="two">你好世界</p>
    <p id="one1">你好世界</p>
    <p id="two1">你好世界</p>
</body>
</html>
复制代码

 

 

 在上述代码中，使用了[att^=value]选择器p[id^="one"]。只要是p元素的id属性值是以“one"字符串开头就会被选中的，从而呈现特殊的文本效果

2. E[att$=value]属性选择器

E[att$=value]属性选择器与E[att^=value]属性选择器是一样的E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。例如，div[id^=section]表示匹配包含id属性，且id属性值是可以以“section”字符串末尾的div元素。

复制代码
<!DOCTYPE html>
<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>
    <style type="text/css">
p[id$="one"]{
color: brown;
}
    </style>
</head>
<body>
    <p id="nihaoone">你好世界</p>
    <p id="nihaotwo">你好世界</p>
    <p id="niahoone">你好世界</p>
    <p id="nihaotwo">你好世界</p>
</body>
</html>
复制代码

 在上述代码中，使用了[att$=value]选择器p[id$="one"]。只要是p元素的id属性值是以“one"字符串结尾就会被选中的，从而呈现特殊的文本效果

3.  E[att*=value]属性选择器

3.  E[att*=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含value子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。例如，div[id*=section]表示匹配包含id属性，且id属性值包含“section”字符串的div元素。

复制代码
<!DOCTYPE html>
<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>
    <style type="text/css">
p[id*="one"]{
color: brown;
}
    </style>
</head>
<body>
    <p id="nihaoone">你好世界</p>
    <p id="nihaonetwo">你好世界</p>
    <p id="niahoone">你好世界</p>
    <p id="onenihaotwo">你好世界</p>
</body>
</html>
复制代码

 

  在上述代码中，使用了[att*=value]选择器p[id*="one"]。只要是p元素的id属性值是以“one"字符串就会被选中的，从而呈现特殊的文本效果

二：关系选择器

子代选择器（ > )

子代选择器主要是用来选择某个元素的第一级子元素。例如希望选择只作为h1元素的子元素的strong元素，可以写成h1>strong

兄弟选择器（+  ~）

1. 临近兄弟选择器

该选择器使用加号“+”来；连接前后两个选择器。选择器中的两个元素是同一个父亲，而且第二个元素必须紧跟着第一个元素。

2. 普通兄弟选择器

普通兄弟选择器使用“~”来连接前后两个选择器。选择器中的两个元素有同一个父亲，但是第二个元素不必紧跟着第一个元素

三： 结构化伪类选择器

结构伪类选择器使是css3中新添加的选择器。常用的架构话伪类选择器有:root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、:nth-last-of-type(n)选择器、:empty选择器、:target选择器。

1.  :root选择器

:root 选择器用于匹配文档根元素，在HTML中，根元素始终是html元素。也就是说使用   “:root选择器”定义的样式，对所有页面元素都有有效。对于不需要的元素可以单独设置样式进行覆盖

2.  :not选择器

:not选择器用于如果某个结构使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用:not选择器。

3.  :only-child选择器

:only-child选择器用于匹配某元素的唯一子元素的元素，也就是说，如果每个父级元素就有一个子元素，就可以使用:only-child选择器

4.  :first-child选择器、:last-child选择器

:first-child选择器、:last-child选择器分别用于父元素中的第一个和最后一个子元素的样式

5.  :nth-child(n)选择器、:nth-last-child(n)选择器

:nth-child(n)选择器、:nth-last-child(n)选择器是对于:first-child选择器、:last-child选择器的延申与拓展

6.  :nth-of-type(n)选择器、:nth-last-of-type(n)选择器

:nth-of-type(n)选择器、:nth-last-of-type(n)选择器 用于匹配属于父元素的特定类型的第n个元素和倒数第n个子元素

7. :empty选择器

:empty选择器用来选择没有子元素的或文本内容为空的所有元素

8.   :target选择器

:target选择器为界面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式。只有用户单机了页面的超链接并跳转到target元素后:target选择器所设置的样式才会起作用

 

posted @   しっ  阅读(383)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示
SQL AI 助手