CSS的几种选择器

最新推荐文章于 2023-02-22 23:36:30 发布

hym2111

最新推荐文章于 2023-02-22 23:36:30 发布

阅读量451

点赞数

分类专栏： java web

本文链接：https://blog.csdn.net/hym2111/article/details/50467446

版权

java web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS指层叠样式表，它用来定义如何显示html元素。css是能够真正做到网页表现和内容分离的一种样式设计语言。

css基础语法：

CSS由两部分构成：选择器{一条或多条声明}

选择器通常为你要改变样式的html元素

声明有一个属性和一个值组成

CSS的四种选择器：

1、派生选择器（上下文选择器）

派生选择的语法：上一级元素B 元素A{声明}; 只有元素A的上一级元素是B，选择器才会起作用，负责不会起作用

例子：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>派生选择器</title>
<style>  
li h1{ color:#FF0000}  
</style>
</head>
<body>
<ul>
  <li>
    <h1>第一列</h1>
  </li>
  <li>
    <h1>第二列</h1>
  </li>
  <li>第三列</li>
</ul>
</body>
</html>

2、id选择器

（1）id选择的语法： #id {声明} ；id就是html元素指定的id的名字，每个html文档中同一个id属性只能出现一次

（2）id选择器常常用于创建派生选择器：

#id 元素A{声明}；

作用：这样子同一个id下的所有元素A都能应用该属性

限制条件：id只能是<div>或者<table>或者其它块级元素

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>id选择器</title>
<style>
#title1 { color:#FF0000}
#liebiao li{color:#00FF00}
</style>
</head>
<body>
<h1 id="title1">我是红色标题</h1>
<ul id="liebiao">
  列表的每一列的颜色都是绿色的
  <li>第一列</li>
  <li>第二列</li>
  <li>第三列</li>
</ul>
</body>
</html>

3、类选择器

（1）语法：.classname{声明}

（2）类选择用作派生选择器：

.classname 元素A{声明}

作用：这样子应用这个类下的所有元素A都能应用该选择器中的属性

限制条件：class<div>或者<table>或者其它块级元素

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类选择器</title>
<style>
.textbg { color:#FF0000}
.liebiao li{ color:#00ff00}
</style>
</head>
<body>
<h1 class="textbg">我是红色标题</h1>
<div class="liebiao">
  <ul>
    列表的每一列的颜色都是绿色的
    <li>第一列</li>
    <li>第二列</li>
    <li>第三列</li>
  </ul>
</div>
</body>
</html>

4、属性选择器

（1）所有有这个属性的元素都有效

[title]{color:#ff0000}

（2）属性等于值选择器

（3）属性等于值--多个值（包含指定值）

[title~=hello] { color:red; } 适用于由空格分隔的

如：title=“hello world”

[lang|=en] { color:red; }适用于由连字符合分隔的

如： lang=“en” lang=“en-us”

（4）设置表单样式

设置某种类型的表单的属性

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

hym2111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的几种选择器

CSS指层叠样式表，它用来定义如何显示html元素。css是能够真正做到网页表现和内容分离的一种样式设计语言。css基础语法：CSS由两部分构成：选择器{一条或多条声明}选择器通常为你要改变样式的html元素声明有一个属性和一个值组成CSS的四种选择器：1、派生选择器（上下文选择器）派生选择的语法：上一级元素B 元素A{声明}; 只有元素A的
复制链接

扫一扫