CSS 属性选择器

前面根据标签名、ID属性、class属性筛选元素，还能够通过属性名称与值筛选元素。

1 语法

[属性名=属性值]{
  样式内容
}

选择页面里属性名=属性值的元素，进行样式设置。

前后通过中括号。

2 例1

<body>
    <h1 name="name1">标题1</h1>
    <p name="name1">第1段</p>
    <p name="name1">第2段</p>
    <p>第3段</p>
    <p>第4段</p>
</body>

html页面里，多个元素的id不能重复，name可重复。

目标：将name="name1"的元素设为红色加粗。

CSS代码

    <style>
        [name=name1]{
            color: #f00;
            font-weight: 600;
        }
    </style>

3 例2：美化文本框

设置文本框：宽度、高度、边框、左内边距。

HTML代码

    <form action="https://tuto.dushare.cn">
        用户账号:<input type="text" value="dushare"><br><br>
        用户昵称:<input type="text" value="关关教程"><br>
        密码:<input type="password" value="123456"> <br>
        <input type="checkbox" checked>同意协议 <br>
        性别：<input type="radio" name="gender" checked>男 &nbsp;&nbsp;<input type="radio" name="gender">女 <br>
        婚否：<input type="radio" name="marry" checked>已婚 &nbsp;&nbsp;<input type="radio" name="marry">未婚 <br>
    
        <button type="submit">注册</button> <br>
    </form>

上述含有两个文本框。

因为文本框是type="text"的input，其它控件如复选框、单选框也是input标签，因此不能仅使用标签选择器，需要结合标签选择器与属性选择器。

CSS代码

    <style>
        input[type=text]{
            border: 1px solid #00f;
            width: 99px;
            height: 25px;
            padding-left: 10px;
        }
    </style>

input与[type=text]中间不能加空隔，要求连写。

连写表示这个元素同时既要符合标签选择器，又要符合属性选择器。

如果加空隔，空隔表示子元素选择器，不符合我们的逻辑。

❮上一节 CSS 子元素选择器下一节 CSS 逗号选择器❯

第06章 CSS基础教程

CSS 属性选择器

1 语法

2 例1

3 例2：美化文本框

html教程