html空格是什么选择符,css选择符有哪些？css选择符的全面总结（附代码）

css选择符有哪些？css基本的选择符包括通配选择符、类型选择符、属性选择符、ID选择符、类选择符、包含选择符和子对象选择符，还有一个特别的是选择符混用，接下来我们就分别的来看一看这几种选择符。

一.通配选择符(Universal Selector):

语法：*

说明：1.*表示通配符,表示所有的

2.格式:*{样式列表}

3.用于整个页面或网站字体、边距、背景等

例子：除了规定p标签内包含的元素使用p大括号内指定的样式，其它的都使用*大括号内指定的样式。

通配选择符

*

{/**定义网页中所有元素字体、边距样式*/

margin:0px;

font-size:28px;

font-family: "华文彩云";

}

div *

{/**定义div中所有元素字体、边距样式*/

margin:10px;

color:#FF0000;

}

普通文本

段落文本

span内联文本

div文本

div子div元素中的文本

div中段落文本

div中span内联文本

输出如下：

二. 类型选择符(Type Selectors)：

语法：E1

说明：1.类型选择符用于设定特定HTML元素样式

2.元素名称不区分大小写

3.格式:HTML元素名{样式列表}

例子：p指定了大括号内的样式，那么下面标签类型为p的都是用它的样式；同理下面的p也是。

类型选择符

p

{

font-size:1cm;

font-style:oblique;

}

div

{

color:#FFFF00;

font-family:"方正黄草简体";

font-size:1in;

}

类型选择符

类型选择符

输出如下：

三.属性选择符(Attribute Selectors)：

语法：1.E1[attr]

2.E1[attr=value]

3.E1[attr~=value]

4.E1[attr|=value]

说明：用于定义特定属性值的HTML元素样式.

例子：我们看到下面的例子里面第一个属性为type的，那么下面属性为type的就使用它指定的样式，同理button，有的人就问了，在button的前面不是也有type类型的吗，在这种情况下，取后面的标签样式，等同于覆盖了同括号内前面的type，后来者居上。

属性选择符

input[type]

{

border:2px solid #E81D2B;

}

input[name='button']

{

border:1px solid #868686;

height:25px;

width:60px;

}

用户名:

密码:

确认密码:

电子邮箱:

输出如下：

四.包含选择符(Descendant Selectors)：

语法：E1 E2

说明：1.用于子元素对父元素样式的扩展

2. 格式:父选择符子选择符{样式列表}

3.注意HTML元素包含关系

例子：包含选择符简单，如下面的span是包含在p内的，但是span里面的元素选择的就是p p span 指定的样式，p里面的元素选择的就是p p 指定的元素，这就是就近原则：

包含选择符

div p

{

font-size:32px ;

font-weight:lighter;

}

div p span

{

color:#FF0000 ;

text-shadow: 20px 10px 2px #E81D2B;

}

包含选择符

包含选择符

包含选择符

输出如下：

五.子对象选择符(Child Selectors)：

语法：E1>E2

说明：1.用于子对象元素对父对象元素样式扩展

2. 格式:父对象选择符>子对象HTML元素名称{样式列表}

3.注意和包含选择符的区别

4.使用情况较少,通常可以用包含选择符取代

例子：子对象选择符其实和原本标签使用顺序没有什么变化，如

• ,,,

. li里面定义的是什么样式，那么下面的里面的内容就是什么的样式.子对象选择符

/**

常用子对象选择符

table>tbody>tr>td

ul>li

ol>li

div>子div

dl>dt

dl>dd

form>input

*/

ul > li

{

font-size:18px;

color:#4F87C2;

}

table>td

{

font-style:italic;

font-weight:bolder;

}

dl>dd

{

font-weight:bolder;

}

div >div{

font-weight:bolder;

}

form> input

{

border:2px solid #4F87C2;

}

水果列表

• 香蕉
• 苹果
• 桃子

单元格一

单元格一

三大球类运动

足球

全世界第一大球类运动

篮球

全世界第二大球类运动

排球

全世界第三大球类运动

第一层div

第二层div