css选择器

来源：互联网发布：淘宝店铺名称怎么改编辑：程序博客网时间：2024/06/03 17:37

每一条css样式声明由选择器和样式两部分组成，“选择器”指明了{}中的“样式”的作用对象

标签选择器：通过html代码标签选择元素。
类选择器：作用于具有特定的class属性的标签。
ID选择器：作用于具有特定id属性的标签。

类选择器和ID选择器的区别
1.因为元素的id是唯一的，不能出现两个元素具有同一个id值。ID选择器只能使用一次。而class可以使用多次，同时作用于多个元素。
2.可以为一个元素指定多个类，如，但不能为一个元素指定多个id。

子选择器：选择指定标签元素的第一代子元素
包含（后代）选择器：选择指定标签元素下的后辈元素
子选择器仅选择直接后代（第一代后代），后代选择器作用于所有后代

通用选择器：匹配html中所有标签元素，表达方法为 * {color:red;}
分组选择器 ：为多个标签元素设置同一个样式，如 h1,span{color:red;}
相当于：h1{color:red;}span{color:red;}

<!DOCTYPE html><html><head><meta charset="utf-8">    <title>css选择器</title>    <style type="text/css">    /* id选择器*/        #test1{            width: 100px;            height: 50px;            border: 1px solid blue;        }    /*类选择器*/        .test2{            width: 100px;            height: 50px;            border: 1px solid red;        }        div{            width: 120px;            height: 100px;            background: orange;            margin-bottom: 10px;        }    /*派生选择器*/        div p{            color: red;        }    /*标签选择器*/        p{            color: blue;        }    </style></head><body>    <div id="test1">test1</div>    <div class="test2">test2</div>    <div>普通div        <p>div中的p标签</p>    </div>    <p>独立p标签</p>    <div>id选择器<br/>class选择器<br/>        标签选择器<br/>派生选择器<br/>    </div></body></html>

效果：
这里写图片描述

阅读全文

0 0