基础选择器
标签选择器
定义:
标签选择器(元素选择器)是指用html标签名称作为选择器,按标签名称分类。
语法:
标签名{
属性1:属性值1;
属性2:属性值2;
....
}
<style>
p {
color: blue;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>123</p>
<div>abc</div>
</body>
类选择器
定义:
差异化选择不同标签,单独选一个或者几个标签。
语法:
.类名{
属性1:属性值1
属性2:属性值
....
}
可多类名使用,例如:<div class="pink font20">123</div>
<style>
.one {
color: antiquewhite;
}
.two {
color: black;
}
.first {
font-size: 80px;
}
</style>
</head>
<body>
<div class="one first">123</div>
<div class="two">abc</div>
</body>
id选择器
定义:
id选择器可以为标有特定id的html元素指定特定的样式。
语法:
#id名{
属性1:属性值1
属性2:属性值
....
}
<style>
#one {
color: pink;
}
</style>
</head>
<body>
<div id="one">123</div>
</body>
id属性只能在每个html文档中出现一次。
样式#定义,结构id调用,只能调用一次,别人切勿使用。
通配符选择器
定义:
在css中,通配符选择器使用“*”定义,表示选取页面中所有元素(标签)。
语法:
*{
属性1:属性值1
属性2:属性值
....
}
* {
padding: 0;
margin: 0;
}
符合选择器
后代选择器
定义:
后代选择器(包含选择器),选择父元素里的子元素。
把外层标签写在前面,内层标签写在后面,中间用空格分隔。
当标签发生嵌套时,内层标签就成为外层标签的后代。
语法:
元素1 元素2{样式声明}
选择元素1中的所有元素2(后代元素,子元素的子元素也可以)
元素1和元素2可以是任意基础选择器。
<style>
ol li {
color: aquamarine;
}
</style>
</head>
<body>
<ol>
<li>1
<a href="">a</a>
</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
子选择器
定义:
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。
语法:
元素1>元素2{样式声明}
表示选择元素1里面的所有直接后代(子元素)元素2。
<style>
.one>a {
color: aquamarine;
}
</style>
</head>
<body>
<div class="one">
<a href="">变</a>
<p>
<a href="">不变</a>
</p>
</div>
</body>
并集选择器
定义:
并集选择器可以选择多组标签,同时为它们定义相同的样式。通常用于集体声明。
任何形式的选择器都可以作为并集选择器的一部分。
语法:
元素1,元素2{样式声明}
表示选择元素1和元素2。
<style>
.one,
a {
color: aquamarine;
}
</style>
</head>
<body>
<div class="one">
变
</div>
<a href="">变</a>
<p>不变</p>
</body>
伪类选择器
定义:
伪类选择器用于向某些选择器添加特殊效果。
用冒号表示。
链接伪类选择器
语法:
选择所有未被访问的链接 a: link
选择所有已被访问的链接 a:visited
选择鼠标指针位于其上的链接 a:hover
选择活动链接(鼠标按下未弹起的链接 )a:active
按照LVHA的顺序声明(:link-:visited-:hover-:active)
<style>
a {
color: gray;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="">变</a>
</body>
:focus伪类选择器
定义:
用于选取获得焦点(光标)的表单元素。
一般情况<input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
语法:
input:focus{
属性1:属性值1
属性2:属性值
....
}