html选择器

红太狼 2022-06-15 03:08 266阅读 0赞

**标签选择器**：直接使用html标签当作css选择器的，就是标签选择器。所有该标签都被选择器选中。  
例如：  
p\{color: red;\}  
  
  
**类选择器**：使用标签的class属性值当作选择器，就是类选择器。所有属于该类名的标签都被选中。  
（1）为标签定义class属性，使得标签有了类名。  
（2）类选择器的写法： .类名\{\}  
例如：  
<style type="text/css">  
p\{color: red;\}  
div\{  
color: pink;  
\}  
.s1\{  
color: purple;  
\}  
</style>   
  
  
</head>  
<body>  
<p style="">hello</p><p>world</p>  
<div>这是一个层</div>  
<span class="s1">这是span标签</span>  
<h1 class="s1">这是h1</h1>  
</body>  
说明：其中，h1标签和span标签都属于s1这个类，所以他们的样式相同。  
  
  
**ID选择器**   使用标签的id属性值当作选择器，就是id选择器。只有当前id值的元素被选中。  
（1）为标签定义id属性，一般标签的id属性是唯一的  
（2）id选择器的写法： \#id属性值\{\}  
例如：   
<style type="text/css">  
\#p1\{  
background-color: yellow;  
\}  
</style>   
  
  
</head>  
<body>  
<p id="p1">hello</p><p>world</p>  
</body>  
  
  
**标签选择器、类选择器、id选择器的优先级**  
  
id选择器的优先级>类选择器>标签选择器  
  
  
例如：  
<style type="text/css">  
p\{  
background-color: red;  
\}  
.blue\{  
background-color: blue;  
\}  
\#p1\{  
background-color: yellow;  
\}  
</style>   
  
  
</head>  
<body>  
<p class="blue" id="p1">hello</p><p>world</p>  
<div class="blue">hello world</div>

</body>

**群组选择器**：将多个具有相同样式的选择器构成一个组。组中的每个选择器可以是学过的任意一种选择器，如标签选择器、id选择器、类选择器，可以是它们中两个或更多个选择器的组合。各个选择器之间使用“,”分隔。

