css样式属性选择器使用,css类选择器定义样式

CSS-属性&&选择器

CSS选择器、CSS属性

未央ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

style写在head中间，type="text/css"可以不用写，默认就是这个。

规定文字样式、粗细、大小、字体的属性

1、字体不存在用户电脑上时：

不处理时，使用用户电脑系统默认字体

处理：font-family:“不存在的字体”,"备选字体"；--设置备选字体，可设置多个备选字体

2、一串字符串既有中文，又有英文时，如何设置两种字体

英文字体是中文字体的子集。【意思是：英文字体不能处理中文，中文字体可以处理英文】

文本装饰、文本对齐，文本缩进的属性

文本装饰-文字的下划线，中划线等

文本对齐：

文本缩进：

格式：

p{

font:20px,"楷体"

}

标签选择器选中的是页面中所有的该标签

作用：根据指定的id名称找到对应的标签，然后设置属性。（标签选择器选中的是全部的同类标签）

第一步：给需要设置的标签设置id，

第二步：

注意：

1、id在同一页面是唯一的

2、id名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用HTML的标签名

3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。

根据指定的类名称找到对应的标签，然后设置属性

第一步：给需要设置的标签设置className，

第二步：

注意：

1、className是可以重复的

2、className名是有规范的，只能是字母，数字和下划线，不能使用数字开头，不能使用标签名

3、如果仅仅是为了设置样式，不需要使用id，而是使用类选择器，id是留给js使用的。

4、同一个HTML变迁可以有多个classname

1、id使用“,”class使用#

2、class相当于人名，所以同一个页面上的HTML标签可以有一样的className；

id相当于身份证，所以同一个页面上的HTML标签不可以有一样的id；

3、class相当于人名，所以，一个HTML标签可以有多个Class

id相当于身份证，所以，一个HTML标签只能有一个id

4、一般情况下设置样式，使用class；如果需要js配合，使用id

格式：

先祖位置可以是HTML标签，可以是class名，可以是id

后代位置可以是HTML标签，可以是class名，可以是id

可以随意组合

只会查找直接子元素

格式：

1、都可以使用HTML标签、id名、class名

1、后代使用空格，子使用

2、后代可以选取指定标签的所有特定标签，包括子、孙；而子只能选取指定标签的特定子标签

定义：两个选择器相交的部分

格式：

选择器1选择器2{

}

选择器1和选择器2之间没有任何符号，没有空格，没有

选择器1和选择器2之间有逗号。

相邻：选择器1+选择器2，给紧跟着选择器1后面的选择器2设置样式

通用：选择器1~选择器2，给选择器1后面的所有选择器2设置样式

CSS3中新增的选择器最具代表性的就是序选择器

1.同级别的第几个

:first-child 选中同级别中的第一个标签

:last-child 选中同级别中的最后一个标签

:nth-child(n) 选中同级别中的第n个标签【n的值可以是数值，可以是“odd”、“even”,也可以是表达式，比如xn+y】

:nth-last-child(n) 选中同级别中的倒数第n个标签

:only-child 选中父元素中唯一的标签

注意点: 不区分类型

2.同类型的第几个

:first-of-type 选中同级别中同类型的第一个标签

:last-of-type 选中同级别中同类型的最后一个标签

:nth-of-type(n) 选中同级别中同类型的第n个标签

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签

:only-of-type 选中父元素中唯一类型的某个标签

| [ attribute ] | [target] | 选择带有 target 属性所有元素。 | 2 |

| [ attribute = value ] | [target=_blank] | 选择 target="_blank" 的所有元素。 | 2 |

| [ attribute ~= value ] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | 2 |

| [ attribute |= value ] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 | 2 |

| [ attribute ^= value ] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 a 元素。 | 3 |

| [[ attribute =value] 选择器") | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 a 元素。 | 3 |

| [ attribute = value*] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 a 元素。 | 3 |

1、属性的取值是以什么开头的

[ attribute |= value ]----------------CSS2

优先使用CSS3的。

2、属性的取值是以什么结尾的

3、属性的取值是否包含某个特性的值的

[attribute~=value]

*{

}

详解CSS样式选择器有哪些?

CSS选择器就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS选择器分类：

标签选择器、类选择器、ID选择器、全局选择器、群组选择器、后代选择器、伪类选择器

1、html标签选择器：

定义：以html标签作为选择器

2、class类选择器：

定义：为HTML标签添加class属性，通过类选择器来为具有此class属性的元素设置css样式。

类选择器也可以对不同类型元素的同一个名称的类选择器设置不同的样式规则：

同一个元素可以设置多个类，之间用空格隔开：

3、ID选择器

定义：为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则

4、群组选择器

定义：集体统一设置样式

5、全局选择器

定义：所有标签设置样式

HTML文档结构图

6、后代选择器

定义：使用后代选择器设置，之间用空格隔开，后代选择器可以多层。

7、伪类选择器

链接的四种状态：激活状态，已访问状态，未访问状态，鼠标悬停状态。

伪类

说明

:link

未访问的链接

:visited

已访问的链接

:hover

鼠标悬停状态

:active

激活的链接

:hover 用于访问的鼠标经过某个元素时；

:active 用于一个元素被激活时（即按下鼠标之后放开鼠标之前的状态）

伪类选择器的属性：link visited hover active

说明：

1) a:hover 必须置于 a:link和a:visited之后，才有效

