<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
.p1{color: blue}
.p2{font-size: 30px;}
.p3{font-size: 40px;}
/*多类选择器*/
.p1.p2{
background-color: red;
}
#divid{
}
/*后代选择器*/
p strong{
font-family: fantasy;;
}
h1>strong{
font-size: 50px;;
}
/*相邻兄弟元素器,必须有相同的父元素*/
li+li{
color: blue;
font-size: 20px;;
}
</style>
<title></title>
</head>
<body>
<!--
元素选择器,最基本的选择器 如 h1{...} p{..}
选择器分组
如: h1,h2{} 同时应用于h1,h2
通配符 *{margin:0;padding:0;} 所有标签将使用该样式
类选择器详解
a.class{}
多类选择器:
id选择器详解
id选择器是先找到结构后找到内容;后渲染
而类选择器先渲染,再找结构再找到内容
属性选择器详解:根据具体的属性值缩小范围
简单属性选择器:[title]{color:aqua;}
根据具体的属性值加载: a[href="http://www.baidu.com"]{
...
}
属性和属性值完全匹配:
[title="t"]{
...
}
根据部分属性值选择
[title~="mytitle"] { //模糊匹配,只要具有title 中包含mytitle都会起作用
}
后代选择器
p strong{
font-family: fantasy;;
}
子元素选择器
h1>strong{
}
相邻兄弟选择器:可以选择紧接在另一个元素后的元素,且二者有相同的父元素
h1+p{
..
}
-->
<p class="p1">this is my web page</p>
<p class="p2">this is my web page</p>
<!--多类选择器-->
<p class="p1 p2">this is my web page</p>
<!--id选择器-->
<div id="divid">
this is div test node
</div>
<a href="http://www.baidu.com">baidu.com</a>
<a href="http://www.yuku.com" title="mytitle aa">yudu.com</a>
<p>hello this a 后代选择器<strong>aaaaa</strong> </p>
<h1>hello <strong>strong</strong></h1>
<!--相邻兄弟选择器-->
<ul>
<li>ab</li>
<li>ab</li>
<li>ab</li>
<li>ab</li>
</ul>
</body>
</html>
html css学习笔记-详解各种选择器
最新推荐文章于 2024-05-04 03:10:09 发布