前端基础之五 元素关系及选择器

    xiaoxiao2021-03-25  120

    1、id和class:必须以字母开头,可以有数字。在前端开发中,编写css时,一般用class选择器,尽量避免使用id选择器。

    id选择器    #id  。 id是一个元素的唯一标识。

    class选择器    .class  。class属性用来为一个元素分组,页面中相同的class属性值可以出现多个,并且一个元素可以拥有多个class.

    2、标签中还支持一个属性,叫做title. 

    一个元素设置了title属性以后,当鼠标引入到元素上边时,title中的文字会显示出来。

    3、元素之间的关系

    (1)祖先元素:直接或间接被祖先元素包含的元素我们称为后代元素(子元素也是后代元素)。

    (2)后代元素: 直接或间接包含后代元素的元素我们称为祖先元素(父元素也是祖先元素)。

    (3)父元素:直接包含子元素的元素我们称为父元素。

    (4)子元素: 直接被父元素包含的元素我们称为子元素。

    (5)兄弟元素: 拥有相同的父元素的元素称为兄弟元素。

    3、不同关系的选择器

    (1)后代元素选择器: - 作用:选择指定元素的指定后代元素 - 语法:祖先元素 后代元素 - 例子:div p{} - 这样会选取所有的在div中的p元素

    (2)子元素选择器: - 作用:选择器指定元素的指定子元素 - 语法:父元素 > 子元素 - 例子:div > p{} - 会选中所有的div的子元素p (3)兄弟元素选择器: - 作用:选择指定元素的后一个兄弟元素或者后边所有的兄弟元素 指定元素的后一个兄弟元素

                    - 语法:前一个 + 后一个 - 例子:div + p{} - 选中紧挨着div后边的p元素

    指定指定元素后边的所有元素

    - 语法:前一个 ~ 后一个 - 例子: div ~ p {} - 选择div后边所有的p兄弟元素

    转载请注明原文地址: https://ju.6miu.com/read-16272.html

    最新回复(0)