CSS選擇器

最新推荐文章于 2024-04-07 14:36:52 发布

live for myself

最新推荐文章于 2024-04-07 14:36:52 发布

阅读量249

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/crystal4000/article/details/108035261

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）
相邻选择器，是根据左侧选择符指定相邻元素，然后在该相邻元素后面寻找匹配匹配右侧选择符的相信元素
如下例子

<style type="text/css">
/*选择中id为wrap最下的p标签使用相信选择器*/
#sub_wrap + p{
    font-size:22px;
    color:red;
    }
</style>

<body>
<div id="wrap">
<div id="sub_wrap">
<h2 class="news">标题2</h2>
<p class="news">标题2下的段落</p>
<span class="news">标题2下的span</span>
</div>
<p>相邻段落</p>
</div>
</body>

在这里插入图片描述

5.子选择器（ul > li）
子选择器中前后部分之间用一个大于号隔开，前后两部分选择符在结构上属于父子关系。

子选择器是根据左侧选择符指定的父元素，然后在该父元素下寻找匹配右侧选择符的子元素。

<body>
<div>
  <p>这是个段落
   <a href="#">这是超连接</a> 
  </p>
</div>
</body>

/*设置div下的p元素的样式*/
div>p{
    font-size:14px;
    color:#0000FF;
    }
/*设置p元素下的a元素的样式*/
p>a{
    font-size:16px;
    color:#FF0000;
    text-decoration:none;
}
/*错误的写法 div 与a不是父子关系时，是取不到的*/
div>a{
    font-size:20px;
    color:#FF0000;
    text-decoration:none;
}

6.后代选择器（li a）
后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
希望只对 h1 元素中的 em 元素应用样式

h1 em {color:red;}

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

在这里插入图片描述

7.通配符选择器（ * ）
下面的规则可以使文档中的每个元素都为红色

* {color:red;}

等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。

8.属性选择器（a[rel = “external”]）

带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

title=“W3School” 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

<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>

在这里插入图片描述

带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

<style type="text/css">
[lang|=en]
{
color:red;
}
</style>

<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>

在这里插入图片描述
设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

<style>
input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}
</style>

<body>

<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">

</form>
</body>

在这里插入图片描述

9.伪类选择器（a: hover, li:nth-child）
同一个标签，根据其不同的状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后
PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
PS：以上三种样式，只能用于超链接。

a{}和a:link{}的区别：

a{}定义的样式针对所有的超链接(包括锚点)
a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)

.nav ul li a{
	display: block;
	width: 120px;
	height: 50px;
}
/*两个伪类的属性，可以用逗号隔开*/
.nav ul li a:link , .nav ul li a:visited{
	text-decoration: none;
	background-color: purple;
	color:white;
}
.nav ul li a:hover{
	background-color: orange;
}

live for myself

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS選擇器

1.id选择器（ # myid）2.类选择器（.myclassname）3.标签选择器（div, h1, p）4.相邻选择器（h1 + p）相邻选择器，是根据左侧选择符指定相邻元素，然后在该相邻元素后面寻找匹配匹配右侧选择符的相信元素如下例子<style type="text/css">/*选择中id为wrap最下的p标签使用相信选择器*/#sub_wrap + p{ font-size:22px; color:red; }</style>
复制链接

扫一扫