WebGIS:CSS级联样表—选择器

最新推荐文章于 2023-04-23 13:58:44 发布

YHxiaohao

最新推荐文章于 2023-04-23 13:58:44 发布

阅读量351

点赞数

分类专栏： WebGIS 文章标签： WebGIS css

本文链接：https://blog.csdn.net/YHxiaohao/article/details/80719486

版权

WebGIS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、标签选择器（TYPE Selectors）

对象{属性名：属性值；}（p{color:type;}）

<html>
<style type="text/css">
p{color:green;}
</style>
<body>
<p>he is a boy.</p>
</body>
</html>

2、ID选择器（ID Selectors）

#ID名{属性名：属性值；}（#intro{color:red;}）

<html>
<style type="text/css">
#intro{color:green;}
</style>
<body>
<p id="intro">he is a boy.</p>
</body>
</html>

3、类选择器（Class Selectors）

.类名{属性名：属性值；}（.intro{color:green;}）

<html>
<style type="text/css">
.intro{color:green;}
</style>
<body>
<p class="intro">he is a boy.</p>
</body>
</html>

4、子选择器（Child Selectors）

对象1>对象2{属性名：属性值；} (h1>strong{color:green;})

<html>
<style type="text/css">
h1>strong{color:red;}
</style>
<body>
<h1><strong>he is a boy.</strong></h1>
</body>
</html>

5、相邻选择器（Adjacent Sibling Selectors）

前一个选择符名+后一个选择符名{属性名：属性值；}（h1+p{margin-top:50px}）

<html>
<style type="text/css">
h1+p{margin-top:50px;}
</style>
<body>
<h1><strong>he is a boy.</strong></h1>
<p>he is a girl.</p>
<p>he is a boy.></p>
<p>he is a boy.</p>
</body>
</html>

6、属性选择器（Attribute Selectors）

[attribute]为带有这个属性的所有元素设置样式

[title]{ color:red; }

[attribute=value]为属性等于value的设置样式

<style>
[title=School]
  {
    border:5px solid blue;
  }
</style>
<body>
<p title="school">he is a boy.</p>
</body>

[attribute~=value]为包含指定值的属性设置样式，适用于空格间隔

<style type="text/css">
  [title~=hello]
    {
      color:red;
    } 
</style>
<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />
<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>

[attribute|=value]以指定值开头的元素设置样式，适用于连字符

<style type="text/css">
  [lang|=en]
    {
      color:red;
    } 
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h1>无法应用样式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>

[attribute^=value]以指定值开头的元素设置样式

[attribute$=value]以指定值结尾的元素设置样式

<html>
<head>
<style> 
  div[class$="test"]
    {
      background:#ffff00;
    }
</style>
</head>
<body>
<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>
</body>
</html>

[attribute*=value]以包含指定值的元素设置样式

7、包含选择器（Descendant Selectors）

</style>
<div class="demo"> 
<div id=“a”>0 
<div id=“b” >1</div> 
<div id=“c” >2</div>
<div id=“d” >3</div>
</div></div>

8、分组选择器（Grouping）

.class1{    color:red;    }
.class2{    color:blue;   }
    /*共同样式*/
.class1,class2{    font-size:13px;
    text-decoration:underline;    }

9、通用选择器（Universal Selectors）

<!DOCTYPE HTML>
<html> 
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>* 选择符</title>
<style type="text/css">
* {color:red; font-size:30px;}
</style>
</head>
<body>
<h1>勇气</h1>
 <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>
</body>
</html>

YHxiaohao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGIS:CSS级联样表—选择器

1、标签选择器（TYPE Selectors）对象{属性名：属性值；}（p{color:type;}）&lt;html&gt;&lt;style type="text/css"&gt;p{color:green;}&lt;/style&gt;&lt;body&gt;&lt;p&gt;he is a boy.&lt;/p&gt;&lt;/body&gt;&l
复制链接

扫一扫