CSS基本选择器解析-优快云博客

本文链接：https://blog.youkuaiyun.com/haoranli/article/details/72829186

CSS基本选择器：

1. 标签选择器

直接写在标签内
如：文字内容

2.ID选择器

以“#”开头，
命名方法：建议全小写，以字母开头
使用方法：

3.类

语法：
定义的方法：用“.”开头,后跟类名。
类名书写规范，以小写字母开始。
使用方法：
内容

4.通配符选择器

*{CSS规则}
意思：针对当前页面所用的标签应用同样的样式（对标签的初始化）
如：*{margin:0;padding:0;border:0;}
建议对标签初始化时采用下面的方法
body,p,ul,li,p,ol,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;border:0;}

5.标签和类结合
如：p.test{color:red}
针对p标签应用类名为test1的样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>基本选择器</title>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <meta name="author" content="" />
   <meta name="keywords" content="" />
   <meta name="description" content="" />

   <style type="text/css">
     p{font-size: 22px;color:green;}            /**标签选择器*/
     #test{font-size: 35px;color: red;}         /**ID选择器*/
     .testClass{font-size: 40px;color: orange}  /**类选择器*/
     *{margin:0;padding:0;border:0;}            /**通配符选择器*/
     p.test1{color:blue}                          /**标签和类相结合**/
   </style>
</head>
<body >
  <p>
    1人间帝王轩辕郎、无所不知所不能东方彧卿（其实他就是超脱六界之外的异朽君）、妖魔两界圣君杀阡陌那时都是爱花千骨的，都希望白子画能够善待花千骨。
  </p>
    <p id="test">
    2人间帝王轩辕郎、无所不知所不能东方彧卿（其实他就是超脱六界之外的异朽君）、妖魔两界圣君杀阡陌那时都是爱花千骨的，都希望白子画能够善待花千骨。
  </p>
    <p class="testClass">
    3人间帝王轩辕郎、无所不知所不能东方彧卿（其实他就是超脱六界之外的异朽君）、妖魔两界圣君杀阡陌那时都是爱花千骨的，都希望白子画能够善待花千骨。
  </p>
  
  <p class="test1">
    4人间帝王轩辕郎、无所不知所不能东方彧卿（其实他就是超脱六界之外的异朽君）、妖魔两界圣君杀阡陌那时都是爱花千骨的，都希望白子画能够善待花千骨。
  </p>
</body>
</html>

CSS 基本选择器