2) a:active 必须置于 a:hover之后才有效

3) 伪类名称对大小写不敏感

8、CSS其它选择器

css继承特性，从父元素那继承部分css属性

选择器的优先级

ID选择优先级最高（id选择器定义具有唯一性）

class选择器次之（class选择器可以多个）

元素选择器再次之

其它选择器优先级主要根据定义的先后顺序，最后定义的优先级高

!important 加重选择器的优先级，添加在样式规则之后，中间用空格隔开。

CSS选择器命名规则

1：采用英文字母，数字以及"-" 和 "_" 命名

2：以小写字母开头，不能以数字和"-" 和 "_" 开头

3：使用有意义的命名规范

常用CSS命名

header

页头

main

主体

footer

页尾

nav

导航

sidebar

侧栏

container

容器

column

栏目

title

标签

menu

菜单

submenu

子菜单

*列举常用命名，大家根据自身项目及团队的规则命名

耐心学习基础知识，基础是盖房的根基，必须打结实。

如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉 上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！

二、CSS之——选择器

作用：通过元素选择器可以选择页面中的所有指定元素

语法：标签名{}

作用：通过元素的class属性值选中一组元素

语法：.class属性值{}

id选择器

作用：通过元素的id属性值选中唯一的一个元素

语法：#id属性值{}

复合选择器（交集选择器）

作用：可以选中同时满足多个选择器的元素

语法：选择器1选择器2选择器N{}

选择器分组（并集选择器）

作用：通过选择器分组可以同时选中多个选择器对应的元素

语法：选择器1,选择器2,选择器N{}

通配选择器

作用：可以用来选中页面中的所有的元素

语法：*{}

元素之间的关系：

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

作用：选中指定元素的指定后代元素

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

有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。

给链接定义样式：

有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4中不同的方式。

其他：

否定伪类

否定伪类可以帮助我们选择不是其他东西的某种东西。

语法： :not(选择器){}

比如p:not(.hello)标识选择所有的p元素，但是class为hello的除外。

属性选择器可以挑选带有特殊属性的标签。

语法：

[属性名]

[属性名 = "属性值"]

[属性名 ~= "属性值"]

[属性名 ^= "属性值"]

[属性名 |= "属性值"]

[属性名 $= "属性值"]

[属性名 *= "属性值"]

作用：选中指定父元素的指定子元素

语法：父元素 子元素

比如body h1将选择body字标签中的所有h1标签

IE6及以下的浏览器不支持子元素选择器

其他子元素选择器

除了根据祖先父子关系，还可以根据兄弟关系查找元素。

语法：

兄弟元素 + 兄弟元素 ：查找后边一个兄弟元素

兄弟元素 ~ 兄弟元素：查找后边所有的兄弟元素

在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。

比如：

这两个选择器都会选择h1元素，如果两个选择器设置的样式不一样那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用哪个样式呢？CSS中会默认使用权重较大的样式，下面看一下权重又是如何计算的。

不同的选择器有不同的权重值：

CSS3选择器入门

元素选择器 作用：根据标签名来选中指定的元素 语法：标签名{} 例子：p{} h1{} p{}

作用：根据元素的id属性值选中一个元素 语法：#id属性值{} 例子：#box{} #red{}

类选择器 作用：根据元素的class属性值选中一组元素 语法：.class属性值

作用：选中页面中的所有元素 语法: *

作用：选中同时复合多个条件的元素 语法：选择器1选择器2选择器3选择器n{} 注意点： 交集选择器中如果有元素选择器，必须使用元素选择器开头

选择器分组（并集选择器） 作用：同时选择多个选择器对应的元素 语法：选择器1,选择器2,选择器3,选择器n{}

作用：选中指定父元素的指定子元素 语法：父元素 子元素

作用：选中指定元素内的指定后代元素 语法：祖先 后代

选择下一个兄弟 语法：前一个 + 下一个

