css 高级选择器

最新推荐文章于 2024-03-06 17:08:15 发布

ximengyun

最新推荐文章于 2024-03-06 17:08:15 发布

阅读量718

点赞数

分类专栏： HTML/CSS 文章标签： CSS 高级选择器选择器

本文链接：https://blog.csdn.net/cookfront/article/details/8884156

版权

HTML/CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.直接子选择器：

使用类似 body > .intro

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Sub-Pixel</title>
<style type="text/css">
.intro { font-style:italic;}
body > .intro { font-weight:bold;}
</style>
</head>

<body>
      <h1>Recipes for Cheese</h1>
      
      <p class="intro">Cheese is a remarkably versatile food,available in literally hundreds of varieties with different flavors and textures</p>
      
      <div class="content">
      	<h2>Submit a recipe</h2>
        <p class="intro">Cheese is a remarkably versatile food,available in literally hundreds of varieties with different flavors and texture</p>
      </div>
</body>
</html>

两个类为intro都变成斜体，但第一个段落也变为了粗体，因为第一个段落是body元素的子元素

2.相邻选择器：

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Sub-Pixel</title>
<style type="text/css">
.intro { font-style:italic;}
h1 + .intro { font-weight:bold;}
</style>
</head>

<body>
      <h1>Recipes for Cheese</h1>
      
      <p class="intro">Cheese is a remarkably versatile food,available in literally hundreds of varieties with different flavors and textures</p>
      
      <div class="content">
      	<h2>Submit a recipe</h2>
        <p class="intro">Cheese is a remarkably versatile food,available in literally hundreds of varieties with different flavors and texture</p>
      </div>
</body>
</html>

使用相邻选择器h1 + .intro 和font-weight:bold声明使紧跟在h1元素后的类名为intro的元素变为粗体

3.属性选择器：

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Sub-Pixel</title>
<style type="text/css">
input { background-color:#CC5;}
input[name] { border:2px dashed #000;}
</style>
</head>

<body>
      <h1>Recipes for Cheese</h1>
      
      <p class="intro">Cheese is a remarkably versatile food,available in literally hundreds of varieties with different flavors and textures</p>
      
      <div class="content">
      	
        <h2>Submit a recipe</h2>
        
        <p class="intro">Cheese is a remarkably versatile food,available in literally hundreds of varieties with different flavors and textures</p>
        
        <form action="" method="post">
        	<p>
            	<label for="submit-name">Name</label>
                <input type="text" name="name" id="submit-name" />
            </p>
            <p>
            	<label for="submit-email">Email</label>
                <input type="text" name="name" id="submit-email" />
            </p>
            <p>
            	<label for="submit-ingredients">Ingredients</label>
                <textarea name="ingredients" id="submit-ingredients" rows="5" cols="50"></textarea>
            </p>
            <p>
            	<input type="submit" value="Submit" />
            </p>
        </form>
      </div>
</body>
</html>

通过组合的类型和属性选择器input[name]，只为具有name属性的input元素添加虚线边框

也可以使用

input[name="email"] { border:2px dashed #000;}

有6个不同类型的属性选择器：

[att=value]
该属性有指定的确切的值。
[att~=value]
该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。
[att|=value]
属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)
[att^=value]
该属性的值以指定值开始。
[att$=value]
该属性的值包含指定的值(而无论其位置)。
[att*=value]
该属性的值以指定的值结束

ximengyun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 高级选择器

1.直接子选择器：使用类似 body > .introSub-Pixel.intro { font-style:italic;}body > .intro { font-weight:bold;} Recipes for Cheese Cheese is a remarkably versatile food,available
复制链接

扫一扫

专栏目录