CSS选择器-2.3-属性选择器- E [ attribute ] { property : value ； ......}--和伪类选择器-伪类选择器最喜欢和超链接（a元素）一起使用

最新推荐文章于 2021-08-28 15:18:45 发布

say hi.

最新推荐文章于 2021-08-28 15:18:45 发布

阅读量414

点赞数

本文链接：https://blog.csdn.net/qq_44280574/article/details/108159879

版权

1.什么是属性选择器？
属性选择器是用于对具有某种属性的元素设置CSS样式
格式为： E [ attribute ] { property : value ; …}
E代表元素， [ ] 表示元素的属性

2.[ ] 里边属性的种类
[ attribute ]用于选取指定属性（attribute ）的元素
[ attribute =value]用于选取指定属性（attribute）和指定属性值（value）的元素
最主要是前两种，后两种有余力，就尽量掌握
[ attribute~=value] 用于选取属性中包含指定值的元素
[ attribute |=value] 用于选取以指定值开头的属性值的元素
1.例如

春风十里

my小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo2</title>
    <style>
        h1[title] {
            color: darkgreen;
        }
        /* p[title] {

            color: aqua;
        } */
        /* p[title="p2"] {
            color: chocolate;

        } */
        /* p[class] {
            color: darkgoldenrod;
        } */
        p.pc{
            color: indigo;
        }
    </style>
</head>
<body>
    <h1 title="h1">我是h1</h1>
    <p title="p">我是p</p>
    <p title="p2">我是p2</p>
    <p class="pc">我是pc</p>
    <p class="pc2">我是pc2</p>
</body>
</html>

练习小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <style>
        /* 1. */
        /* p[title] {
            color: red;
        } */
        /* 2. */
        /* p[title="huawei"] {
            color: blue;
        } */

        /* 3. */
        /* 我们要找的这个属性呀，它是其中要包含 hua  不是!!匹配有 hua 就可以！！ */
        /* 我们要找的这个属性，它是其中要包含 这个hua 
        这个包含，指的是包含一个，独立!!单独!!的一个值!!!*/
        /* p[title~="hua"]{
            color: yellow;
        }  */
        /* p[title~="wei"]{
            color: yellow;
        }  */
        /* 4.前缀  hua 独立的前缀  - 杠前缀  不是空格啊 空格是3的包含呀*/
        p[title|="hua"] {
            color: pink;
        }

    </style>
</head>
<body>
    <!-- 1.2. -->
    <!-- <p title="huawei">华为云在线教育</p> -->
    
    <!-- 3. -->
    <!-- 也就是说，title这个属性对应的值可能有好几个，中间用空格分隔开
    其中有一个是 hua ，正好包含上边  p[title~="hua"]{  中的那个hua
    所以，我们就能选中这个 html的元素 p -->
    <!-- <p title="huawei hua">华为云在线教育</p> -->
    
    <!-- 4. 前缀  ，，带个  -  !!!!! -->
    <!-- <p title="hua-wei">华为云在线教育</p> -->

    <!-- 这样中间是空格，不是 - 是不会被选中的 -->
    <!-- <p title="hua wei">华为云在线教育</p> -->

    <!-- 这样是可以被4那种形式选中的 -->
    <!-- <p title="hua">华为云在线教育</p> -->
    
    <!-- 这样是不会被4那种形式选中的 -->
    <!-- <p title="huawei">华为云在线教育</p> -->
    
</body>
</html>

伪类选择器
2.1什么是伪类？
伪类是指那些处在一定状态的元素
伪类以冒号开头

2.2什么是伪类选择器？
通过伪类来选中相应元素进而添加样式的选择器
伪类名可以单独使用，也可以和其他选择器一起使用
一般伪类选择器通常和元素名称一起使用，用于选中某
一元素的伪类
元素选择符和冒号之间不能有空格
伪类选择器最喜欢和超链接（a元素）一起使用

1、伪类如下
：link 表示未被访问的链接
：visited 表示已被访问的链接
：hover 鼠标经过链接上方时的状态
：active 链接被激活(点击时)的状态
这个顺序很重要（因为状态有叠加呀）
link 和visited 顺序谁在前，谁在后，无所谓
hover 一定要在 link 和 visited 后边
active 一定要在hover的后边
口诀：LoVe HAte 爱与恨
例如：
华为官网
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器</title>
    <style>
        a:link {color: red;}
        a:visited {color: blue;}

        a:hover {color: green;}

        a:active {color: pink;}

    </style>
</head>
<body>
     <a href="https://huawei.com">华为</a>
    
</body>
</html>

say hi.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器-2.3-属性选择器- E [ attribute ] { property : value ； ......}--和伪类选择器-伪类选择器最喜欢和超链接（a元素）一起使用

1.什么是属性选择器？属性选择器是用于对具有某种属性的元素设置CSS样式格式为： E [ attribute ] { property : value ; …}E代表元素， [ ] 表示元素的属性2.属性的种类[ attribute ]用于选取指定属性（attribute ）的元素[ attribute =value]用于选取指定属性（attribute）和指定属性值（value）的元素[ attribute~=value] 用于选取属性中包含指定值的元素[ attribute |=va
复制链接

扫一扫