选择下边所有的兄弟 语法：兄 ~ 弟

[属性名] 选择含有指定属性的元素[属性名=属性值] 选择含有指定属性和属性值的元素[属性名^=属性值] 选择属性值以指定值开头的元素[属性名$=属性值] 选择属性值以指定值结尾的元素[属性名*=属性值] 选择属性值中含有某值的元素的元素

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

伪元素使用 :: 开头

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

::first-line 表示第一行

::selection 表示选中的内容

::before 元素的开始

::after 元素的最后

before 和 after 必须结合content属性来使用

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上

继承是发生在祖先后后代之间的

继承的设计是为了方便我们的开发， 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上， 这样只需设置一次即可让所有的元素都具有该样式

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

选择器的权重

内联样式 1,0,0,0

id选择器 0,1,0,0

类和伪类选择器 0,0,1,0

元素选择器 0,0,0,1

通配选择器 0,0,0,0

继承的样式 没有优先级

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，

注意：在开发中这个玩意一定要慎用！

Web前端开发知识点之CSS的使用方式

今天小编要跟大家分享的文章是关于Web前端开发知识点之CSS的使用方式。本文章小编从与HTML的结合方式、CSS语法、选择器以及盒子模型四个方面进行讲解。下面来和小编一起看一看吧！

一、与HTML的结合方式

CSS与HTML的结合方式一共有三种，分别是：外部样式、内部样式和内联样式。

①外部样式

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在文档的头部：

_

或者可以像下面这样在标签import一个样式表，不过不建议使用。





___


@import"main.css";_

②内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用标签在文档头部定义内部样式表，就像这样:


_


___


_r_color:_ienna;}_

③内联样式

要使用内联样式，你需要在相关的标签内使用样式(style)属性。

_

Thisisaparagraph

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

二、CSS语法

CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是您需要改变样式的HTML元素。

每条声明由一个属性和一个值组成。两条声明之间被分号分开。

属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。

在下面这个例子中，h1是选择器，color和font-size是属性，red和14px是值。

三、选择器

CSS的选择器主要分为两大类，一类基本选择器；一类扩展选择器。

①基本选择器

基本选择器包括id选择器，元素选择器和类选择器。

id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。例如下面代码指定id为red的标签中文本为红色。

#red{color:red;}

元素选择器可以为相应的HTML元素指定特定的样式。元素选择器前面没有任何字符。例如下面代码指定div标签中文本为红色。

div{color:red;}

类选择器可以为标有特定class的HTML元素指定特定的样式。类选择器以一个点号显示。例如下面代码指定class为center的标签中文本居中对齐。

.center{text-align:center}

②扩展选择器

扩展选择器是在基本选择器的基础上扩展出来的，下面介绍几种常见的。

*选择器(*

{})可以为HTML的所有元素指定特定的样式。例如下面代码指定HTML页面中所有文本为红色。

*{color:red;}

并集选择器(选择器1,选择器2{})可以为多个选择器指定特定的样式。例如下面代码指定div和span两种标签中文本为红色。

div,span{color:red;}

子选择器(选择器1选择器2{})可以为选择器1中的选择器2指定特定的样式。例如下面代码指定div中span标签文本为红色。

divspan{color:red;}

父选择器(选择器1选择器2{})可以为含有选择器2的选择器1指定特定的样式。例如下面代码指定含有span的div标签文本为红色。

divspan{color:red;}

属性选择器(元素[属性="属性值"])可以为含有该属性且属性值等于该值的元素指定特定的样式。其中，元素和属性值可以省略。例如下面代码指定align属性等于center的div标签文本为红色。

div[align="center"]{color:red;}

伪类选择器(元素:状态{})可以为该元素处于该状态时指定特定的样式。例如下面的代码指定鼠标悬浮在超链接上时文本为红色。

a:hover{color:red;}

四、盒子模型

所有HTML元素可以看作盒子，在CSS中，"box

model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型：

Margin(外边距)-清除边框外的区域，外边距是透明的。

Border(边框)-围绕在内边距和内容外的边框。

Padding(内边距)-清除内容周围的区域，内边距是透明的。

Content(内容)-盒子的内容，显示文本和图像。

默认情况下，标签的width和height属性指的是content(内容)的宽和高，我们在设置边框和边距的时候一定要注意。如果想要让width和height是最终盒子的大小，可以设置下面的代码：

box-sizing:border-box;

以上就是小编今天为大家分享的关于Web前端开发知识点之CSS的使用方式的文章，希望本篇文章能够对正在从事web前端工作和学习的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，城市一名优秀的web前端程序员。

文章来源：原创_绲墓适_