前端代码入门——选择器与优先级优就业

来源：互联网发布：淘宝网店的运营流程图编辑：程序博客网时间：2024/06/05 04:34

IT优就业 2017-03-30 14:47

1、选择器优先级：

行间选择器>ID选择器>类选择器>标签选择器

前端代码入门——选择器与优先级优就业

web前端：http://www.ujiuye.com/

2、选择器书写规范：

行间选择器：

<div style="width: 100px; height: 100px; background: yellow;"></div>

ID选择器：

<style>

#div1{

width: 100px;

height: 100px;

background-color: red;

}

</style>

一般写在style标签中，以#+ID名称{}的格式进行书写，ID是当前页面唯一的。

类选择器：

<style>

.div1{

width: 100px;

height: 100px;

}

.bgc{

background-color: pink;

}

</style>

类选择器可以是多个class加在同一个元素上以.+class名称{}的格式进行书写。

标签选择器：

<!DOCTYPE html>

<html>

<head>

<style>

div{

width: 100px;

height: 100px;

background-color: gray;

}

</style>

</head>

<body>

</body>

</html>

适用于当前页面上所有标签为XXX的元素。以标签名{}的格式进行书写。

群组选择器：

<!DOCTYPE html>

<html>

<head>

<style>

div, p, h1{

width: 100px;

height: 100px;

background-color: gray;

}

</style>

</head>

<body>

</body>

</html>

用逗号分隔，被逗号分隔的元素（选择器）全部执行统一的代码片段。

包含选择器：

<!DOCTYPE html>

<html>

<head>

<style>

.div1 div{

width: 100px;

height: 100px;

background-color: pink;

}

</style>

</head>

<body>

<p>这是一个p标签</p>

</div>

</body>

</html>

目标父级元素+空格+目标元素空格空格代表=下一级(语法)

通配符：

<!DOCTYPE html>

<html>

<head>

<style>

body *{

height: 50px;

margin: 10px;

border: 1px solid red;

}

</style>

</head>

<body>

<div>

div

</div>

</body>

</html>

* 通配符找到页面上符合规则的所有元素。一般不建议使用。

更多Web前端知识尽在优就业IT培训：http://www.ujiuye.com/

0 0

前端代码入门——选择器与优先级 优就业

前端代码入门——选择器与优先级优就业