Блог

Главная - Вопросы по программированию - Как работает селектор CSS в этом коде? «класс element.class «

Как работает селектор CSS в этом коде? «класс element.class «

#css #semantic-ui #semantic-ui-react

#css #semantic-ui #semantic-ui-react

Вопрос:

Я использую Semantic UI React. Приведенный ниже код заставляет всплывающий элемент с круглой кнопкой запуска «i» появляться внутри границ кнопки, которая предшествует ей, и выглядит примерно так:

введите описание изображения здесь

Файл CSS:

   .pennai .builder-scene .algorithm-btn   i.icon {
  position: absolute;
  top: 1.1em;
  right: .1em;
  cursor: pointer;
  }

Фрагмент JS:

         <Grid.Column key={algorithm._id}>
          <Button
            fluid
            inverted
            color="orange"
            size="large"
            active={getIsActive(algorithm)}
            onClick={() => setCurrentAlgorithm(algorithm)}
            className="algorithm-btn"
          >
            {formatAlgorithm(algorithm.name)}
            <div className="param-count">
              {`${Object.keys(algorithm.schema).length} parameters`}
            </div>
          </Button>
          <Popup
            on="click"
            position="right center"
            header={formatAlgorithm(algorithm.name)}
            content={
              <div className="content">
                <p>{algorithm.description}</p>
                {algorithm.url amp;amp;
                  <a href={algorithm.url} target="_blank"><strong>Read more here <Icon name="angle double right" /></strong></a>
                }
              </div>
            }
            trigger={
              <Icon
                inverted
                size="large"
                color="orange"
                name="info circle"
              />
            }
          />
        </Grid.Column>

Мой вопрос в том, как работает селектор CSS для этого? Кнопка включает className="algorithm-btn" , но мой наивный взгляд на селектор CSS кажется, что это должен быть всплывающий элемент, которому нужно указать место относительно его предка, и, следовательно, он должен получить .algorithm-btn класс?

Комментарии:

1. Он нацелен на значок, а не на всплывающее окно. Вы можете узнать больше о селекторах в документах MDN

2. Это выбор значка, который размещается непосредственно после .pennai .builder-scene .algorithm-btn элемента.

3. Да, я вижу, что он выбирает значок. Чего я не понимаю, так это почему класс присваивается кнопке, а не элементу Icon, поскольку мы меняем именно элемент Icon. Возможно, это для того, чтобы все было более согласовано с «общим комбинатором родственных элементов», для которого было бы разумнее применить класс к первому родственному элементу, поскольку он может соответствовать нескольким другим родственным элементам?