基础html交代选择器,css基础-选择器

CSS : Cascading Style Sheets

1、添加CSS方式

(1)、内联

通过元素的style属性直接加在元素上

例如：

CSS基础

(2)、页面

在页面中通过style标签添加样式

例如：

p{

color:red;font-weight:bold;font-size:30px;

}

(3)、外部文件

放在一个独立的文件中(如：all.css)，通过link导入

例如：

说明：

优先级：(1)内联 --> (2)页面 --> (3)外部文件；

如果同一级，代码后面的样式覆盖前面的样式

2、CSS选择器

(1)元素选择器

根据HTML元素的名称应用样式,例如：

|-- 样式

div{

color:red;

}

|-- html代码

这是DIV

(2)ID选择器(优先于类选择器)

根据HTML元素的ID应用样式

|-- 样式

#div1{

color:red;

}

|-- html代码

CSS基础2

(3)类选择器

|-- 样式

.content{

color:red;

}

|-- html代码

CSS基础2

(4)层级(或叫后代)选择器

|-- 样式

div span{

color:red;

}

|-- html代码

span1

(5)分组选择器

通过逗号分隔，同时对多个元素应用样式

|-- 样式

#span1,#p1{

color:red;

}

|-- html代码

span1

span1

P1

(6)子元素选择器(直系子元素)

|-- 样式

div > span{

color:red;

}

|-- html代码

子元素1

子元素2

非直系子元素

(7)兄弟元素选择器(紧跟后面的兄弟元素)

|-- 样式

div + span{

color:red;

}

|-- html代码(只有span3会应用样式)

span1

span2

span3

span4

(8)属性选择器,例如：

A、等值匹配:

例子：查找name的值等于books的ul元素

ul[name="books"]{

color:red;

}

B、前匹配:^=

例子：查找所有id以love开头的元素

ul li[id^="love"]{

color:red;

}

C、后匹配:$=

例子：查找所有id以love结尾的元素

ul li[id$="love"]{

color:red;

}

D、模糊匹配:*=

例子：查找所有id包含love的元素

ul li[id*="love"]{

color:red;

}

标签：color,元素,基础,样式,html,red,选择器,css

来源： https://www.cnblogs.com/mgblog/p/12401903.html