css选择器

什么是css？

• css 指的是层叠样式表（Cascading Style Sheets）,也称级联样式表
• css 节省了大量工作，它可以同时控制多张网页的布局
• 外部样式表储存在css文件中

元素选择器

元素选择器是根据元素名称来选择HTML元素

<style>
        p{
            text-align: center;
            color: red;
        }
    </style>

id选择器

id选择器是根据元素的id属性来选择特定的HTML。
元素的id在页面中是唯一的，因此id选择器用于选择一个唯一的元素！
要选择具有特定id的元素，请写一个＃号，后跟该元素的id。

类选择器

类选择器选择有特定class属性的HTML元素。
如需选择拥有特定class的元素，请写一个句号（。）字符，后面跟类名。
你还可以指定只有特定的HTML元素会受类的影响。

通用选择器（*）选择页面上的所有的HTML元素。

<style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>

后代选择器：后代选择器用于选取某元素的后代元素。

子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素直接/一级子元素的元素。

组合选择符

css组合选择符包括各种简单选择符的组合方式，说命了两个选择器之间的关系。
在css3中包含了四种组合方式：
后代选择器（以空格 分隔）
子元素选择器（以大于号>分隔）
相邻兄弟选择器（以加号+分隔）
普通兄弟选择器（以波浪号~分隔）

分组选择器

分组选择器选取所有具有相同样式定义的HTML元素。
对选择器进行分组，以最大程度的缩减代码。
如需对选择器进行分组，请用逗号来分隔每个选择器

<style>
        .main,p,span{
            text-align: center;
            color: red;
        }
    </style>

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者都有相同父元素。

后续兄弟选择器

后续兄弟选择器选取指定元素之后的所有相邻兄弟元素。

1.[attribute]选择器

[attribute]选择器用于选取带有指定属性的元素。

 2.[attribute=“value”]选择器

[attribute=“value”]选择器用于选取带有指定属性和值的元素。

 设置表单样式

若需为不带class或id的表单设置样式，属性选择器会很有用：

 

p标签不能作为一个容器来使用，div容器可以用来存放其他内容