p,div\{

color: red;

</style>

</head>

<body>

<p>hello</p><p>world</p>

<div>hello world</div>

</body>

\#p1,div\{

color: red;

</style>

</head>

<body>

<p id="p1">hello</p><p>world</p>

<div>hello world</div>

</body>

、属性选择器，利用标签的某些属性作为选择器。

### **属性选择器分类** ###

l 标签名\[属性名\]：* 属于该标签，并且定义了中括号中指定的属性的页面元素，才被选中。只要该标签定义了这个属性就可以，和属性具体的值无关。*

p\[id\]\{

color: red;

</style>

</head>

<body>

<p id="p1">hello</p><p>world</p>

<div id="d1">hello world</div>

</body>

说明：p\[id\]  选择那些定义了id属性的p标签

l E\[attr\]\[attr\]：* *可以根据多个属性进行选择，只能选中那些同时包含所列属性的元素。 只需将属性选择器链接在一起即可。

p\[id\]\[class\]\{

color: red;

</style>

</head>

<body>

<p id="p1">hello</p><p id="p2" class="red">world</p>

<div id="d1">hello world</div>

</body>

说明：

p\[id\]\[class\] 同时定义了id和class属性的p标签

l 标签名\[属性名="属性值"\]：E\[attr\]只是选择了有对应的属性， 并没有明确指其对应的属性值"value"， 而E\[attr="value"\]：是指定了属性值“value”， 从而缩小了选择 围， 更能精确选择自己需要的元素。

“=”：此处要求属性名必须完全与属性值相等。

p\[id="p1"\]\{

color: red;

</style>

</head>

<body>

<p id="p1">hello</p><p id="p2" class="red">world</p>

<div id="d1">hello world</div>

</body>

p\[class="red"\]\{

color: red;

因此：id选择器和类选择器是一种特殊的属性选择器。

l E\[attr~="value"\]：与E\[attr="value"\]不同的是， 他们两者区别就是一个有“~”号， 一个没有“~”号， E\[attr="value"\]是属性值需要完全匹配才会被选中， 而E\[attr~="value"\]则是属性值中只要有一个值匹配就可选中。

“~=”：此处要求属性名与指定的部分属性值相等即可。

补充：一个标签可以同时属于多个类，如下面的p标签同时属于两个类，red类和c1类

<p id="p2" class="red c1">world</p>

如果每个类都有自己的样式，那么使用类选择器选中该标签的时候，所有的样式都生效

.red\{

color: red;

.c1\{

font-size: 30px;

例1：两个类都生效

.red\{

color: red;

.c1\{

font-size: 30px;

</style>

</head>

<body>

<p id="p1">hello</p><p id="p2" class="red c1">world</p>

<div id="d1">hello world</div>

</body>

例2：全等的比较。

p\[class="c1"\]\{

color: red;

</style>

</head>

<body>

<p id="p1">hello</p><p id="p2" class="red c1">world</p>

<div id="d1">hello world</div>

</body>

说明：没有元素被选中。

例3：不完全匹配的。

p\[class~="c1"\]\{

color: red;

</style>

</head>

<body>

<p id="p1">hello</p><p id="p2" class="red c1">world</p>

<div id="d1">hello world</div>

</body>

说明：第2个p标签可以被选中。

伪类选择器和伪元素选择器可以为文档中非具体存在的结构指定样式，或者为某些元素（包括文档本（1）伪类选择器  
身）的状态指定样式，它会根据某种条件而非文档结构应用样式。  
**伪类选择器**  
HTML标记伪类名\{属性名 ：属性值；属性名 ：属性值；......\}  
常用的伪类如下表所示：  
伪类名 描述  
:link 鼠标没放上之前，并且超链接从来没有被访问过的状态。  
:visited 访问过的超链接的状态  
:focus 用于元素成为焦点的时候，常用于表单元素  
:hover 用于鼠标在元素上，而尚未触发或点击它的时候，例如，鼠标指针可能停留在一个超链接上，         :hover 就会指示这个超链接  
:active 按住鼠标左键不松开的样式， 这个状态特殊短暂  
  
  
第1次鼠标点击超链接时，超链接所处的状态的变化顺序  
 1、:link  4、:visited  2、:hover  3、:active  
  
  
第2次及以后鼠标点击超链接时，超链接所处的状态的变化顺序  
3、:visited  1、:hover 2、:active  
  
  
伪类使用的几点说明：  
1. <a>标记上伪类的顺序应为LVHA（ :link :visited :hover :active）在CSS定义中， a:hover 必须被置于 a:link 和 a:visited 之后， 才是有效的。在 CSS 定义中， a:active 必须被置于 a:hover 之后， 才是有效的。  
2. 伪类的名称不区分大小写.  
3. :hover :active等伪元素不限于<a>标记，也可以应用在其他元素上  
4. IE6只允许 :hover伪类应用到<a> 标记上 ，只有IE8接受 :active状态。  
  
  
例如：  
<style type="text/css">  
a:link\{color:red;\}  
a:visited\{color: green;\}  
a:hover\{color: yellow;\}  
a:active\{color: blue;\}  
</style>   
</head>  
<body>  
<a href="http://www.google.com">goole</a>  
</body>  
  
  
例如：  
<style type="text/css">  
li\{  
border:2px red solid;  
\}  
li:hover\{  
border-color: black;  
\}  
</style>   
</head>  
<body>  
<ul>  
<li><img src="images/1.jpg" /></li>  
<li><img src="images/2.jpg" /></li>  
  
  
</ul>  
  
  
**伪元素选择器**  
常用的伪元素如下表所示：  
伪元素名 描述  
:first-letter 向文本的第一个字母添加特殊样式，与块级元素关联  
例如：  
<style type="text/css">  
p:first-letter\{  
font-size: 25px;  
font-weight: bold;  
color: red;  
\}  
</style>   
</head>  
<body>  
  <p>hello world</p>  
</body>  
例如：  
:first-line 向文本的首行添加特殊样式  
<style type="text/css">  
p:first-line\{  
font-size: 25px;  
font-weight: bold;  
color: red;  
\}  
</style>   
</head>  
<body>  
  <p>hello world<br>hello world</p>  
</body>  
例如：  
:before 在元素之前添加内容，默认地，这个伪元素是行内元素  
<style type="text/css">  
p:before\{  
content: "\#\#\#";  
color: red;  
font-size: 30px;  
\}  
</style>   
</head>  
<body>  
  <p>hello world<br>hello world</p>  
</body>  
  
  
例如：  
:after 在元素之后添加内容  
<style type="text/css">  
p:after\{  
content: "\#\#\#";  
color: red;  
font-size: 30px;  
\}  
</style>   
</head>  
<body>  
  <p>hello world<br>hello world</p>  
</body>  
  
  
例如：  
input:focus\{  
background-color: yellow;  
\}  
</style>   
</head>  
<body>  
<input type="button" value="保存">  
  
  
  
  
**交集选择器**  
交集选择器由两个选择器组成，其结果是选中二者各自元素范围的交集。  
两个选择器之间不能有空格，必须连续书写。  
例如：  
<style type="text/css">  
p.d\{color: red;\}  
</style>   
</head>  
<body>  
  <div class="d"><p>div中的段落</p></div>  
  <p class="d">不在div中的段落</p>  
</body>  
  
  
等价于：  
p\[class="d"\]\{color: red;\}  
  
  
归纳：  
选择器：  
标签选择器  类选择器 id选择器 群组选择器  派生选择器（后代选择器  子元素选择器 相邻兄弟选择器）  属性选择器（标签\[属性\]  标签\[属性\]\[属性\]\[属性\]  标签\[属性=属性值\] 标签\[属性~=属性值\]） 伪类选择器（:link  :visited :hover :active  :focus） 伪元素选择器（:first-letter  :first-line  :before  :after）  交集选择器（标签名.类名   标签名\#id）  
  
  
属性：